6 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.
A heading and a paragraph. A different background colour. A border. Padding inside the section. Margin around the section. A styled heading and paragraph.
The clay outline is the part this lesson is about.
About is a section with a heading and one paragraph. The heading is an h2. You already used h1 for your name. h2 is the next size down, for a section. Write the paragraph in your own words. The example sentence is only a start.
class="about" is a name you invent. The CSS finds it with a dot: .about. The page background is paper, #faf7f2. This box is white. That difference is the whole point. If both are white, the marker cannot see a different background. Padding is space inside the border. Margin is space outside the border, between this box and the things around it.
The mark needs the heading, the paragraph, a background that is not the page colour, a border, padding, and margin. A heading with no paragraph, or a box with no space inside, drops the easy marks.
<section class="about" id="about">
<h2>About Me</h2>
<p>I am learning to design pages and to build them with HTML and CSS. This page is my personal profile.</p>
</section>.about {
background: #ffffff;
border: 1px solid #e4d9ce;
padding: 20px;
margin: 20px;
}
.about h2 {
margin-top: 0;
font-size: 28px;
}
.about p {
margin: 0;
font-size: 18px;
line-height: 1.5;
}class="about"A name you made up. You could call it about-me. Then the CSS must use the same name.id="about"The spot the menu jumps to. The menu says href="#about".<h2>About Me</h2>The section heading. h2, not another h1. The page already has its h1.<p>The paragraph. Replace the example with two or three true sentences about you.background: #ffffff;White. The page is paper. White is different, so the box reads as its own section.border: 1px solid #e4d9ce;A thin line around the whole section.padding: 20px;Space inside, so the words do not touch the border.margin: 20px;Space outside, so the box does not touch the menu or the skills.The next lesson opens after you practice and pass the assessment.
The box is the same colour as the page, so the “different background” disappears. Change the fill.
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.