for dummies store - a Wiley Brand
  • Print
  • Share
Creating a Web Site: Design and Build Your First Site! (1119376513) cover image

Creating a Web Site: Design and Build Your First Site!

ISBN: 978-1-119-37651-4
128 pages
April 2017
US $9.99 Add to Cart

Introduction 2

About This Book 2

A Word About Copyright 3

About You 3

About the Icons 4

Further Reading 4

Project 1: Choose a Topic 5

Build a Word Cloud 5

Look at Similar Web sites 6

How to be safe while surfing the web 7

How to search with 8

How to search using 9

Search offline 11

Eliminate Weak Ideas 11

Decide Whom You Want to Talk To 12

Project 2: Create a Site Map 13

Decide How You Want to Lay Out Your Content 13

Create a Site Map with Google Drawings 14

Create a new Google Drawings document 14

Draw your first content bubble in Google Drawings 16

Create additional content bubbles 18

Draw a Site Map Using a Pencil and Paper 21

Project 3: Create a Wireframe 23

What Is a Wireframe? 23

The Basics: What You Need to Know to Get Started 24

Create a Low-Fidelity Wireframe 25

Place the logo 26

Create the navigation menu 28

Add your main content 29

Create a sidebar and sidebar widgets 30

Create a footer 31

Your finished wireframe 31

Project 4: Create a Style Guide 32

What Is a Style Guide? 32

Create a Style Guide with Frontify 33

Create an account with Frontify 33

Create a brand with Frontify 35

Learn about Color Codes 38

HEX codes 38

Discover color combinations with ColorHexa 38

Pick three colors to use in your web site 39

Add a color palette to Frontify 42

Find a font with Google Fonts 46

Add your font to Frontify 48

Finding and using media from the web 50

Using VisualHunt to find free stock photos 50

Add photos to Frontify 53

Project 5: Make Your Design Come to Life 57

Setting Up Your Coding Environment 57

Create your Google folder 57

Add coding apps to Google Drive 59

Coding Your Home Page 66

The HTML structure 67

Adding text to your web site 69

Adding more structure to your web site 70

Add style attributes to your web site 72

Adding pictures to your web site 78

Adding More Pages to Your Web site 85

Project 6: Make Your Web site Look Great 93

Getting Google Drive Ready 94

Make your Google Drive folder public 95

Add the CSS Editey app to Google Drive 96

Creating a CSS File for Style 98

Create a CSS file 99

Move your style code to your CSS file 100

Link your CSS file to your HTML file 102

Test your changes 105

Styling Your Web site 106

Decide where to put the background colors 106

Change the font color 107

Format your page 108

Stylize your links 113

Change your background 116

Add Your Content 118

Add content and widgets to your home page 118

Change your footer text 119

Add content to your other pages 120

Share with Your Friends 120

  • Print
  • Share