Travel Agency Website

Contents  >

HTML Project: 5

Introduction

This responsive three-page website contains a showcase of multi-column layouts created with CSS flexbox.

You can display a finished version of this project 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

Project folder and files

Start your text editor

Start your web browser

Add padding to the parent flexbox containers

Add a background colour to the parent flexbox containers

Style the single-column layouts

Style the three-column layouts

Style the four-column layouts

Style the customer testimonials section

Update the meta tags

Update the Google Analytics ID

Update the privacy pop-up code and message

Remove the visual layout guides

Adjust vertical spacing on desktop screens

Validate your HTML files

Validate your CSS file

Upload your project to GitHub

Project folders and files

Your first step is to download the files you need for this project.

  1. Download the following compressed file to your computer:  travel.zip
  2. If a sub-folder named portfolio does not already exist inside your websites folder, create it now. How to set up a website
  3. Uncompress the ZIP file into your websites/portfolio sub-folder as shown below. How to set up a website

This will create a sub-folder named travel inside your portfolio folder.

How to set up a website

The folders, sub-folders and files for this 'Travel' project will be as shown below.

How to set up a website

Start your text editor

Now you can begin to work with the files you have downloaded.

  1. In Visual Studio Code or other text editor, open the following downloaded files. The first three are web pages; the fourth is a stylesheet file:
    • index.html, destinations.html and about-us.html: You will find these in the main folder of your travel folder.
    • style.css: You will find this in the assets/css/ sub-folder of the travel folder.
How to set up a website

You can close any other files you may have open in your text editor.

Start your web browser

As you work with the HTML and CSS files, you will want to be able to display in your web browser the results of the changes you will be making.

  1. In File/Windows Explorer, go to your C:\\websites\portfolio\travel sub-folder. There you can see the index.html, destinations.html and about-us.html web pages for this project.
  2. If your default web browser is Firefox Developer Edition or Google Chrome, double-click these three files to open them. How to set up a website If not, right-click the files and, from the pop-up menu displayed, choose Open with and then select either Firefox Developer Edition or Google Chrome to open them. How to set up a website

In your web browser, the index.html, destinations.html and about-us.html web pages will look as shown below. Note that all three web pages have a light grey background.

software-big-screen

Under the 'hero' section (container-hero-block), the basic structure of the three web pages is as follows.

wireframe

To help you distinguish between the 'parent' flexbox DIVs and the 'child' DIVs, the following two styles are added at the end of the style.css stylesheet. You can remove these styles at the end of the project.

layout-parent-child-borders

Before and after each of the 'parent' flexbox containers is a set of three 'blank' or 'spacer' paragraphs. These are to help you see where one container ends and the next container starts.

layout-blank-lines

As with the coloured borders, you can remove these blank paragraphs at the end of the project.

Add padding to the parent flexbox containers

Follow these steps to add spacing around the four inside edges (top, right, bottom and left) of the parent flexbox containers.

  1. In the style.css file, add the padding values below for the .flexbox-container selector. vscode-container-padding

Save the style.css file, and, in your web browser, view the effect on your web page.

Add a background colour to the parent flexbox containers

In the CSS file, you can see a style has been created for an orange background colour.

vscode-bg-colours

Let's apply this to some of the parent flexbox containers in your web pages.

  1. In the index.html web page, add the class name of bg-orange to the parent container with the child .item-1 that has inside it the text "Special Offers". vscode-bg-colours Also, add the bg-orange class name to the parent container with the three child items of .item-3 vscode-bg-colours
  2. In the destinations.html web page, add the class name of bg-orange to two parent containers with the child .item-1. The first container to add the class to contains the text "Europe" and the second, "Australia." vscode-bg-colours Also, add the bg-orange class name to the two parent containers with the child items of .item-4-2 for the locations of "Europe" and "Australia". vscode-bg-colours
  3. Save the index.html and destinations.html files, and, in your web browser, view the effect on your web page.
  4. For those parent containers with an orange background, the headings and paragraph text is difficult to read. Add the following new styles to your stylesheet to change the content colour to white where the background colour is orange. vscode-bg-colours

Save the style.css file, and, in your web browser, view the effect on your web page.

You have now finished working with the parent flexbox containers. All your remaining changes will be to the child items inside the parent containers.

Style the single-column layouts

On both desktop and mobile screens, parent containers with an item-1 child will always display as a single column. Let's add some padding to these child items.

  1. In your style.css stylesheet, add the following padding values for the .item-1 selector within all parent containers. vscode-gutter

Save the style.css file, and, in your web browser, view the effect on your web page.

Style the three-column layouts

On desktop screens, the three-column layout has no gutter spacing between the child items. Let's change this.

  1. In the style.css stylesheet, within the desktop media query for the .item-3 class selector, reduce the width from 33.33% to 30% as shown below. vscode-gutter The remaining space of 10% will be added between the child items.   This applies only to desktop screens (768px or wider) and has no effect on mobile screens (767px or narrower).
  2. Add the following margin values for the .item-3 columns. vscode-gutter
  3. Create the following new styles that will apply to the .item-3 child items on both desktop and mobile screens. These rules set the background colour to white and add a shaded border with round edges. vscode-gutter

