freeCodeCamp - Build a Travel Agency Page Solution and Walkthrough

Are you ready to deepen your understanding of HTML by building a practical project? This guide walks you through creating a travel agency webpage, inspired by FreeCodeCamp's Full Stack Developer Curriculum. Whether you're new to coding or brushing up your skills, you'll learn key HTML concepts like document structure, headings, lists, images, and SEO-friendly meta tags through a clear, step-by-step process. Let's dive in and build a beautiful, functional travel site while gaining valuable insights into web development fundamentals.

Getting Started: Understanding the Project and User Stories

Before coding, it's essential to understand the project requirements. The travel agency page you'll build includes elements such as headings (<h1>, <h2>), paragraphs, unordered lists, images with captions, and links. The project is broken down into 13 user stories, each guiding you through a specific feature or HTML requirement that needs to be implemented sequentially. This linear approach ensures that you build the page methodically, making the development process easier to follow and test.

User stories checklist for the travel agency page project

Building the HTML Structure

User Story 1: Adding the Doctype Declaration

Every HTML document must begin with a doctype declaration. This tells the browser what version of HTML to expect. It's not an HTML tag but an instruction, and it looks like this:

<!DOCTYPE html>

Including this at the top of your document ensures proper rendering and compatibility.

User Story 2: The Root HTML Element with Language Attribute

Next, wrap your entire document content inside the <html> element and set the language attribute to English (lang="en"). This helps with accessibility and SEO. The <html> tag requires both opening and closing tags:

<html lang="en">
  
</html>

This forms the root element of your HTML page.

HTML root element with lang attribute set to 'en'

User Story 3: Setting Up the Head with Meta Charset and Title

The <head> section contains metadata about your webpage. Start by adding a <meta> tag to set the character encoding to UTF-8, which supports most characters and symbols:

<head>
  <meta charset="UTF-8">
  <title>Travel Agency Page</title>
</head>

The <title> tag sets the page title shown in the browser tab and search results.

Head section with meta charset and title tags

User Story 4: Adding a Meta Description for SEO

To improve search engine optimization (SEO) and how your page appears when shared on social media, include a meta description inside the <head>:

<meta name="description" content="Travel agency page">

This brief description gives browsers and social platforms context about your page.

Meta description tag added to the head for SEO

Creating Visible Content in the Body

User Story 5: Adding an H1 Heading for the Travel Destination

Inside the <body>, the first visible element is a main heading (<h1>) presenting the travel destination. For example:

<body>
  <h1>Discover Italy</h1>
</body>

The <h1> tag should be used only once per page to signify the primary topic.

H1 heading with text 'Discover Italy' inside the body

User Story 6: Adding a Paragraph Introducing Travel Opportunities

Below the main heading, add a paragraph (<p>) that briefly introduces the travel opportunities available:

<p>Explore the rich history, culture, and cuisine of Italy with our exclusive travel packages.</p>

Paragraph tag introducing travel opportunities under the H1 heading

User Story 7: Adding an H2 Heading for Packages

Next, add a secondary heading (<h2>) titled "Packages" to introduce the travel packages section:

<h2>Packages</h2>

Remember, heading tags go from h1 to h6, decreasing in size and importance.

User Story 8: Adding a Paragraph to Introduce the Packages

Below the "Packages" heading, include a paragraph giving a brief overview of the packages offered:

<p>We offer a variety of group and private tour packages tailored to your interests.</p>

Paragraph introducing travel packages under the H2 heading

User Story 9: Creating an Unordered List with Linked Items

Now, create an unordered list (<ul>) containing two list items (<li>): "Group Travels" and "Private Tours". Each item should be wrapped in an anchor tag (<a>) to make them clickable links:

<ul>
  <li><a href="#">Group Travels</a></li>
  <li><a href="#">Private Tours</a></li>
</ul>

Since no specific URLs were provided, placeholder links ("#") are used.

Unordered list with two anchor links for group travels and private tours

User Story 10: Adding Another H2 Heading for Top Itineraries

After the list, add another <h2> heading with the exact text "Top Itineraries" to introduce the featured travel itineraries section:

<h2>Top Itineraries</h2>

Adding Images with Captions and Links

User Stories 11, 12, and 13: Figure Elements with Images, Captions, and Anchor Tags

The final and most detailed part involves adding at least three <figure> elements. Each figure contains:

An image wrapped inside an anchor tag to make it clickable.
A caption describing the image using <figcaption>.

Here's how to structure one figure element:

<figure>
  <a href="https://example.com/rome" target="_blank">
    <img src="https://example.com/rome.jpg" alt="Rome in center Italy">
  </a>
  <figcaption>Rome in center Italy</figcaption>
</figure>

Key points to note:

The <img> tag is a void element and does not require a closing tag.
The alt attribute describes the image for screen readers and in case the image fails to load.
The anchor tag includes target="_blank" so the link opens in a new tab.

Repeat this pattern for the other two images, updating the src, alt, and caption text accordingly:

Image 2: Alps - "Nature and National Parks"
Image 3: Sea - "South Italy and the islands"

First figure element with image and caption

Wrapping Up and Final Checks

After implementing all user stories, run your unit tests to ensure everything works as expected. When all tests pass, congratulations — you have successfully built a travel agency page from scratch!

This project not only guides you through HTML basics but also introduces you to best practices like semantic HTML, accessibility with alt attributes, and SEO enhancements with meta tags.

Additional Resources to Boost Your Web Development Skills

To further enhance your coding journey, check out these helpful tutorials and guides:

These resources will help you build a solid foundation and expand your skills beyond HTML.

Final Thoughts

Building a travel agency page is an excellent way to practice HTML fundamentals while creating something tangible. By following a structured approach and understanding the purpose behind each tag, you not only complete the project but also deepen your grasp of web development essentials.

Remember, practice and curiosity are key to mastering coding. Keep experimenting, exploring documentation like W3Schools and MDN Web Docs, and don't hesitate to revisit concepts you find challenging.

Happy coding, and may your web development journey be as exciting as the destinations you showcase!

freeCodeCamp - Build a Travel Agency Page Solution and Walkthrough