Project final - About me
Combine everything and document the page with comments.
Project final: combine everything
You've reached the final step. The page has a skeleton, title, intro text, highlights, and section breaks. Now the last step: documenting with comments.
Comments are short notes that explain the code for you and others. The browser doesn't show them, but anyone viewing the source can read them. A short comment above each section keeps the page readable and easy to maintain.
Document with comments
When writing comments, keep these in mind:
- Keep it short: a few words or one sentence is enough. Long comments clutter the code.
- Place matters: a comment should sit right above the section it explains.
- Be specific: write 'top heading: name and title' rather than 'section'.
Good comments help you understand the page when you return months later.
Exercise Add an explanatory comment above each section
Take the page with highlights and separation from the previous lesson. Add a comment above each of the three sections: first before <h1> (explaining the top heading), second before the first <p> (explaining the intro text), third before <hr> (explaining highlights and interests). Don't remove any existing code; only add comments.
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alex York - About me</title>
</head>
<body>
<!-- Top heading: name and title -->
<h1>Alex York</h1>
<h2>Photographer</h2>
<!-- Introductory text -->
<p>Hi! I'm Alex. I shoot <strong>street and portrait</strong> photography and love <em>travel</em>.</p>
<p>This page is a short introduction to who I am.</p>
<!-- Highlights and interests -->
<hr>
<p>My favorite subject is <mark>light</mark>.</p>
<p>My hobbies:<br>reading and hiking.</p>
</body>
</html>About me page complete!
Congratulations! After 5 lessons you have a working about me page: skeleton, title, intro text, highlights, section breaks, and explanatory comments. Each lesson's starting code carried the previous lesson's solution; you only added the new piece.
You can now fill it with your own details, extend the paragraphs, or add new sections. Your page is ready to publish.
Test yourself
-
What is the comment tag (<!-- -->) used for?
- To explain the code for yourself and others
- To show text in the browser
- To add an image to the page
- To link to another page
Show answer
To explain the code for yourself and others — Correct. Comments appear in the source but are not shown by the browser.
-
Complete the comment for the top heading section
<!-- ____ -->Show answer
<!-- Top heading: name and title --> -
Match each tag to its meaning
- DOCTYPE
- Document type declaration
- lang
- Page language
- title
- Tab title
- mark
- Highlighted text
- hr
- Section break