Save the style.css file, and, in your web browser, view the effect on your web page.

Style the four-column layouts

The four-column on desktops and two-column on mobiles layout (.item-4-2) has no gutter spacing between the child items. Let's change this.

  1. In the style.css stylesheet, within the desktop media query for the .item-4-2 class selector, reduce the width from 25% to 22% as shown below. And within the mobile media query for the .item-4-2 class selector, reduce the width from 50% to 47%.   Also, add the following margin values. vscode-gutter

Save the style.css file, and, in your web browser, view the effect on your web page.

Style the customer testimonials section

On the about-us.html web page is a section named "Some customer testimonials". The parent flexbox containers have a special class named happy-users. Let's update the related styles.

  1. In the style.css stylesheet:
    • Add a new style to center-align the text and images within the .item-3-2 child items.
    • Add some gutter spacing between the .item-3-2 child columns and margin spacing under them. vscode-gutter
    • Lastly, add the following style properties and values for the images within the .item-3-2 child columns. These will display the images as circles, and add a coloured border around them. vscode-gutter

Save the style.css file, and, in your web browser, view the effect on your web page.

Update the meta tags

In the <head> of the index.html, destinations.html and about-us.html web pages, within the <title> and <author> meta tags, you can see the name 'Mary Smith.'

Replace this with your own name, and save the three files.

Project Contact

Update the Google Analytics ID

Near the top of the three HTML files, just before the closing </head> tag, you can see a sample Google Analytics Tracking Code.

Project Privacy

Each Google Tracking Code has a unique ID in its first and last line. Replace the sample Google Tracking ID with your own Google Tracking ID. The instructions for viewing your website’s unique Google Tracking ID are here.

When finished, save the three HTML files.

Update the privacy pop-up code and message

You need to edit the ‘pop-up‘ privacy code and message in your three web pages.

  1. Within the <head> at the top of your HTML files, you can see a link to the stylesheet for the privacy pop-up message. You do not need to change this. vscode-privacy-head
  2. At the bottom of your web pages, just before the closing </body> tag, you can see the JavaScript code for the privacy pop-up message. vscode-privacy-body Near the end of the lines of the JavaScript code, you can see the web address of the privacy page. For all three web pages, change the ibat-web-dev.github.io username to your username on GitHub.   You will create the actual privacy.html web page in a later project.
  3. When finished, save your three HTML files.

The Privacy Code and Message

You can find the instructions for generating the JavaScript code here.

And here is a sample template file with the privacy message and code.

The web page looks 'empty'. Right-click anywhere on the page and choose View page source (Chrome or Mozilla Firefox).

Remove the visual layout guides

You can now delete the visual layout aids from your web pages and stylesheet.

  1. Within your web pages, delete the sets of three blank paragraphs before and after the parent flexbox containers. Project Privacy
  2. At the bottom of your style.css file, delete the style for coloured borders around the parent containers and child items. Project Privacy

When finished, save your index.html, destinations.html, about-us.html and style.css files.

Adjust vertical spacing on desktop screens

After removing the coloured lines and blank 'spacer' paragraphs, scroll down the three web pages in your web browser to check the spacing between the various elements looks correct.

On desktop screens, you can see that the vertical spacing is too large between certain elements.

Let's fix these by:

  1. In your style.css file, add the following two new styles within the media query for desktops. vscode-blueberry-bg-color
  2. In the index.html file, add the no-padding-bottom style to the container-flexbox section that begins with the heading 'Special Offers'. vscode-blueberry-bg-color
  3. In the destinations.html file, add the no-padding-bottom style to the three container-flexbox sections that contain the headings of 'Europe', 'America' and 'Australia'. vscode-blueberry-bg-color
  4. In the about-us.html file, add the no-padding-bottom style to the container-flexbox section that contains the heading of 'Some customer testimonials'. vscode-blueberry-bg-color Also on the same page, add the no-padding-top style to the container-flexbox section that contains the six images of happy customers. vscode-blueberry-bg-color

When finished, save your style.css, index.html, destination.html and about-us.html files.

You can now see that the vertical spacing on desktop screens looks much better.

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. Powerpoint Project
  3. One after the other, copy and paste each of your three 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 files, 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, as shown below), return to your style.css file in your text editor, fix the errors, save the file, and copy the entire file again. Tutorial RWD: Media Queries
  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
  7. The portfolio folder of your website repo on GitHub should now contain a folder named travel. Click on this folder. github-uploaded-projec
  8. The travel folder should contain both the index.html file and the assets sub-folder. github-upload-portfolio-content
  9. Click on the assets sub-folder to view its contents. You should see that it contains the two sub-folders named css and img.
    • Within the assets sub-folder, click on the css sub-folder. Check that it contains the stylesheet file.
    • Within the assets sub-folder, click on the img sub-folder. Check that it contains all the image files.

Your web page 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.