Week 8 — Midterm Project: Build a Purposeful Website

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

Midterm integration: planning, semantic HTML, CSS, assets, responsive layout

Project files and folder structure

Submit midterm-site/ with index.html, css/styles.css, assets/, and README.txt.

Syntax to practice

Semantic HTML, external CSS, classes, links, images with alt text, responsive layout rules, and relative file paths.

Build it

Build a responsive homepage for a small business, community organization, or creative professional. Include header/navigation, hero with clear call to action, at least three content sections/cards, and footer. Base the design on your wireframe and style guide.

Code along: Combine a header, hero, service cards, and footer.

Open in Sublime Text: midterm-site/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 class="site-header">
  <a href="index.html">Studio North</a>
  <nav aria-label="Main navigation"><a href="#services">Services</a><a href="#about">About</a></nav>
</header>
<main>
  <section class="hero"><h1>Thoughtful design for useful ideas.</h1><p>We turn early concepts into clear experiences.</p></section>
  <section id="services" class="card-grid">
    <article class="card"><h2>Strategy</h2><p>Define the problem.</p></article>
    <article class="card"><h2>Design</h2><p>Shape the experience.</p></article>
    <article class="card"><h2>Delivery</h2><p>Prepare the work to launch.</p></article>
  </section>
</main>
<footer><p>© 2026 Studio North</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: midterm-site/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Studio North | Creative Services</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header class="site-header"><a class="site-name" href="index.html">Studio North</a><nav aria-label="Main navigation"><a href="#services">Services</a><a href="#about">About</a></nav></header>
  <main>
    <section class="hero"><p class="eyebrow">Independent creative studio</p><h1>Thoughtful design for useful ideas.</h1><p>We turn early concepts into clear experiences.</p><a class="button" href="#services">Explore services</a></section>
    <section id="services" class="card-grid"><article class="card"><h2>Strategy</h2><p>Define the problem.</p></article><article class="card"><h2>Design</h2><p>Shape the experience.</p></article><article class="card"><h2>Delivery</h2><p>Prepare work to launch.</p></article></section>
    <section id="about"><h2>About the studio</h2><p>Write a short introduction.</p></section>
  </main>
  <footer><p>© 2026 Studio North</p></footer>
</body>
</html>

CSS file: midterm-site/css/styles.css

body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; color: #172033; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 5%; background: #172033; }
.site-header a { color: white; }
nav { display: flex; gap: 16px; }
.hero { padding: 64px 5%; background: #eaf1fb; }
.hero h1 { max-width: 760px; font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1.05; }
.button { display: inline-block; padding: 12px 18px; background: #2457a7; color: white; border-radius: 5px; text-decoration: none; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 32px 5%; }
.card { padding: 20px; border: 1px solid #cbd5e1; border-radius: 8px; }
footer { padding: 24px 5%; background: #172033; color: white; }
@media (max-width: 650px) { .site-header { align-items: flex-start; flex-direction: column; } .card-grid { grid-template-columns: 1fr; } }

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

Modify it

Replace the sample studio with your chosen client and test every link at three screen widths.

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

• midterm-site/index.html — homepage with header/nav, hero, at least three content sections/cards, and footer.
• midterm-site/css/styles.css — typography, color, spacing, layout, and responsive breakpoint.
• midterm-site/assets/ plus asset-credits.txt — local images and source/license details.
• midterm-site/README.txt — goal, audience, folder map, preview instructions, limitations.
• midterm-site/testing/ — mobile, tablet, desktop screenshots and a checklist for navigation, images, responsiveness.

Submission checklist

• All linked files load; site fits audience and wireframe; responsive screenshots, credits, README, and complete folder included.
• 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.