Travel Agency Website

Contents  >

HTML Project 5: Menus

Introduction

In this task you will use template content to add desktop and mobile menus to the 'Travel Agency' project you created earlier and to which you then added a contact form page and a footer.

You can display a finished version of the project web pages on GitHub by clicking the image below.

Web Design Project: Travel Agency 2n2l.com Brendan Munnelly

Learning Goals

At the end of this Tutorial you will be able to:

Contents

Introduction

Download the website logo image for menus

Work with your two HTML files

Copy-and-paste the menus HTML and JavaScript

Work with your two CSS files

Copy-and-paste the menus CSS

Update the menu logo and hyperlink

Update the menu option hyperlinks

Update the mobile menu content and hyperlinks

Update the hero block

Update the menu colours

Add the JavaScript menu style-swapping effect

Update the other three web pages

Validate your HTML files

Validate your CSS file

Upload your project to GitHub

Work with your two HTML files

You will begin by working with two HTML files:

  1. In Visual Studio Code, from your websites\templates folder, open the following HTML file:   menus-template.html
  2. From your websites\portfolio\travel folder, open the web page named index.html. fa-icons-copy

If you have any other files open in Visual Studio Code, you may wish to close them.

fa-icons-copy

This will help you to focus only on the two HTML files you will be working with.

Copy-and-paste the menus HTML and JavaScript

Your next step is to copy content from the menus template file into your index.html web page.

  1. In the menus-template.html file, select and copy the menus HTML section. fa-icons-copy
  2. In your index.html web page, go to near the top of the web page, to just after the start of the <body> tag. fa-icons-copy
  3. Press the ENTER key a few times to open up some new lines of blank space.
  4. Paste the copied menus HTML.
  5. In the menus-template.html file, select and copy the JavaScript code for the menus. fa-icons-copy
  6. In your index.html web page, scroll down to near the end of the web page, to just before the JavaScript for Cookie Consent Popup Message. fa-icons-copy
  7. Press the ENTER key a few times to open up some new lines of blank space.
  8. Paste the copied JavaScript code for the menus.
  9. When finished, save your index.html web page.

You can now close the menus-template.html file.

Work with your two CSS files

Your next task is to work with two CSS files:

  1. In Visual Studio Code, from your websites\templates folder, open the following CSS file:   menus-template.css
  2. From your websites\portfolio\travel\assets\css folder, open your stylesheet named style.css. fa-icons-copy

If you have any other files open in Visual Studio, you may wish to close them.

fa-icons-copy

This will help you to focus only on the two CSS files you will be working with.

Copy-and-paste the menus CSS

Your next step is to copy content from the template menus CSS file into your style.css web page.

  1. In the menus-template.css file, select and copy the menus section. fa-icons-copy
  2. In your style.css file, click just under the /* BROWSER RESETS */ section of the stylesheet. fa-icons-copy
  3. Press the ENTER key a few times to open up some new lines of blank space.
  4. Paste the copied CSS for the menus.
  5. When finished, save your style.css stylesheet.

You can now close the menus-template.css file.

Update the mobile menu content and hyperlinks

In the lower part of the mobile menu, under the <hr> horizontal rule line, you can include some text about yourself, an image and some hyperlinks.

  1. If you want to include a profile or other image, the image should be located in your websites/assets/img folder.
  2. 
    <img src="../../assets/img/profile-pic.jpg" alt="Mary Smith web designer, Dublin">  
    
  3. If you wish to include an email address or social media hyperlinks, replace the template-provided details with your own. Delete any details in the template you do not want to include.
  4. If you want to link your website's Home page, the link should be as follows.
    
    <a href="../../index.html">Home</a>
    
  5. If you want to link your website's Portfolio page, the link should be as follows.
    
    <a href="../index.html">Portfolio</a>
    
  6. And if you want to link your website's Contact Form page, the link should be as follows.
    
    <a href="../../contact/index.html">Contact</a>
    
  7. Save your index.html web page and view it in your web browser.

Update the hero block

You need to make a few changes to the hero block at the top of your web page.

  1. In the style.css file, edit the height of the container-hero class for mobile screens as shown below. Also, add some margin spacing above the main <h1> heading for desktops and mobiles. fa-icons-copy
  2. Save the style.css file and view the web page in your web browser.

Update the menu colours

In the menus-template.html file you copied-and-pasted into your index.html web page, the desktop container DIV of container-menu-desktop and the two container DIVS for the mobile menu of container-menu-bar-mobile and flyout-menu are assigned a class of menu-light.

In the menus-template.css file you copied-and-pasted into your style.css stylesheet, this menu-light class sets text and hyperlinks red against a white background. You can see just a few examples of these colour properties and values below.

fa-icons-copy

