2.2 Certification Project // Tribute Page

DESN 368

Tribute Page - Part 2: HTML/CSS Build

Web Design 1 · Certification Project

Project Overview

Build your tribute page design using semantic HTML and CSS. Last week, you designed your page in Figma. This week, you'll transform that design into a live, functioning website.

Your goal: Match your Figma design as closely as possible while writing clean, semantic code.

This is Part 2 of a 2-week project:

✅ Part 1 (Last Week): Figma design with typography, colors, and layout - COMPLETED
📍 Part 2 (This Week): HTML/CSS build - THIS ASSIGNMENT

Learning Objectives

By completing this project, you will:

Match design specifications with code
Write semantic HTML using appropriate HTML5 elements
Implement your custom typography system from Figma
Apply your color palette exactly (using color spec of choice, hex, rgb, or hsl)
Style lists as designed in Figma

Design-to-Code Workflow

Before You Start Coding

Open your Figma file in a separate window/tab
Review your design specifications:
- Typography system (fonts, sizes, weights)
- Color palette (hex codes)
- Spacing between elements
- List styling
- Layout structure
Gather your assets:
- Export your image(s) from Figma
- Create a file naming guide for your images
- Note all color codes
- Note exact font names and sizes

What Must Match Your Figma Design:

Design Element	What to Match
Typography	Font families, sizes, weights, line-heights
Colors	Background colors, text colors, accent colors (use exact hex codes)
Spacing	Margins and padding between sections
List Styling	Custom bullets, numbers, or styling you designed
Layout	Overall structure and element positioning
Images	Size, positioning, borders/shadows if designed

Pro Tip

Keep Figma open while you code! Reference it constantly to check: "What font size is my h2?" "What hex code is my accent color?" "How much space is between these sections?"

Required HTML Structure

Semantic Elements (Required)

Your HTML must use these semantic elements.

HTML Requirements:

Proper DOCTYPE and HTML5 structure
<header> for page title area
<main> wraps all primary content
<figure> and <figcaption> for images
<article> or <section> for content blocks
<footer> for page footer
Proper heading hierarchy (h1, h2, h3)
Descriptive alt text on images
External links have target="_blank" and rel="noopener noreferrer"

Why Semantic HTML?

Instead of this:

<div class="header">
    <div class="title">Name</div>
    <div class="image-box">
        <img src="photo.jpg">
        <div class="caption">Caption</div>
    </div>
</div>

Write this:

<header>
    <h1>Name</h1>
    <figure>
        <img src="photo.jpg" alt="Description">
        <figcaption>Caption</figcaption>
    </figure>
</header>

<main>
</main>

<footer>
</footer>

Benefits:

More accessible (screen readers understand structure)
Cleaner, more professional code
Easier for others to understand
Better for search engines

CSS: Implementing Your Design

External Stylesheet (Required)

Create styles.css file
Link it in your HTML <head>
NO inline styles (style="...")
NO <style> tags in HTML

Step 1: Import Your Typography

Go to your Figma file and check:

What font did you use for headings?
What font did you use for body text?

Then go to Google Fonts and import them:

<!-- In your HTML <head>, after your title -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=[YOUR-FONT-NAME]&display=swap" rel="stylesheet">

Example: If you used "Playfair Display" for headings and "Lato" for body:

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;700&display=swap" rel="stylesheet">

Step 2: Apply Your Typography System

Open Figma → Select any text → Look at right panel for:

Font family name
Font size (in px)
Font weight (Regular = 400, Bold = 700)
Line height
Color (hex code)

Then write your CSS:

/* Base Typography - USE YOUR FONTS FROM FIGMA */
body {
    font-family: '[YOUR-BODY-FONT]', Arial, sans-serif;
    font-size: [YOUR-SIZE]px;      /* Check Figma */
    line-height: [YOUR-VALUE];     /* Check Figma */
    color: [YOUR-HEX-CODE];        /* Check Figma */
}

/* Headings - USE YOUR HEADING FONT FROM FIGMA */
h1, h2, h3 {
    font-family: '[YOUR-HEADING-FONT]', Georgia, serif;
    line-height: [YOUR-VALUE];     /* Check Figma */
    color: [YOUR-HEX-CODE];        /* Check Figma */
}

/* Match Your Exact Sizes from Figma */
h1 {
    font-size: [YOUR-H1-SIZE]px;   /* Look in Figma */
    font-weight: [YOUR-WEIGHT];     /* Look in Figma */
}

Real example:

body {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333333;  /* From Figma color palette */
}

h1, h2, h3 {
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.2;
    color: #1a1a1a;  /* From Figma color palette */
}

h1 {
    font-size: 48px;  /* Measured in Figma */
    font-weight: 700;
}

