Week 2 — Wireframing: Plan Before You Style

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

Wireframes translated into structure; nesting, indentation, comments, meaningful filenames

Project files and folder structure

Create `web-design-course/week-02/index.html` and `week-02/wireframe.pdf`.

Syntax to practice

Opening/closing tags, parent-child nesting, indentation, HTML comments such as `<!– Main content starts here –>`.

Build it

Create a low-fidelity homepage wireframe for a small business or creative professional. In Sublime Text, build its HTML skeleton with header, navigation, hero, three content cards, and footer. Use placeholder text and consistent indentation.

Code along: Turn a wireframe into semantic page regions.

Open in Sublime Text: week-02/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.

<header><h1>Neighborhood Cafe</h1></header>
<nav aria-label="Main navigation">
  <a href="#menu">Menu</a>
  <a href="#story">Our Story</a>
</nav>
<main>
  <section id="menu"><h2>Menu</h2><p>Seasonal favorites.</p></section>
  <section id="story"><h2>Our Story</h2><p>A place to gather.</p></section>
</main>
<footer><p>Visit us this week.</p></footer>

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-02/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Neighborhood Cafe</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header><h1>Neighborhood Cafe</h1><p>Fresh coffee and baked goods</p></header>
  <nav aria-label="Main navigation"><a href="#menu">Menu</a><a href="#story">Our Story</a></nav>
  <main>
    <section id="menu"><h2>Menu Highlights</h2><p>Explore seasonal favorites.</p></section>
    <section id="story"><h2>Our Story</h2><p>A neighborhood place to gather.</p></section>
  </main>
  <footer><p>Visit us this week.</p></footer>
</body>
</html>

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

body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; color: #222; }
header, footer { padding: 20px; background: #f3e8d7; }
nav { display: flex; gap: 16px; padding: 16px 20px; background: #243447; }
nav a { color: white; }
main { padding: 20px; }
section { margin-bottom: 24px; }

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

Modify it

Add a third section with a unique id and link to it from the navigation.

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-02/wireframe.pdf` — desktop homepage wireframe labeling sections and reading order.
• `week-02/index.html` — header, nav, hero, main content with at least three cards, and footer.
• `week-02/README.txt` — target audience, page goal, and primary action.

Submission checklist

• Wireframe and HTML have the same section order; nesting and indentation are consistent; primary action is identified.
• 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.