Brussels | itp-2026-1 | Benjamin Vanderzeypen | Week 1 | 01 - Wireframe to Web Code

[nuttyproducer]

Learning Objectives

• Use semantic HTML tags to structure the webpage
• Create three articles, each including a title, summary, and a link
• Check a webpage against a wireframe layout
• Test web code using [Lighthouse] 100%
• Use version control by committing often and pushing regularly to GitHub

Acceptance Criteria

• Semantic HTML tags are used to structure the webpage.
• The page scores 100 for Accessibility in the Lighthouse audit.
• The page header includes a title and description.
• The articles section has three unique articles, each including a title, summary, and a link.
• The page footer is fixed to the bottom of the viewport.
• The webpage is styled using a linked .css file.
• The webpage is properly committed and pushed to a branch on GitHub.

Changelist

Summary:

This PR implements the wireframe assignment by building a responsive webpage that explains the purpose of a README file, a wireframe, and Git branching.

What’s included:

• Semantic HTML structure with , , , and
• Three article cards, each with a title, summary, image, and link
• Responsive CSS Grid layout matching the provided wireframe
• Custom color palette and accessible design
• Footer fixed to the bottom of the viewport
• All acceptance criteria met (including 100% Lighthouse accessibility score)

Testing:

• Manually tested in browser with Live server extension for layout and responsiveness
• Ran Lighthouse audit for accessibility (100%)

Questions

1. I see these CSS vars are something new for us. Will we use them from now on consistently? I love the way this improves CSS styling!