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

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 Google.com 8 How to search using SimilarSites.com 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