learntheweb

Lesson Content

Building a Travel Guide

Introduction

Let’s test our HTML skills by building a simple travel guide. In this project, you will build a travel guide for a city of your choice using the HTML that you have learned throughout this course! Good luck and have fun!

Overview

By the end of this project, you should be:
    • Confidently use HTML elements and syntax to build a website
    • Utilize links to connect pages within your website
    • Implement images and headings to enhance your web design
    • Understand how to use lists to organize content

Creating your Travel Guide

Project Description:

  • For this recipe book project, you will create a website that showcases different attractions for a city of your choice. The website will have multiple pages: a homepage and an attraction page for each attraction.

Requirements:

Homepage:
    • The homepage will serve as an introduction to your website.
    • The homepage should have a title that says “Travel Guide”.
    • The homepage should have an image that represents your website.
    • The homepage should have a short description that explains what your website is all about.
    • The homepage should have three buttons or links that take the user to each attraction you are including
Attraction Pages:
  • Each one of your attraction pages should contain these following items:
    • A title that says the name of the attraction
    • An image that represents the attraction
    • A brief description of the attraction
    • A list of fun facts about the attraction
    • A link to another website about the same attraction
    • A link to the homepage
Additional Info:
    • Your homepage should have 3 links/buttons that take you to each attraction page. Remember what we learned about absolute and relative linking in this lesson when you are setting up your links!

    • To make things easier, you can use websites like Tripadvisor or Lonely Planet to find information about different cities and attractions. You can incorporate that info onto your website!
    • Try to incorporate everything that you have learned in the last few lessons. Make sure to add plenty of links, headers, images, lists, buttons, etc. This should be your capstone project. Something you can show others to display your knowledge of HTML!
    • If you need any help with your project, you can join our discord server where we will be able to help you incase something is not working like how you wanted. 
Tips:
    • When selecting images for your website, make sure they are relevant to the attraction and appropriate for all audiences.
    • Use headings to organize your content. For example, use h1 for the title of each page, and h2 for subheadings such as “Description” and “Fun Facts”.
    • Use links to connect your pages together. For example, use the anchor tag (a) to create links to other pages on your website.
    • Use images to make your website visually appealing. For example, use the img tag to insert images of your recipes.
    • Validate your HTML code using a validator such as this HTML checker to ensure that your code is error-free and follows best practices.

Find an issue/typo/error with our content? Please report it here