Contents >

Smoothies Project:
Menus

Introduction

In this task you will use template content to add desktop and mobile menus to the ‘Smoothies’ project you created earlier and to which you then added an email sign-up form and a footer

You can display a finished version of the project web page by clicking the image below.

Learning Goals

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

Copy selected HTML with text content and JavaScript code from a template file to a project web page.
Link a project web page to a renamed copy of a template stylesheet.
Edit the copied HTML, CSS and JavaScript files as required.

Introduction

Creating the hero block

Downloading the website logo image

Working with your two HTML files

Copying-and-pasting the menus HTML and JavaScript

Working with the template CSS file

Copying and renaming the template CSS file

Removing browser resets from the new menus CSS file

Updating the font-family for the menus

Linking your web page to the new menus CSS file

Updating the menu logo and hyperlink

Updating the menu option hyperlinks

Creating the hyperlink destinations

Offsetting the hyperlink destinations

Updating the mobile menu content and hyperlinks

Updating the menu colours

Adding the menu style-swapping effect

Darkening the upper part of the hero image overlay

Changing the colour of the hamburger icon

Uploading your project to GitHub

Creating the hero block

Your first step is the create a hero block for the ‘Smoothies’ project. Follow these steps.

Right-click the image below and, from the context menu displayed, choose Save Image As. Download the image file to your websites/portfolio/smoothies/assets/img sub-folder that holds the other image files for this project.
In Visual Studio Code, from your websites/portfolio/smoothies folder, open the web page named index.html.

Copy-and-paste the following to the top of the web page, just after the start of the opening <body> tag.

  <!-- Begin hero block -->
  <header class="container-hero">
    <h1>Smooth Smoothies</h1>
    <h2>Where flavour meets goodness</h2>
  </header>
<!-- End hero block -->

Next, open the style.css file from your websites/portfolio/smoothies/assets/css folder.

Copy-and-paste the following at the top of the stylesheet, just after the == WEB BROWSER RESETS == block.

  /* === STYLES FOR HERO CONTAINER AT TOP OF WEB PAGE === */

  /* ==== Hero block general properties ==== */
  .container-hero {
     display: flex;
     flex-direction: column;
     justify-content: center;
     background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url('../img/smoothie-hero-image.jpg');  
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
  }

  /* === Heading and sub-heading === */
  .container-hero h1, .container-hero h2 { 
      font-family: 'Neucha', sans-serif;
      text-align: center;
      color: #fff;
      text-shadow: 2px 2px #222;
  }

  .container-hero h1 {
      font-size: calc(58px + (132 - 58) * ((100vw - 320px)/(1600 - 320)));
      line-height: 1.1
  }

  .container-hero h2 {
      font-size: calc(26px + (64 - 26) * ((100vw - 320px)/(1600 - 320)));
  }

  /* Desktops - container height and h1 bottom margin */
  @media (min-width: 768px) { 
      .container-hero { height: 520px }
      .container-hero h1 { margin-bottom: 1% }
  }

  /* Mobiles - container height, text width and h1 bottom margin */
  @media (max-width: 767px) { 
      .container-hero { height: 360px }
      .container-hero h1 { margin-bottom: 5% }
  }

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

In your web browser, the ‘Smoothies’ web page should look as shown below.

Downloading the website logo image

Now you will download the image file for this project’s website logo.

Right-click the image below and, from the context menu displayed, choose Save Image As.
Download the image file to your websites/portfolio/smoothies/assets/img sub-folder.
If you want to include a profile image in your mobile flyout menu, download this square placeholder picture to your websites/portfolio/smoothies/assets/img sub-folder.

Your img sub-folder for this project will now look as shown below.

Working with your two HTML files

You will begin by working with two HTML files:

The template file you will copy from and
The web page you will copy to.

In VS Code, from your websites/templates folder, open the following HTML file: menus-template.html
From your websites/portfolio/smoothies folder, open the index.html web page.

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

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

Copying-and-pasting the menus HTML and JavaScript

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

In the menus-template.html file, select and copy the menus-related HTML blocks.
In your index.html web page, click just after the start of the opening <body> tag, and press the ENTER key a few times to open up some new lines of blank space.
Paste the copied HTML for the menus.
Switch back to the menus-template.html file, and select and copy the JavaScript code for the menus.
In your index.html web page, scroll down to near the end of the web page, to just before the closing </body> tag.
Press the ENTER key a few times to open up some new lines of blank space.
Paste the copied JavaScript code for the menus.
When finished, save your index.html web page.

