Chapter 2: Working with Text

Part 1: Creating good markup

Beautiful CSS always starts with great HTML markup. In this first exercise, we'll get set up in CodePen, fork our starting pen, and create some content.

Look at the text in the HTML block. Change the text to reflect your own life. Don't worry about marking this up with HTML just yet. Take out all of the [] brackets - they are there to show you where to change the text.

Part 2: Marking up the HTML

image of the top of the web page we're building.

With our text in place, what becomes good markup for our site? Remember that design is CSS. Markup, or HTML, is all about conveying information. What is the most important information on this page? What is supporting information or more details? Should there be a link? If so, where?

Part 3: Styling the text

image of the top of the web page we're building.

With basic, semantic HTML in place, let's dig into making this pretty. Refer to the screenshot for how we'd like our page to look when we're done. I've given you some colors and fonts to work with in the CodePens below.

Part 4: You try it: Styling text

Now that you have an idea of how to style text, you try it with the Contact section.

Screenshot of the contact portion of the web page.