How to Get Values from Figma:

Click on a text element
Look at the right panel:
- Font family is at the top
- Font size is below that
- Weight is listed (Regular, Bold, etc.)
- Line height is shown
Click on the color square to see the hex code
Write those exact values in your CSS

Step 3: Apply Your Color Palette

In Figma, you documented your color palette. Use those exact hex codes!

/* Use YOUR hex codes from your Figma color palette */

body {
    background-color: [YOUR-BG-COLOR];
    color: [YOUR-TEXT-COLOR];
}

main {
    background-color: [YOUR-CONTENT-BG];
}

h1, h2, h3 {
    color: [YOUR-HEADING-COLOR];
}

a {
    color: [YOUR-LINK-COLOR];
}

Example using Figma palette:

body {
    background-color: #f5f5f5;  /* Background from palette */
    color: #333333;              /* Text color from palette */
}

main {
    background-color: #ffffff;   /* White content area */
}

h1, h2, h3 {
    color: #1a1a1a;              /* Heading color */
}

a {
    color: #0066cc;              /* Accent color for links */
}

CSS: The Box Model (Required)

What is the Box Model?

Every HTML element is a box with four layers:

┌─────────────────────────────────────┐
│         MARGIN (outside)            │
│  ┌───────────────────────────────┐  │
│  │        BORDER                 │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │      PADDING (inside)   │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     CONTENT       │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

Measuring Spacing in Figma

Select two elements in Figma
Look at the space between them - Figma shows you the distance in px
That's your margin or padding value!

Required: Apply Box Model

You must demonstrate margin, border, and padding on at least 3 elements.

Example 1: Main Container

main {
    max-width: 900px;
    margin: 40px auto;     /* 40px top/bottom, centered horizontally */
    padding: 60px;         /* Space inside the container */
    background-color: #ffffff;
}

Example 2: Sections

.biography {
    margin: 60px 0;           /* Space above and below section */
    padding: 40px;            /* Space inside section */
    border-left: 4px solid #0066cc;  /* Visual accent */
    background-color: #f8f9fa;
}

Example 3: Image Figure

.hero-image {
    margin: 60px auto;        /* Vertical space, centered */
    padding: 20px;            /* Space around image */
    max-width: 800px;
    border: 1px solid #ddd;   /* Border around figure */
}

.hero-image img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 15px;      /* Space between image and caption */
}

Box Model Shorthand

/* All sides the same */
margin: 20px;

/* Vertical | Horizontal */
padding: 40px 20px;

/* Top | Right | Bottom | Left (clockwise) */
margin: 10px 20px 30px 20px;

Match your Figma spacing! Measure the space between elements in your design.

CSS: List Styling (Required)

Implement Your Figma List Design

You styled a list in your Figma design. Now code it!

Common Patterns:

Pattern 1: Custom Bullets

.achievements ul {
    list-style: none;
    padding-left: 0;
}

.achievements li {
    padding-left: 40px;
    margin-bottom: 1.5rem;
    position: relative;
}

.achievements li::before {
    content: "●";              /* Or whatever symbol you used */
    position: absolute;
    left: 0;
    color: [YOUR-ACCENT-COLOR]; /* From Figma */
    font-size: 1.5rem;
}

Pattern 2: Timeline with Numbers

.timeline {
    counter-reset: timeline;
    list-style: none;
    padding-left: 0;
}

.timeline li {
    counter-increment: timeline;
    padding-left: 60px;
    margin-bottom: 2rem;
    position: relative;
}

.timeline li::before {
    content: counter(timeline);
    position: absolute;
    left: 0;
    width: 40px;
    height: 40px;
    background-color: [YOUR-COLOR]; /* From Figma */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Pattern 3: Simple Styled List

ul {
    list-style-type: square;     /* Or circle, disc, etc. */
    padding-left: 2rem;
}

li {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-left: 3px solid [YOUR-ACCENT-COLOR];
}

Match the list style you designed in Figma!

Design-to-Code Checklist

Before you start coding, check off these items:

From Your Figma File, You Need:

Typography:
- [ ] Heading font name
- [ ] Body font name
- [ ] h1 size (px)
- [ ] h2 size (px)
- [ ] h3 size (px)
- [ ] Body text size (px)
- [ ] Line heights
Colors (hex codes):
- [ ] Background color
- [ ] Main text color
- [ ] Heading color
- [ ] Accent color
- [ ] Link color
Content:
- [ ] All text content
- [ ] Image(s) exported from Figma
- [ ] Image captions
Spacing:
- [ ] Space between sections
- [ ] Padding inside containers
- [ ] Margins around elements
List Styling:
- [ ] What type of list? (bullets, numbers, custom)
- [ ] What colors/styling did you use?