Yesterday, I completed the Travel Agency page lab from freeCodeCamp's Responsive Web Design curriculum. Like other tasks, you're given an example how the finished product should look, along with a series of user stories to fulfill.
I started by constructing HTML Boilerplate before moving onto the body of the webpage. Whereas the example was about Italy, I tapped into my love of the West Country, otherwise known as the South-West of England.
Like many of us when starting out, if any user stories didn't pass, it was usually down to a small typing error rather than anything else. My own example is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Travel Agency Page</title>
<meta name="description" content="Travel destinations in the South-West of England">
</head>
<body>
<h1>Visit the West Country</h2>
<p>Explore the hidden gems of South-West England</p>
<h2>Packages</h2>
<p>We offer a wide range of travel opportunities</p>
<ul>
<li><a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
<li><a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</a></li>
</ul>
<h2>Top Itineraries</h2>
<figure>
<a href="https://www.freecodecamp.org/learn" target="_blank"><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" target="_blank"><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>
<a href="https://www.freecodecamp.org/learn" target="_blank"><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>
</body>
</html>
After completing the lesson, there was more theory - this time covering HTML audio and video elements. It provided an overview of embedding audio and video into a webpage, including controls, and also touched on the importance of supporting multiple formats for browser compatibility.
The inclusion of this exercise was well placed, as the next workshop and lab have me building an HTML video player and an HTML audio and video player. More on those lessons next time. Until then, do keep coding everyone!
Top comments (0)