Lab
Build a Recipe Page
Sections, images, and lists
A mini chocolate chip cookie recipe with descriptive image text, ingredients, and ordered baking steps.
HTML archive
The foundations behind every page
This archive collects each HTML project from the Responsive Web Design learning path, from basic content structure to accessible forms, tables, and the certification survey.
Back to overviewChapter 01
Basic HTML
13 projects · 6 labs · 7 workshops
Lab
Build a Travel Agency Page
Links, figures, and captions
An Italy travel page with package links and featured itineraries grouped with images and captions.
Lab
Build a Video Compilation Page
Sections and embedded video
A front-end development overview with separate HTML, CSS, and JavaScript video sections.
Lab
Build an HTML Audio and Video Player
Native media controls
A media page that pairs a video about the map method with a looping audio track.
Preview unavailable
Lab
Debug a Pet Adoption Page
Image and link attributes
A corrected pet adoption page with a descriptive cat image and working cat and dog navigation links.
Preview unavailable
Lab
Debug Camperbot's Profile Page
Valid markup and heading hierarchy
A corrected Camperbot profile using a logical sequence of headings and descriptive paragraphs.
Workshop
Bookstore Page
Content cards and buttons
A bookstore landing page with two book cards and shopping-related action buttons.
Workshop
Build a Heart Icon
Inline SVG and paths
A red heart icon drawn directly in HTML with an SVG viewport and custom path data.
Workshop
Build a Video Display Using iframe
Embedded media
A page with a titled YouTube iframe, media permissions, and fullscreen support.
Preview unavailable
Workshop
Cat Photo App
Links, figures, and lists
A structured cat photo page with linked images, captions, and lists of things cats love and hate.
Preview unavailable
Workshop
Build a Curriculum Outline
Heading hierarchy
A concise full-stack curriculum outline introducing the roles of HTML, CSS, and JavaScript.
Workshop
HTML Music Player
Audio elements and controls
A three-track music player using native audio controls and looping playback.
Workshop
HTML Video Player
Video sources and controls
A native video player with a poster image and four source formats for broader compatibility.
Chapter 02
Semantic HTML
4 projects · 1 lab · 3 workshops
Lab
Event Hub
Header, navigation, and articles
An event listing with internal navigation, upcoming events, past events, and descriptive images.
Workshop
Blog Page
Articles, figures, and contact links
A cat blog with internal navigation, a captioned image, three posts, and phone and email links.
Workshop
Major Browsers List
Definition lists
A five-item definition list pairing major web browsers with concise descriptions.
Workshop
Quincy's Tips for Getting a Developer Job
Quotations and citations
An article-style page that presents developer job advice with inline quotes, block quotes, and citations.
Chapter 03
Forms and Tables
3 projects · 1 lab · 2 workshops
Lab
Book Catalog Table
Table structure and summary
A five-book catalog organized with table headings, body rows, and a footer total.
Workshop
Final Exams Table
Captions and table sections
A calculus final grades table with a caption, five student rows, and an average in its footer.
Workshop
Hotel Feedback Form
Labels, fieldsets, and validation
A guest feedback form with grouped inputs, rating selects, an optional comments field, and submission.
Chapter 04
Accessibility
7 projects · 4 labs · 3 workshops
Lab
Checkout Page
Required fields and helper text
A checkout page with an accessible payment form, visual required markers, and linked card-number guidance.
Lab
Debug a Donation Form
Accessible labels and input types
A corrected donation form with associated labels, required fields, and appropriate email and number inputs.
Lab
Movie Review Page
Descriptive images and visual ratings
A Rise Beyond review with a descriptive poster, an accessible visual star rating, and a cast list.
Lab
Multimedia Player
Media labels, subtitles, and transcript
A page with labeled audio and video controls, English subtitles, and a written map-method transcript.
Workshop
Accessible Audio Controller
ARIA-labelled range input
An audio control interface with play and mute buttons plus a volume slider named by visible text.
Workshop
Debug Coding Journey Blog Page
Semantic articles and anchor navigation
A Camperbot blog with navigation to three articles, a clear heading hierarchy, and a contact footer.
Workshop
Tech Conference Schedule
Table header scope
A schedule table organized by track and time with scoped column and row headers plus shared break rows.
Milestone
HTML Certification Project
1 project · certification project
Certification Project
Survey Form
Labels, validation, and form controls
A freeCodeCamp survey form that collects user details, role and recommendation feedback, feature preferences, and comments.