Smoothies Website

Contents  >

HTML Project 3:
Email Sign Up Form

Introduction

In this task you will use template content to add an email sign-up form to the single-web page 'Smoothies' project you created earlier.

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

Web Design Project: Smoothies 2n2l.com Brendan Munnelly

Learning Goals

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

Contents

Introduction

Work with your two HTML files

Add the <head> link for the Font Awesome icons

Copy-and-paste the form HTML

Work with your two CSS files

Copy-and-paste the form CSS

Update your form HTML and CSS

Validate your HTML file

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:   email-signup-form-template.html
  2. From your websites\portfolio\smoothies folder, open the web page named index.html.

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 HTML files you will be working with.

Add the <head> link for the Font Awesome icons

Your email sign-up form will use a Font Awesome 5 icon. So you need to copy and paste the link to the Font Awesome stylesheet CSS file from the <head> section of the email sign-up form template file to the <head> section your index.html web page.

  1. In the email-signup-form-template.html file, select the Font Awesome link from the <head> section and copy it. fa-icons-copy
  2. In your index.html web page, paste the copied Font Awesome link in the <head> section, just after the link to Google Fonts as shown below. fa-icons-copy
  3. When finished, save your index.html web page.

Copy-and-paste the form HTML

Your next step is to copy content from the email sign-up form template file into your index.html web page.

  1. In the email-signup-form-template.html file, select and copy the form section. fa-icons-copy
  2. 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
    • Press the ENTER key a few times to open up some new lines of blank space.
    • Paste the copied form content.
  3. When finished, save your index.html web page.

You can now close the email-signup-form-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:   email-sign-up-form-template.css
  2. From your websites\portfolio\smoothies\assets\css folder, open your stylesheet named style.css.

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 form CSS

Your next step is to copy content from the email sign-up form template CSS file into your style.css web page.

  1. In the email-sign-up-form-template.css file, select and copy the form section. fa-icons-copy
  2. In your style.css file:
    • Scroll down to the end of the stylesheet and click on the last empty line. fa-icons-copy
    • Press the ENTER key a few times to open up some new lines of blank space.
    • On the new last line, paste the copied form CSS.
  3. When finished, save your style.css stylesheet.

You can now close the email-sign-up-form-template.css file.

Update your form HTML and CSS

Here are the final steps to updating your email sign up form.

  1. In Visual Studio Code, open your index.html web page and the style.css file.
  2. In the index.html file, scroll down to the form section, and change the <h3> sub-heading and <p> text of the form as follows.
    
    <h3>Join our email list</h3>
    <p>Keep me up-to-date with your latest healthy smoothie recipes and special offers.</p>  
    
  3. Edit the text of the form submit button from 'Sign Up' to 'Subscribe' and change the Font Awesome icon.
    
    <button id="btn-submit" type="submit" class="btn-submit">Try it free <i class="fas fa-envelope"></i></button>  
    
  4. Ensure that you have changed the email address in the form from myname@gmail.com to your own email address.   You can now save the index.html web page. You have finished updating it.
  5. In the style.css file, scroll down to the /* == Email sign up form container == */ section and remove the border styles. fa-icons-copy
  6. For the form, change the <h3> sub-heading and <p> paragraph text font, font-size and colour as shown below. fa-icons-copy
  7. Change the colour of the border around the form field as follows. fa-icons-copy
  8. Update the styles for the form submit button as follows.
    
    #email-signup-form #btn-submit {
       color: #fff;
       border: none;
       padding: 12px 22px;
       background-color: #d1274b;
       border-radius: 50px;
    }
    
    #email-signup-form #btn-submit:hover {
       background-color: #733fc0;
    }
    
  9. Save your style.css files.

View your web page in your web browser. The email sign up form should look as below.

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

Web Design Project: Smoothies 2n2l.com Brendan Munnelly

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. validate-html
  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. 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 Visual Studio, 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 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. 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 smoothies folder to the GitHub tab in your web browser. github-upload-drag-drop
  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. github-upload-progress

Your 'Smoothies' project web page with the email sign-up form 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.