You can close the menus-template.html file. You are now finished working with this template.

Working with the template CSS file

Your next set of tasks involves making a copy of the template stylesheet file, renaming it, and then linking the renamed copy to your index.html project web page. You will also make some changes to the copied and renamed stylesheet.

Copying and renaming the template CSS file

First, you will make a copy of the template stylesheet for menus.

In VS Code, from your websites/templates folder, open the following CSS file: menus-template.css
From the File menu, choose the Save As command.
Save the template stylesheet with the name menus.css in the following folder: websites/portfolio/smoothies/assets/css This is the same folder that holds the style.css file for your ‘Smoothies’ project.

You can close the menus-template.css stylesheet. You are now finished with this template CSS file.

Removing browser resets from the new menus CSS file

Now you will delete the web browser resets from your copied and renamed stylesheet.

In VS Code, display the new menus.css stylesheet.
Delete everything in the == WEB BROWSER RESETS == block.
Save the menus.css stylesheet.

Updating the font-family for the menus

In your project style.css stylesheet, at about line 51, you can see that the font-family for the entire web page is set to ‘Neucha’.

The decorative font is difficult to read at the small font sizes used for menu options. So let’s replace it for both desktop and mobile menus with the basic sans-serif font family instead.

Display the menus.css file.
Edit the following lines as shown below.
Save the menus.css file.

All text in both the desktop and mobile menus will now display in the sans-serif font.

Linking your web page to the new menus CSS file

Next, you will link the stylesheet you have just copied, renamed and updated to your project web page.

In VS Code, display your index.html web page.
Add a link to the new stylesheet in the <head> as shown below.
Save your index.html file.

Updating the menu logo and hyperlink

For both the desktop and mobile menus, you need to update the website logo and its surrounding hyperlink.

In your index.html web page, in the desktop menu block near the top of the web page, edit the logo image and hyperlink as follows.
```
<a href="#"><img src="assets/img/smoothies-logo.png" alt="website logo"></a>  
```
Scroll down a few lines to the mobile menu block and copy-and-paste the new logo and hyperlink from the desktop menu to here.
Save the index.html web page

In your web browser, the ‘Smoothies’ web page should look as shown below.

Updating the menu option hyperlinks

For both the desktop and mobile menus, you need to update the hyperlinks for the various menu options.

In your index.html web page, go to near the top of the web page, to just after the opening <body> tag.

In the desktop menu block, replace the template menu text and hyperlinks as follows.

<ul>
  <li><a href="#watermelon">Watermelon</a></li>
  <li><a href="#apple">Apple</a></li>
  <li><a href="#blueberry">Blueberry</a></li>
  <li><a href="#lemon">Lemon</a></li>
  <li><a href="#email-signup-form" class="btn-cta"><i class="fas fa-envelope"></i> Newsletter</a></li>  
</ul>

Scroll down a few lines to the mobile menu block and copy-and-paste the new menu options from the desktop menu to here.
Save the index.html web page and view the result in your web browser for both desktop and mobile screen sizes.

Creating the hyperlink destinations

Now that you have created hyperlinks in the desktop and mobile menus, you need to create the destinations in the web page that these links will bring the user to.

In your index.html web page, for each of the four smoothies, add the following ID value to match the menu hyperlinks. The Email Sign-up Form already has an ID named "email-signup-form".
Save the index.html web page,

View the result in your web browser for both desktop and mobile screen sizes. Verify that the menu options all work correctly when clicked/tapped.

Offsetting the hyperlink destinations

Because both the desktop/laptop and mobile parent containers are ‘sticky’, the menus remain fixed at the top of the screen as the user scrolls down through the web page.

This also means that the top 72px of whatever web page element immediately follows the parent menu containers is ‘hidden’ behind them.

When you click or tap a menu option, you can see that the top of the destination heading is partly ‘hidden’ behind the menubar.

To fix this issue, follow these steps:

In the style.css file, add the scroll-padding-top property to the html selector for the entire web page as shown below. Give this new property a value of 72px, which is the same height as the height of your desktop and mobile menu containers.
When finished, save your style.css file and test your menus for both desktop and mobile screens.

You can see that the menu containers no longer hide any of the web page content.

Updating 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.

