5 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.
Home, About, Skills, Contact. A background colour. Padding. Borders between or around menu items. Appropriate text colour. Margins between the items.
The clay outline is the part this lesson is about.
The menu is a nav. Inside it, four links: Home, About, Skills, Contact. This profile is one page, so each link jumps to a spot on the page. A jump looks like href="#about". The spot it jumps to has id="about". The # and the id must match.
A link is an a label, not a button. A button does something on the page. A link goes somewhere. You then paint the link so it looks like a button: a white box, a border, padding inside, margin outside so the boxes do not touch. text-decoration: none takes off the underline the browser adds to every link.
The marker looks for the four words, for a background on the bar, for padding, for borders on the items, for a text colour that can be read, and for margins so the items are not stuck together. Links with no href do not count as a menu.
<nav id="menu">
<a href="#top">Home</a>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</nav>nav {
background: #f4ede6;
padding: 12px;
text-align: center;
}
nav a {
display: inline-block;
color: #1a1712;
text-decoration: none;
background: #ffffff;
border: 1px solid #e4d9ce;
padding: 10px 14px;
margin: 6px;
}<nav>The menu. One nav on the page, so the CSS says nav and means it.href="#about"A jump on this same page. #about finds the label that has id="about". Home uses #top, which is the header.background: #f4ede6;Ghost, a light warm bar. It must not be the same dark colour as the header, or the two bands merge.padding: 12px;Space inside the bar, around the items.border: 1px solid #e4d9ce;A border around each item. The brief allows borders between or around. Around is the clearer one.margin: 6px;Space outside each item, so the boxes do not touch. Padding is inside. Margin is outside.color: #1a1712;Ink text on the light boxes. Appropriate means readable.text-decoration: none;Removes the underline. The border is what shows that the word can be tapped.The next lesson opens after you practice and pass the assessment.
These look like buttons, and they go nowhere. Turn them into links.
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.