Week 5 — Typography, Color, and Visual Hierarchy

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

Typography, color, hierarchy, reusable classes, and accessible contrast

Project files and folder structure

Create week-05/index.html and week-05/css/styles.css.

Syntax to practice

HTML class attributes, CSS class selectors, font stacks, font-size, font-weight, line-height, color values, and CSS custom properties such as --color-accent.

Build it

Create a small style guide and apply it to the page. Define at least four colors, a type scale for h1, h2, body, and small text, and style a button/link. Check contrast with a contrast checker.

Code along: Create reusable color and spacing values with custom properties.

Open in Sublime Text: week-05/css/styles.css

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.

:root {
  --color-ink: #20242c;
  --color-paper: #f7f5f0;
  --color-accent: #c64f3d;
  --space-unit: 8px;
}
body {
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: Arial, sans-serif;
  line-height: 1.6;
}
a { color: var(--color-accent); }

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Style Guide Example</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <main class="style-guide">
    <p class="eyebrow">Visual identity</p>
    <h1>A small style guide</h1>
    <p>Use a consistent palette, typography, and spacing system.</p>
    <a class="button" href="#details">Explore the guide</a>
    <section id="details"><h2>Color and type</h2><p>Reuse design choices consistently.</p></section>
  </main>
</body>
</html>

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

:root {
  --color-ink: #20242c;
  --color-paper: #f7f5f0;
  --color-accent: #c64f3d;
  --space-unit: 8px;
}
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: 16px/1.6 Arial, sans-serif; }
.style-guide { max-width: 760px; margin: auto; padding: calc(var(--space-unit) * 3); }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; }
.eyebrow { color: var(--color-accent); text-transform: uppercase; letter-spacing: .08em; }
.button { display: inline-block; padding: 10px 16px; background: var(--color-accent); color: white; text-decoration: none; border-radius: 5px; }

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

Modify it

Change the accent color and add a .button class with padding, background, and border-radius.

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-05/index.html and week-05/css/styles.css — styled page using a consistent design system.
• week-05/style-guide.pdf or .png — four labeled color swatches, type choices, h1/h2/body samples, and button/link example.
• week-05/README.txt — typefaces/fallbacks and contrast results for body text and accent action.

Submission checklist

• Four palette colors; four text levels; reusable classes or variables; contrast results recorded; guide matches page.
• 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.