Week 3 — HTML: Give Content Structure and Meaning

Sublime Text coding lab

Complete this coding task in Sublime Text, save the files using the names below, and open the HTML page in a browser to test it.

Today’s coding focus

Semantic HTML, heading hierarchy, lists, links, and syntax debugging

Project files and folder structure

Create web-design-course/week-03/index.html.

Syntax to practice

Semantic elements (header, nav, main, section, article, footer), heading levels, paragraphs, lists, anchor tags, matching closing tags.

Build it

Build a profile page for a fictional designer, photographer, or local business. Include one <h1>, at least two <h2> headings, two paragraphs, a three-item list, and one meaningful link. Check nesting and closing tags, then test in a browser.

Code along: Practice headings, lists, links, and image alt text.

Open in Sublime Text: week-03/index.html

Type the example below, save the file, and read the comments and selectors carefully. Use this as a starting point, then modify it for your own project.

<main>
  <h1>Ways to Explore the City</h1>
  <h2>Try these ideas</h2>
  <ul>
    <li>Visit a local gallery</li>
    <li>Walk through a public park</li>
    <li>Explore a neighborhood cafe</li>
  </ul>
  <p>Learn more at <a href="https://www.nps.gov/">National Park Service</a>.</p>
  <img src="assets/park.jpg" alt="A tree-lined walking path in a park">
</main>

Complete HTML and CSS example

These are matching files. Create the folders shown below, save each code sample using the exact filename, and keep the stylesheet link consistent with your folder structure.

HTML file: week-03/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Explore the City</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <main class="article">
    <article>
      <h1>Three Ways to Explore the City</h1>
      <p>Plan a day around places that interest you.</p>
      <h2>Start with these ideas</h2>
      <ul><li>Visit a gallery</li><li>Walk through a park</li><li>Try a local restaurant</li></ul>
      <p>Find more ideas at <a href="https://www.nps.gov/">National Park Service</a>.</p>
    </article>
  </main>
</body>
</html>

CSS file: week-03/css/styles.css

body { margin: 0; font-family: Arial, sans-serif; color: #20242c; line-height: 1.7; }
.article { max-width: 700px; margin: 0 auto; padding: 24px; }
h1 { line-height: 1.15; }
a { color: #1457a6; }
li { margin-bottom: 8px; }

Important: The HTML links to css/styles.css. Keep that path correct relative to the HTML file.

Modify it

Add an ordered list and replace the sample image path and alt text with your own asset.

Save and test

1. Save the file in the exact folder shown above.
2. Open the HTML file in a browser, or refresh it after saving if it is already open.
3. Check that linked CSS, images, and navigation work. If something fails, inspect filenames, capitalization, nesting, and relative paths.

Assignment and required deliverables

Submit every item below. Use the specified filenames and folder structure. A screenshot does not replace a required source file.

Required files

• week-03/index.html — profile page with required semantic elements and content.
• week-03/syntax-check.png — screenshot of browser output or Sublime Text code showing heading hierarchy.
• week-03/README.txt — two HTML syntax errors checked and how you confirmed the page worked.

Submission checklist

• One <h1>; logical heading order; three-item list; meaningful link text; no obvious broken nesting.
• Keep all HTML, CSS, image, text, and PDF files inside the named weekly or project folder.
• Open the HTML file in a browser before submitting and confirm linked CSS and images load.