Build a Travel Agency Page
Published: (January 12, 2026 at 04:00 AM EST)
2 min read
Source: Dev.to
Source: Dev.to
Project Overview
Yesterday I completed the Travel Agency page lab from freeCodeCamp’s Responsive Web Design curriculum. The lab provides an example of the finished product and a series of user stories to fulfill. I chose to showcase the West Country (South‑West England) instead of the Italy example used in the instructions.
HTML Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Travel Agency Page</title>
</head>
<body>
<h1>Visit the West Country</h1>
<p>Explore the hidden gems of South-West England</p>
<section id="packages">
<h2>Packages</h2>
<p>We offer a wide range of travel opportunities</p>
<ul>
<li><a href="https://www.freecodecamp.org/learn">Group Travels</a></li>
<li><a href="https://www.freecodecamp.org/learn">Private Tours</a></li>
</ul>
</section>
<section id="itineraries">
<h2>Top Itineraries</h2>
<figure>
<a href="https://www.freecodecamp.org/learn">
<img src="https://www.exeter-cathedral.org.uk/wp-content/uploads/2024/03/Cathedral0008-1-copy.jpg" alt="A view inside Exeter Cathedral">
</a>
<figcaption>Exeter Cathedral</figcaption>
</figure>
<figure>
<a href="https://www.freecodecamp.org/learn">
<img src="https://www.breakthroughtransformationtrust.org/wp-content/uploads/2022/11/PZ_Misc_14-04-21_AD_LR-32.jpg.webp" alt="Two Giraffes at Paignton Zoo">
</a>
<figcaption>Giraffes at Paignton Zoo</figcaption>
</figure>
<figure>
<a href="https://www.freecodecamp.org/learn">
<img src="https://eastdevonexcellence.co.uk/wp-content/uploads/2023/12/Pecorama2.jpg" alt="Miniature steam train and carriages at Pecorama">
</a>
<figcaption>Miniature Railway at Pecorama</figcaption>
</figure>
</section>
</body>
</html>Page Content Summary
- Main heading: “Visit the West Country”
- Intro paragraph: “Explore the hidden gems of South‑West England”
- Packages section: Lists “Group Travels” and “Private Tours” with links to freeCodeCamp.
- Top Itineraries: Shows three figures with images and captions for Exeter Cathedral, Giraffes at Paignton Zoo, and the miniature railway at Pecorama.
Audio and Video Theory
After the lab, the lesson covered HTML <audio> and <video> elements, explaining how to embed media with controls and the importance of providing multiple source formats for cross‑browser compatibility. This theory prepares you for upcoming workshops that involve building an HTML video player and a combined audio‑video player.
Keep coding, everyone!