Chapter 2: Working with Text
If you can't see it, you can't style it.
Beautiful CSS always starts with great HTML markup. In this first exercise, we'll create some content, mark it up appropriately, and apply styling.
Fork the opening CodePen to your account:
Beginning CodePenWriting text
Look at the text in the HTML block. Change the text to reflect your own life. Take out all of the [] brackets - they are there to show you where to change the text.
Once the 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?
Marking up text
Look at the content you have on the page. Identify the most important content and give it a H2 element. Mark up the rest appropriately using paragraphs, links, and any other semantic element required.
Styling the introduction
With the text created and marked up, we will add CSS styling to make our introduction look like this:
Ending CodePen
Chapter 2: You Try It
Now it’s your turn. Can you set up the text section for the Contact Me section?
Beginning CodePenUse the same strategy we just went through for the introduction part of the page.
- Look at the text in the HTML block. Change the text to reflect your own life.
- Mark up the text with HTML. Don't forget the section and container around the text.
- Make a @layer for your contact styles, and put your styles in that location. EXCEPTION: Your button style may be better placed in the base layer, as we'll use it in many locations on the website.
- The button should be green with black text by default. On hover, it should turn tan with black text.
- The aurora background image URL is https://assets.codepen.io/296057/fem-aurora.jpg
When you are finished, your contact section should look similar to this:
Ending CodePen