HTML Project: 3

Introduction

This responsive web page contains a showcase of multi-column layouts created with CSS flexbox and includes background colours with transparent images.

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

Learning Goals

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

• Create layouts with CSS flexbox that display as two columns on desktop screens and as a single column on mobiles.
• Add a gutter between columns.
• Re-order how content within a column is played on mobile screens.
• Add background colours and transparent images.

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:  smoothies.zip
2. If a sub-folder named portfolio does not already exist inside your websites folder, create it now.
3. Uncompress the ZIP file into your websites/portfolio sub-folder as shown below.

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

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

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\smoothies sub-folder. There you can see the index.html web page for this project.
2. If your default web browser is Firefox Developer Edition or Google Chrome, double-click the index.html file to open it. If not, right-click the index.html file and, from the pop-up menu displayed, choose Open with and then select either Firefox Developer Edition or Google Chrome to open the file.

In your web browser, the index.html web page will look like that below.

Under the hero block at the top of the page, the basic structure of the web page is a follows.

• There are five 'parent' flexbox containers. All have the same class of flexbox-container.
• The first flexbox container has just one 'child' item inside it. The class name of this single child is item-1.
• The other four flexbox containers each have two 'child' items inside them. All these children have the same class name of item-2.

To help you distinguish between the flexbox parent 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.

Before and after each of the five 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.

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.

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

Add background colours to the parent flexbox containers

In the CSS file, you can see styles have been created for four background colour values.

Let's apply these to the parent flexbox containers in your web page for each of the four smoothie drinks.

1. In the index.html file, add the following four classes, one after the other, to the four parent flexbox containers that have two child DIVs (item-2) inside them.

Save the index.html 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.

Add a gutter to the child items in the two-column layout

On desktop screens, the two-column layout for each of the four smoothies has no gutter spacing between the left and right child items. Let's change this.

1. In the style.css stylesheet, within the desktop media query for the .item-2 class selector, reduce the width from 50% to 47% as shown below. The remaining space of 6% will be added between the two child items, so creating a gutter between the left and right columns.   This applies only to desktop screens (768px or wider) and has no effect on mobile screens (767px or narrower).

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

Alternate the flexbox items horizontally on desktops

Follow these steps to add some variety to how the two-column layouts for each of the four smoothies are displayed on desktop screens.

1. In the index.html file, within the second two-column flexbox container (for 'Apple' smoothies), change the order of the two child items as shown below. On desktop screens, this will position the apple image in the left column, and the text in the right column.
2. Next, within the fourth two-column flexbox container (for 'Lemon' smoothies), change the order of the two child items as shown below. On desktop screens, this will position the lemon image in the left column, and the text in the right column.

Save the index.html file, and, in your web browser, view the effect on your web page.

Re-order the flexbox items vertically on mobiles

Your next step is, for mobile screens, to apply a consistent order to the content within the two-item containers for each of the four smoothies.

If you display your web page on a mobile screen, you can see that:

• For the first and third smoothies, the text is displayed first, and then the image.
• For the second and fourth smoothies, the image is displayed first, and then the text.

Let's change the first and third smoothie items, so that for all four smoothies, the image is always displayed above the text.

1. In the style.css stylesheet, for the .item-2 selector, go to the media query for mobiles and press ENTER a few times to add some blank lines.
2. Add the following comment and then the four styles to reorder the .item-2 columns.

Save the style.css file, and, with your web browser reset for mobile screens, view the effect on your web page.

Apply further style changes

To complete this project, make these style changes in the part of the CSS file under the following comment.

1. In the style.css file, for the p paragraph selector within the .item-1 column, add the following two lines to centre the text and change its colour.
2. For the h2 heading selector within .item-2 element, add a new line to change its colour.
3. For the blueberry smoothie, the dark text is difficult to read against the coloured background.   Add new selectors for h2 and p within the .item-2 column for when the heading and paragraph are inside a parent flexbox container that has both .container-flexbox and .bg-blueberry classes assigned to it. Then add styles to change the heading and paragraph colour to white. Place a comment line at the top of your changes.

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

Update the meta tags

In the <head> of your index.html web page, within the <title> and <author> meta tags, you can see the name 'Mary Smith.'

Replace this with your own name, and save the index.html file.

Update the Google Analytics ID

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

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 index.html file.

Update the privacy pop-up code and message

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

1. Within the <head> at the top of your index.html file, you can see a link to the stylesheet for the privacy pop-up message.
2. At the bottom of your web page, just before the closing </body> tag, you can see the JavaScript code for the privacy pop-up message. Near the bottom of the JavaScript code, you can see the web address of the privacy page. Change this to the web address of your privacy page.
3. When finished, save the index.html file.

Remove the visual layout guides

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

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

When finished, save your index.html and style.css files.

Validate your HTML file

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.
3. Copy and paste your HTML file into the box named Enter the Markup to validate.
4. Click the Check button.
5. If you see any errors, return to your index.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.
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.
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 smoothies of your websites/portfolio folder.

So you will need to upload this smoothies 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.
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  
3. The next GitHub screen displayed should look as follows. Click on the portfolio folder.
4. On the next screen displayed, click the Upload files button.
5. In File/Windows Explorer on your computer, display your portfolio folder and then drag-and-drop the smoothies folder to the GitHub tab in your web browser.
6. After uploading the smoothies 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.
7. The portfolio folder of your website repo on GitHub should now contain a sub-folder named smoothies. Click on this folder.
8. The smoothies folder should contain both the index.html file and the assets sub-folder.
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/smoothies/index.html

or, simply:

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

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

Return to Contents.