<< .. Go to : : Home : : Exercise 5 : : Demo 5A : : Demo 5B : : Demo 5C : : Demo 5D : : All Class Demos .. >>

Exercise 5 Demo: Part D : Adding Google Fonts

Using Google Fonts

Create Your Page Template

Draw up a page design. How do you want it to look? I am using a single column here for a very simple design.

When you write your HTML code, build your page in the Natural Flow, so that if your CSS fails for any reason, your visitor can still read your content in the correct order. For this page I used some divs with IDs of "wrapper" and "content" to separate this content from my typical demo page. There is a header for my h1 tag, the nav element to hold my navigation and a footer.

Add the basic CSS styles to your page. Adjust them as needed to make your content look like the original page design that you drew up.

To make our website more interesting, let's add some Google Fonts! Go to the next step.