If you wish to include a profile picture, the link to the placeholder image is as follows.
```
<img src="assets/img/profile-pic.jpg" alt="Mary Smith, Web Designer"> 
```
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.
If you want to link your website's Home page, the link should be as follows.
```
<a href="../../index.html">Home</a>
```
If you want to link your website's Portfolio page, the link should be as follows.
```
<a href="../index.html">Portfolio</a>
```
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>
```
Save your index.html web page.

Updating the menu colours

In the menus-template.html file you copied-and-pasted into your index.html web page, the CSS class of menu-light is assigned to the desktop and mobile menus. As a result:

The text of the menu options is displayed in a red colour against a white background.
The text and background of the CTA button are also in the colours red and white.

Let’s replace this default colour of red with the deep pink colour of #d1274b used elsewhere in the web page.

In VS Code, open the menus.css stylesheet.
From the VS Code menubar, click the Edit option and then choose the Replace command.
A new search-and-replace dialog box appears at the top-right of the Visual Studio Code screen.
In the first field, enter red.
In the second, enter #d1274b.
Click the left icon for Replace. Do not click the right icon for Replace All.
One by one, replace every occurrence of the colour red with #d1274b. (If you choose the Replace All option, VS Code will replace the letters 'red' inside words such as 'centered' that may be written in comments.)
Save the menus.css file.

In your web browser, the web page should look as shown below.

Adding the 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:

When the user displays the top of the web page, either on desktop or mobile screens, the menu has a transparent background. The hero image appears directly behind the text hyperlinks. These hyperlinks are displayed in white text.
When the user scrolls down the web page, the transparent background is replaced by a solid white colour. And the colour of the text hyperlinks changes to deep pink.

To achieve this effect, follow these steps.

In the index.html file, for the menu-related blocks below, replace the class of menu-light with the menu-transparent class.
Scroll down to near the bottom of the web page, and remove the // characters from the beginning of the JavaScript code as shown below.
Save the index.html web page.

In your web browser, the web page should look as shown below as you scroll down and back up the screen.

When the user scrolls down the web page:

This JavaScript code removes the menu-transparent class and replaces it with the menu-light class. It also adds the menu-drop-shadow class that places a horizontal border with a drop shadow effect along the bottom of the menu.

When the user scrolls back up the web page:

The JavaScript code removes the menu-light and menu-drop-shadow classes, and replaces them with the original menu-transparent class.

Darkening the upper part of the hero image overlay

In your style.css file, you can see that the hero image has a black-coloured overlay.

Its purpose is to make the heading and sub-heading of the hero block easier to read against the image background. The overlay has a low value of 0.2, so that the image does not appear too dull.

Your task is to darken the overlay — but only for the upper part of the hero image that is behind the text of the menu options. The aim is to make the menu option text easier to read.

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.
Save the style.css file. You can now close this stylesheet.

Changing the colour of the hamburger icon

The hamburger icon, which is displayed only on mobile screens, is shown in the same deep pink colour as the menu options text whenever the menu has a transparent background.

To make the hamburger icon more visible against the background image, let’s change its colour from deep pink to white.

In VS Code, open the menus.css stylesheet.
Change the icon colour, which is created by the background-color property, to white (#fff).
Save the menus.css file. You can now close this stylesheet.

That’s it. You have now completed your ‘Smoothies’ project.

You can display a finished version of the project web page by clicking the image below.

Uploading your project to GitHub

All the files you have updated for this project are in the smoothies sub-folder of your websites/portfolio folder.

So the easiest option is simply to upload the entire smoothies sub-folder to your account on GitHub.

If you are not already signed in to your GitHub account, sign in now.
On the left of your GitHub home page, click the name of the repository that holds your web pages.
On the next GitHub screen displayed, click the portfolio folder.
GitHub should now display your portfolio folder.
With the portfolio folder displayed on your GitHub screen, click the Add file button and, from the dropdown list displayed, choose the option Upload files.
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.
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.

Your updated ‘Smoothies’ project web page project 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.

Contents >

Smoothies Project: Menus

Introduction

Learning Goals

Contents

Creating the hero block

Downloading the website logo image

Working with your two HTML files

Copying-and-pasting the menus HTML and JavaScript

Working with the template CSS file

Copying and renaming the template CSS file

Removing browser resets from the new menus CSS file

Updating the font-family for the menus

Linking your web page to the new menus CSS file

Updating the menu logo and hyperlink

Updating the menu option hyperlinks

Creating the hyperlink destinations

Offsetting the hyperlink destinations

Updating the mobile menu content and hyperlinks

Updating the menu colours

Adding the menu style-swapping effect

Darkening the upper part of the hero image overlay

Changing the colour of the hamburger icon

Uploading your project to GitHub

Smoothies Project:
Menus