4 of 11
This lesson is closed. Finish the one before it. Do the practice. Pass the assessment. Then this one opens.
Back to the lesson. Three tries are used. Read this again, then try the code.
You finished. The lesson is open again.
Your name as an h1. A short description such as “Graphic Designer and Web Developer.” A background colour. White or contrasting text. Center-aligned text. Padding around the content. A border at the bottom.
The clay outline is the part this lesson is about.
The header is the band at the top. It holds two things: your name, and a short line about what you do. The name is the h1, the biggest heading. A page gets one h1.
The paint does five jobs, and they match the brief one for one. background is the band colour. color is the text, paper on ink so it contrasts. text-align: center puts the words in the middle. padding is space inside the band, around the words. border-bottom is the line along the bottom edge only.
If the text is dark on a dark band, the contrast mark goes. If the words sit on the left, the center mark goes. If the band touches the words with no padding, that mark goes. If the line is around the whole box instead of along the bottom, read the brief again: a border at the bottom.
<header id="top">
<h1>Your Name</h1>
<p>Graphic Designer and Web Developer.</p>
</header>header {
background: #1a1712;
color: #faf7f2;
text-align: center;
padding: 48px 20px;
border-bottom: 4px solid #c0532e;
}
header h1 {
margin: 0 0 8px;
font-size: 36px;
}
header p {
margin: 0;
font-size: 18px;
}<header>The band. CSS can style header directly, because the page has only one.<h1>Your Name</h1>The main heading. Put your name here, not in the title only. One h1 on the page.<p>Graphic Designer and Web Developer.</p>The short description. The brief gives this as an example. You may keep it, or write your own short line.background: #1a1712;Ink. The band goes dark.color: #faf7f2;Paper. Light text on the dark band. The brief calls this white or contrasting text.text-align: center;Centers the name and the line. Without this, they sit on the left.padding: 48px 20px;Space inside the band. 48px above and below, 20px on the sides. The words no longer touch the edges.border-bottom: 4px solid #c0532e;A clay line, 4px thick, along the bottom only. That is the border the brief asks for.The next lesson opens after you practice and pass the assessment.
The words are fine. The text colour is the same as the band, so the name disappears. Fix the header rule.
The code is right. Start the assessment when you are ready. The lesson stays closed until both answers are right.
The lesson is closed. Pick one answer each, then mark it. A wrong answer tells you why, what to do, and what to remember.