Software Analytics Website

Contents  >

HTML Project 4:
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 'Software Analytics' 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: Software Analytics 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

Control web page scrolling

Validate your HTML file

Validate your CSS file

Upload your project to GitHub

Downloading the Templates Folder and Files

If you have not already downloaded the HTML, CSS and image template files for use with this and your other projects, you can find the instructions at the link below.

Templates Download

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\software 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 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\software\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. To the first parent flexbox DIV at the top of the index.html web page, add the new classname of hero-block.   Under the <p> paragraph, add a CTA (Call-to-Action) button that will link to the form at the bottom of the web page. fa-icons-copy
  3. Scroll down to the email sign up form and add the link anchor of free-trial to its container DIV as shown below. fa-icons-copy
  4. Change the <h3> sub-heading and <p> text of the form as follows. 
    
<h3>Start your free trial</h3>
<p>Enjoy unlimited access for 14 days. No credit card required.</p>
  5. Edit the text of the form submit button from 'Sign Up' to 'Try it free' and change the Font Awesome icon. 
    
<button id="btn-submit" type="submit" class="btn-submit">Try it free <i class="fas fa-arrow-right"></i></button>
  6. 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.
  7. In your style.css file, in the /* BROWSER RESETS */ section at the top, add the smooth-scrolling effect. And just under this section, add the following background colour to the body of the web page. fa-icons-copy
  8. At the end of the /*== PARENT FLEXBOX CONTAINERS == */ section, add this style for the hero section. fa-icons-copy
  9. And under the above new style, copy-and-paste the following lines for the CTA button in the hero section 
    
/* == CTA button == */
.container-flexbox.hero-block a {
   display: inline-block;
   text-decoration: none;
   padding: 12px 42px;
   border-style: solid;
   border-width: 4px;
   margin: 32px 0;
   border-radius: 50px;
   font-size: 18px;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.container-flexbox.hero-block a:link,
.container-flexbox.hero-block a:visited {
   color: #5ba745;
   background-color: #fff;
   border-color: #5ba745
}

.container-flexbox.hero-block a:hover,
.container-flexbox.hero-block a:active {
   color: #fff;
   background-color: #5ba745;
   border-color: #5ba745
}
  10. Scroll down to the /* == HEADINGS, PARAGRAPHS, IMAGES == */ section. For the <h1> heading in the hero section, reduce the maximum font-size from 72 to 60 as shown below. fa-icons-copy
  11. Scroll down to the /* == Email sign up form container == */ section and change the background colour of the form container as follows. Also, remove the border styles. fa-icons-copy
  12. For the form, change the <h3> sub-heading and <p> paragraph text colours to white as show below. fa-icons-copy Also, change the colour of the 'Email' label to white. fa-icons-copy
  13. Update the styles for the form submit button as follows. 
    
#email-signup-form #btn-submit {
   color: #fff;
   border: solid 2px #fff;
   padding: 12px 22px;
   background-color: #fff;
   letter-spacing: 1px;
   border-radius: 50px;
   color: #5ba745;
}

#email-signup-form #btn-submit:hover {
   color: #fff;
   background-color: #5ba745;
   border: solid 2px #fff
}
  14. 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 this project on GitHub by clicking the image below.

Web Design Project: Software Analytics 2n2l.com Brendan Munnelly

Control web page scrolling

When you click the 'TRY IT FREE' button in he hero section, you can see that the page immediately 'jumps' to the email sign-up form at the bottom of the web page.

You can add a so-called 'smooth scrolling' effect to your CTA button as follows:

  1. In your style.css stylesheet, add the following new property and value to the /* BROWSER RESETS */ section: fa-icons-copy
  2. Save the style.css file and view the result in your web browser for both desktop and mobile screen sizes by clicking the menu options.

Note that the scroll-behavior: smooth effect works with the Google Chrome, Mozilla Firefox, Brave, Samsung Internet and Android Webview web browsers. However, it is not yet supported by the Microsoft Edge web browser. A new and major upgrade of Edge is planned for early 2020 and Microsoft are expected to fix this defect then. It is also not currently supported by the Apple Safari and Opera web browsers.

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 software of your websites/portfolio folder.

So you will need to upload this software 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 software folder to the GitHub tab in your web browser. github-upload-drag-drop
  6. After uploading the software 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 'Software' 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/software/index.html

or, simply:

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

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



Return to Contents.