7 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.
Three skill boxes, for example Graphic Design, Web Design, Photography. Each box has a border, a background colour, padding, margin, a heading, and a short description.
The clay outline is the part this lesson is about.
You need three boxes. Each box has a heading and a short description. h3 is the heading inside a box, because h2 is already the heading for the whole Skills section. Graphic Design, Web Design, and Photography are the examples in the brief. You may use them.
Write the shared paint once, on .skill: border, padding, margin, and a width. display: inline-block lets the boxes sit side by side and wrap on a phone. Then two extra rules change only the colours. .skill.web is a box that has both names, skill and web. Same shape, different colour, so they belong together and can still be told apart.
One box, or three boxes with no heading, or three boxes with no padding, will not pass this part. The marker should be able to count three, and see a border, a fill, space inside, and space between them.
<section class="skills" id="skills">
<h2>Skills</h2>
<div class="skill">
<h3>Graphic Design</h3>
<p>Posters, logos, and page layouts.</p>
</div>
<div class="skill web">
<h3>Web Design</h3>
<p>Pages built with HTML and CSS.</p>
</div>
<div class="skill photo">
<h3>Photography</h3>
<p>Pictures chosen and cropped for a page.</p>
</div>
</section>.skills {
margin: 20px;
}
.skills h2 {
margin-top: 0;
font-size: 28px;
}
.skill {
display: inline-block;
width: 260px;
max-width: calc(100% - 16px);
box-sizing: border-box;
vertical-align: top;
margin: 8px;
padding: 16px;
border: 1px solid #c0532e;
background: #f8e8e1;
color: #8c3a1e;
}
.skill h3 {
margin: 0 0 8px;
font-size: 20px;
}
.skill p {
margin: 0;
font-size: 16px;
line-height: 1.5;
}
.skill.web {
border-color: #14613a;
background: #e7f5ee;
color: #14613a;
}
.skill.photo {
border-color: #1e4a73;
background: #e8eef6;
color: #1e4a73;
}<h2>Skills</h2>The section heading. The menu jumps to id="skills" on this section.<div class="skill">One box. A div is a plain box you can paint. The heading and the description go inside it.<h3>The box heading. Smaller than the section heading. One h3 in each box.class="skill web"Two names on one box. It gets the .skill paint, then the .skill.web paint replaces the colours.display: inline-block;Lets the boxes sit next to each other. On a narrow phone they wrap instead of overflowing.width: 260px;Each box is the same width, so they look like a set.padding and margin16px inside each box. 8px outside, which becomes the gap between boxes. The section also has margin: 20px so the group sits away from the screen edge..skill.web and .skill.photoLeaf green, then sky blue. Clay, leaf, and sky. Do not give all three the same fill, or they look copied.The next lesson opens after you practice and pass the assessment.
Two boxes will not pass. Add the third, with its own heading and sentence.
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.