- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The website of a beginning coder</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>The website of a beginning coder</h1>
</header>
<main>
<nav>
<h2>Recent Posts</h2>
<ul>
<!-- Add a link in the line below -->
<li>Day One. How I forgot to feed the cat</li>
<li>Day Two. I want to become a coder</li>
<li>Day Three. My cat is offended at me</li>
<li>Day Four. How I almost got sick</li>
<li>Day Five. I am relaxing</li>
<li>Day Six. How I failed to understand anything</li>
<li>Day Seven. Muffin gave me an assignment</li>
<li>Day Eight. It’s getting very serious</li>
<li>Day Nine. Or more precisely night</li>
<li>Day Ten. Summing up</li>
<li>Day Eleven. Everything should be taken in moderation</li>
</ul>
</nav>
<section>
<p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found interactive courses in HTML and CSS and I have set myself the goal of becoming one. I even was assigned an instructor, Muffin, who does not allow me to slack off and will track my progress.</p>
<p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p>
</section>
<section>
Skills section
</section>
</main>
<footer>
Website footer
</footer>
</body>
</html>
CSS
body {
padding: 0 30px;
font-size: 14px;
line-height: 22px;
font-family: "Georgia", serif;
color: #222222;
}
h1 {
font-size: 36px;
line-height: normal;
}
h2 {
font-size: 20px;
line-height: normal;
}
a {
color: #0099ef;
text-decoration: underline;
}
ul {
list-style: none;
padding-left: 0;
}
footer {
margin-top: 30px;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Wrap all of the text inside the first list item in the
<a>tag. - Add the attribute
hrefwith the addressday-1.htmlto the link. - Now click on the link (in the mini-browser).
Comments