Let's update this red colour to match the orange colour of #ff5000 used in the web page.

  1. In the style.css stylesheet, scroll to the top of the file.
  2. On the Visual Studio Code menu, click the Edit menu and then click the Replace command.
  3. A new search-and-replace dialog box appears at the top-right of the Visual Studio Code screen. fa-icons-copy
  4. In the first field, enter red.
  5. In the second, enter #ff5000.
  6. Click the left icon for Replace. Do not click the right icon for Replace All.
  7. One by one, replace every occurrence of the colour red with #ff5000 in your stylesheet.   (If you choose the Replace All option, Visual Studio Code will replace the letters 'red' inside words such as 'centered' that may be written in comments.)
  8. Save the style.css file and view the web page in your web browser.

Add the JavaScript menu style-swapping effect

Your final step is to use some JavaScript code in the menus-template.html file you copied-and-pasted into your index.html web page to create the following effect:

To achieve this effect, follow these steps.

  1. In the style.css stylesheet, for both the container-menu-desktop and container-menu-bar-mobile containers, replace the class of menu-light with the menu-transparent class as shown below. fa-icons-copy
  2. In the index.html web page, scroll down to near the bottom of the file. Under the comment of "// Code for menus with transparent background" is a line of JavaScript that begins with the // comment symbol.   In JavaScript code, the symbol "//" has the same effect as <!-- comment --> in HTML and /* comment */ in CSS.
  3. Remove the "//" from the beginning of this line as shown below. fa-icons-copy
  4. Save the index.html file and view the web page in your web browser.
  5. To make the menu text links easier to read against the transparent background on desktop screens, darken the overlay at the top of the hero image.   In the style.css file, for the container-hero class, increase the upper value of the overlay opacity gradient of the background-image property to 0.6 fa-icons-copy
  6. One final change: to make the hamburger icon easier-to-read against the background image, change its colour from red to white as shown below. fa-icons-copy
  7. Save the style.css file and view the web page in your web browser.

When the user scrolls down the web page:

When the user scrolls back up the web page:

That's it. You have now completed your 'Smoothies' project.

Update the other three web pages

You need to apply the menu-related updates you have made to your index.html web page to the three other web pages in your 'Travel' project. Follow these steps.

  1. Open your destinations.html, about-us.html and contact-us.html web pages.
  2. Open your index.html web page, and copy all the menu-related content from the top of the page.
  3. Paste the menu-related content into the top of your destinations.html, about-us.html and contact-us.html pages, to just after the opening <body> tag.
  4. Scroll to the bottom of your index.html web page, and copy all the JavaScript code for menus.
  5. For your destinations.html, about-us.html and contact-us.html web pages, scroll to near the end of the web pages, to just before the JavaScript for Cookie Consent Popup Message, and then paste the JavaScript code.
  6. For your destinations.html, about-us.html and contact-us.html web pages, change the link destination for the website logo from # (which simply brings the user to the top of the web page) to index.html (which brings the user to the home page of the four-page 'Travel' website). fa-icons-copy
  7. Save all your web pages and view them in your web browser.

That's it. You have now completed your 'Travel' project.

Validate your HTML files

To check your HTML is correct, use the official W3C Markup Validation Service. Follow these steps.

  1. Go to this web page: https://validator.w3.org.
  2. Click the Validate by Direct Input tab. validate-html
  3. One after the other, copy and paste each of your four HTML files into the box named Enter the Markup to validate.
  4. Click the Check button.
  5. If you see any errors, return to your HTML file, fix the errors, save the file, and copy the entire file again.  In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Validate your CSS file

To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.

  1. Go to this web page: https://jigsaw.w3.org/css-validator.
  2. Click the By direct input tab. Project Hero Blocks
  3. Copy and paste your CSS file into the box named Enter the CSS you would like validated.
  4. Click the Check button.
  5. If you see any errors (other than those related to the fluid typographic equation or as shown below or to the 'overscroll-behavior' property), return to your style.css file in your text editor, fix the errors, save the file, and copy the entire file again. ypo-css-errors
  6. In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Upload your project to GitHub

The final step is to upload your project to GitHub.

All the files for this project are in a sub-folder named travel of your websites/portfolio folder.

So you will need to upload this travel sub-folder, which contains both files and other sub-folders, to your account on GitHub.

  1. Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now. github-signin
  2. On your GitHub home page, click the name of the repository ('repo') that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io   github-repo
  3. The next GitHub screen displayed should look as follows. Click on the portfolio folder. GitHub Upload
  4. On the next screen displayed, click the Upload files button. github-upload-portfolio
  5. In File/Windows Explorer on your computer, display your portfolio folder and then drag-and-drop the travel folder to the GitHub tab in your web browser. github-upload-drag-drop
  6. After uploading the travel folder, scroll down to the bottom of the GitHub screen, enter a short message in the Commit changes box, click the Commit changes button, and wait for the upload to complete. github-upload-progress

Your 'Travel Agency' web project with desktop and mobile menus is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/portfolio/travel/index.html

or, simply:

https://username.github.io/portfolio/travel

It may take a few minutes for your uploaded files to appear on GitHub.



Return to Contents.