Hero Blocks Showcase

Contents  >

HTML Project: 2

Introduction

This responsive web page contains a showcase of hero blocks with various fonts and alignments, and with a range of background colours, gradients and images. You can display a finished version of this project on GitHub by clicking the image below.

Project Hero Blocks

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

About hero blocks

Hero block: 1

Hero block: 2

Hero block: 3

Hero block: 4

Hero block: 5

Hero block: 6

Hero block: 7

Update the meta tags

Update the Google Analytics ID

Update the privacy pop-up code and message

Validate your HTML file

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

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

file-explorer-portfolio-project-folder

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

file-explorer-full

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 two downloaded files. The first is the web page; the second, the stylesheet:
    • index.html: You will find this in the main folder of your hero folder.
    • hero.css: You will find this in the assets/css/ sub-folder of the hero folder.
vs-two-files

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\hero 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. file-explorer-double-click 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. file-explorer-right-click

When you look inside the index.html you can see seven 'boxes' of content:

Project Hero Blocks

About hero blocks

So-called hero blocks (sometimes known as jumbotrons) are large and typically rectangular areas at the very top of a web page. They are the first item seen by users, and are intended to capture their attention and engage their interest in the web page.

All seven hero blocks in this exercise have the following common features:

A few points to note about the text content of the seven hero blocks:

In the remainder of this project, you will build each of the seven hero blocks. Your first step will be to create the CSS declarations for the first of the seven hero blocks. These you will then copy-and-paste to use as a basis for styling the other ten hero blocks.

Hero block: 1

Follow these steps to create the styles for the <div>s named 'hero-block-1.'

  1. In the hero.css file, under the comment /*== HERO BLOCK 1 ==*/, enter the following code. This will give your first block a solid background colour of blue and ensure that its content will be centred vertically (top-to-bottom).
    
     /*== HERO BLOCK 1 ==*/
     .hero-block-1 {
         display: flex;
         flex-direction: column;
         justify-content: center;
         background-color: #0065f2;
     }
    
  2. Next, enter the styles for the two text headings within the first block. As you can see, the text is centre-aligned, coloured white, has a bold weight, and is in the Google Font named Open Sans:
    
    .hero-block-1 h1, .hero-block-1 h2 {
        font-family: 'Open Sans', sans-serif;
        color: #fff;
        font-weight: bold;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.4
    }
    
    .hero-block-1 h1 {
       font-size: calc(36px + (72 - 36) * ((100vw - 320px)/(1600 - 320)));
    }
    
    .hero-block-1 h2 {
       font-size: calc(20px + (32 - 20) * ((100vw - 320px)/(1600 - 320)));
    }
    
  3. Finally, within two responsive media queries, enter the styles that will vary according to screen size. As you can see, the text will be 80% wide on mobiles and 60% of the width of desktop screens. On mobiles, the bottom margin under the <h1> heading will be 10%. On desktops, it will be 4%.
    
    /* Mobiles - height and bottom margin, text width */
    @media all and (max-width:767px) {
        .hero-block-1 { height: 360px; margin-bottom: 40px }
        .hero-block-1 h1, .hero-block-1 h2 { width: 80% }
        .hero-block-1 h1 { margin-bottom: 10% } 
    }
    
    /* Desktop - height and bottom margin, text width */
    @media all and (min-width:768px) {
        .hero-block-1 { height: 480px; margin-bottom: 70px }
        .hero-block-1 h1, .hero-block-1 h2 { width: 60% }
        .hero-block-1 h1 { margin-bottom: 4% }
    }
    
  4. Save the hero.css file and, in your web browser, view the effect on the hero-block-1 element in your index.html file. It should now look as shown below. Project Hero Blocks

Hero block: 2

Follow these steps to create the CSS styles for the <div> in your index.html file named 'hero-block-2.'

  1. In the hero.css stylesheet, select and copy all the CSS styles you created for 'hero-block-1.' Project Hero Blocks
  2. Under the comment line /*== HERO BLOCK 2 ==*/, paste the CSS styles you have just copied. Project Hero Blocks
  3. In the copied-and-pasted block, rename all occurrences of the text 'hero-block-1' to 'hero-block-2'.
  4. Make the following changes to the copied, pasted and renamed block of CSS styles.
    
    /* === HERO BLOCK 2 === */
    .hero-block-2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #78d8da;
    }
    
    .hero-block-2 h1, .hero-block-2 h2 {
        font-family: 'Montserrat', sans-serif;
        color: #000;
        font-weight: bold;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.5
    }
    
    .hero-block-2 h1 {
         font-size: calc(32px + (84 - 32) * ((100vw - 320px)/(1600 - 320)));
    }
    
    .hero-block-2 h2 {
        font-size: calc(18px + (32 - 18) * ((100vw - 320px)/(1600 - 320)));
        font-weight: normal
    }
    
    /* Mobiles */
    @media all and (max-width:767px) {
        .hero-block-2 { height: 360px; margin-bottom: 40px }
        .hero-block-2 h1, .hero-block-2 h2 { width: 80% }
        .hero-block-2 h1 { margin-bottom: 10% } 
    }
    
    /* Desktop */
    @media all and (min-width:768px) {
        .hero-block-2 { height: 480px; margin-bottom: 80px }
        .hero-block-2 h1, .hero-block-2 h2 { width: 60% }
        .hero-block-2 h1 { margin-bottom: 4% }
    }
    
    Here is a summary of the changes:
    • For all screen sizes, you have changed the text colour from white (#fff) to black (#000) and background colour from blue (#0065f2) to green (#78d8da).
    • The text that was centre-aligned is now aligned to the left (text-align: left).
    • The font has been changed from Open Sans to Montserrat.
    • As the <h2> heading in this block contains more text than in the first block, you have increased the inter-line spacing (line-height: 1.5) to make the text easier to read.
    • The <h2> heading is no longer in bold (font-weight: normal).
    • Also, you have changed slightly the font sizes in both headings.
    You do not need to make any changes to the styles within the two media queries.
  5. Save the hero.css file and, in your web browser, view the effect on the hero-block-2 element in your index.html file. It should now look as shown below. Project Hero Blocks

Hero block: 3

Follow these steps to create the CSS styles for the <div> in your index.html file named 'hero-block-3.'

  1. In the hero.css stylesheet, select and copy all the CSS styles you created for 'hero-block-2.'
  2. Under the comment line /*== HERO BLOCK 3 ==*/, paste the CSS styles you have just copied.
  3. In the copied-and-pasted block, rename all occurrences of the text 'hero-block-2' to 'hero-block-3'.
  4. Make the following changes to the pasted and renamed block of CSS styles.
    
    /* === HERO BLOCK 3 === */
    .hero-block-3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #f6e58d;
    }
    
    .hero-block-3 h1, .hero-block-3 h2 {
        font-family: 'Merriweather', serif;
        color: #273c75;
        font-weight: bold;
        text-align: left;
        color: #273c75;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.4    
    }
    
    .hero-block-3 h1 {
        font-size: calc(32px + (72 - 32) * ((100vw - 320px)/(1600 - 320)));
    }
    
    .hero-block-3 h2 {
        font-size: calc(18px + (32 - 18) * ((100vw - 320px)/(1600 - 320)));
        font-weight: normal
    }
    
    /* Mobiles */
    @media all and (max-width:767px) {
        .hero-block-3 { height: 360px; margin-bottom: 40px }
        .hero-block-3 h1, .hero-block-3 h2 { width: 70% }
        .hero-block-3 h1 { margin-bottom: 5% } 
    }
    
    /* Desktop */
    @media all and (min-width:768px) {
        .hero-block-3 { height: 480px; margin-bottom: 80px }
        .hero-block-3 h1, .hero-block-3 h2 { width: 60% }
        .hero-block-3 h1 { margin-bottom: 1% }
    }
    
    Here is a summary of the changes:
    • For all screen sizes, you have changed the text colour to dark blue (#273c75) and background colour to light yellow (#f6e58d).
    • The text is now in the Merriweather font.
    • You need to make only one change to the font sizes. For the <h1> heading, reduce the maximum font size from 84 to 72.
    • Within the mobile media query, make the headings slightly narrower than before by reducing the widths from 80% to 70%.
    • Also, reduce the margin below the <h1> heading, from 10% to 5% (mobiles) and from 4% to 1% (desktops).
    Save the hero.css file and, in your web browser, view the effect on the hero-block-3 element in your index.html file. It should now look as shown below. Project Hero Blocks In the final step below, you will animate the background colour for this hero block. To generate the CSS code required for the animation effect, you will use the Animista website created by Ana Travas.
  5. Go to this web page.  Animista  and click the Try me button.
  6. Across the top of the screen you can see a draggable range of main options in white text against a black background. For each of these options, you choose from a wide variety of sub-options. Project Hero Blocks
  7. In the main top menu, click the Background option. Next, click the red circle containing the Color-Change sub-option. Ensure the color-change-x2 sub-sub-option is selected. Project Hero Blocks
  8. At the right of the screen, click the {*} icon to display the CSS code that Animista has created for you. Project Hero Blocks
  9. With the Autoprefixer option selected, click the Copy Class button and paste the code into your hero.css file at the end of the /*== HERO BLOCK 3 ==* section.
    
    .color-change-2x {
      -webkit-animation: color-change-2x 2s linear infinitealternate both;
              animation: color-change-2x 2s linear infinitealternate both;
    }
    
  10. Return to the Animista screen, click the Copy Keyframes button, and also paste that code in your hero.css file at the end of the /*== HERO BLOCK 3 ==* section.
  11. Your final action in the hero.css file is to change the two colours used in the animation. Change the two occurrences of #19dcea to #f6e58d, and the two occurrences of #b22cff to #f1c40f. The pasted and edited code should now look as shown below. Save your CSS file.
    
    /* ----------------------------------------------
     * Generated by Animista on 2019-8-12 11:33:18
     * w: http://animista.net, t: @cssanimista
     * ---------------------------------------------- */
    
    /*
     * ----------------------------------------
     * animation font-family-change-2x
     * ----------------------------------------
     */
     @-webkit-keyframes color-change-2x {
        0% {
          background: #f6e58d;
        }
        100% {
          background: #f1c40f;
        }
      }
       @keyframes color-change-2x {
        0% {
          background: #f6e58d;
        }
        100% {
          background: #f1c40f;
        }
    }
    
  12. In the index.html file, add the class named color-change-2x to the 'hero-block-3' element, and save the HTML file.
    
    <div class="hero-block-3 color-change-2x">
       <h1>Van Gough Exhibition</h1>
       <h2>IBAT College, Temple Bar, Dublin 2. <br>April/May 2019. Admission free.</h2>
    </div>
    
  13. In your web browser, view the effect on the hero-block-3 element in your index.html file. You should now see the dark blue text against a background that animates between light and dark yellow.

Hero block: 4

Follow these steps to create the CSS styles for the <div> in your index.html file named 'hero-block-4.'

  1. In the hero.css stylesheet, select and copy all the CSS styles you created for 'hero-block-3.'
  2. Under the comment line /*== HERO BLOCK 4 ==*/, paste the CSS styles you have just copied.
  3. In the copied-and-pasted block, rename all occurrences of the text 'hero-block-3' to 'hero-block-4'.
  4. Make the following changes to the pasted and renamed block of CSS styles.
    
    /* === HERO BLOCK 4 === */
    .hero-block-4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-image: linear-gradient(#512d6d,#c42f9e);
    }
    
    .hero-block-4 h1, .hero-block-4 h2 {
        font-family: 'Open Sans', sans-serif;
        color: #fff;
        font-weight: bold;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.4
    }
    
    .hero-block-4 h1 {
       font-size: calc(32px + (72 - 32) * ((100vw - 320px)/(1600 - 320)));
    }
    
    .hero-block-4 h2 {
       font-size: calc(18px + (32 - 18) * ((100vw - 320px)/(1600 - 320)));
       font-weight: normal
    }
    
    /* Mobiles */
    @media all and (max-width:767px) {
        .hero-block-4 { height: 360px; margin-bottom: 40px }
        .hero-block-4 h1, .hero-block-4 h2 { width: 70% }
        .hero-block-4 h1 { margin-bottom: 5% } 
    }
    
    /* Desktop */
    @media all and (min-width:768px) {
        .hero-block-4 { height: 480px; margin-bottom: 80px }
        .hero-block-4 h1, .hero-block-4 h2 { width: 60% }
        .hero-block-4 h1 { margin-bottom: 1% }
    }
    
    Here is a summary of the changes:
    • For all screen sizes, you have changed the text colour to white (#fff), and changed the font to Open Sans.
    • For the background of the hero block, you have used the CSS style of background-image. As its name suggests, this is typically used to set a background image to an element on a web page.   However, it also allows you to set two colour values that will change from one to another in a smooth gradient. You have used a different shade of the same purple colour for these two values, the first shade being slightly darker (#512d6d) than the second (#c42f9e).
    • You do not need to make any changes to the font sizes or the styles within the two media queries.
  5. Save the hero.css file and, in your web browser, view the effect on the hero-block-4 element in your index.html file. It should now look as shown below. Project Hero Blocks

Hero block: 5

Follow these steps to create the CSS styles for the <div> in your index.html file named 'hero-block-5.'

  1. In the hero.css stylesheet, select and copy all the CSS styles you created for 'hero-block-4.'
  2. Under the comment line /*== HERO BLOCK 5 ==*/, paste the CSS styles you have just copied.
  3. In the copied-and-pasted block, rename all occurrences of the text 'hero-block-4' to 'hero-block-5'.
  4. Make the following changes to the pasted and renamed block of CSS styles.
    
    /* === HERO BLOCK 5 === */
    .hero-block-5 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-image: url('../img/hotel-dark.jpg');
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .hero-block-5 h1, .hero-block-5 h2 {
        font-family: 'Open Sans', sans-serif;
        color: #fff;
        font-weight: bold;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.4;
        text-shadow: 2px 2px #222 
    }
    
    .hero-block-5 h1 {
        font-size: calc(60px + (112 - 60) * ((100vw - 320px)/(1600 - 320)));
    }
    
    .hero-block-5 h2 {
        font-size: calc(24px + (54 - 24) * ((100vw - 320px)/(1600 - 320)));
    }
    
    /* Mobiles */
    @media all and (max-width:767px) {
        .hero-block-5 { height: 360px; margin-bottom: 40px }
        .hero-block-5 h1, .hero-block-5 h2 { width: 70% }
        .hero-block-5 h1 { margin-bottom: 5% } 
    }
    
    /* Desktop */
    @media all and (min-width:768px) {
        .hero-block-5 { height: 480px; margin-bottom: 80px }
        .hero-block-5 h1, .hero-block-5 h2 { width: 60% }
        .hero-block-5 h1 { margin-bottom: 1% }
    }
    
    For all screen sizes, you have made the following changes to the background of the hero block:
    • background-image: This sets the image named hotel-dark.jpg as the background for the 'hero-block-5' div.
    • background-size: The value of cover ensures that the background image always fills or 'covers' the full size of the div that contains it. This means that the image will be stretched or trimmed if its aspect ratio is not exactly the same as that of the container div.
    • background-position: This CSS property sets the vertical (top-bottom) and horizontal (left-right) position of the image within the block whenever the height and/or width of the image is different from the displayed height and/or width of the block that contains it. By default, a background image positioned is at the top-left corner of its container div.
    • background-repeat: The value of none prevents the background image from being repeated vertically and/or horizontally (the default value) whenever its height and/or width is less than that of its container div.
    • For the <h1> and <h2> headings, you changed the alignment (text-align: center), increased the font sizes and added a text-shadow property. This last property makes the text easier to read against a background image.
    You do not need to make any changes to the styles within the two media queries.
  5. Save the hero.css file and, in your web browser, view the effect on the hero-block-5 element in your index.html file. It should now look as shown below. Project Hero Blocks

Hero block: 6

Follow these steps to create the CSS styles for the <div> in your index.html file named 'hero-block-6.'

  1. In the hero.css stylesheet, select and copy all the CSS styles you created for 'hero-block-5.'
  2. Under the comment line /*== HERO BLOCK 6 ==*/, paste the CSS styles you have just copied.
  3. In the copied-and-pasted block, rename all occurrences of the text 'hero-block-5' to 'hero-block-6'.
  4. Make the following changes to the pasted and renamed block of CSS styles.
    
    /* === HERO BLOCK 6 === */
    .hero-block-6 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url('../img/bike-tours.jpg');
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .hero-block-6 h1, .hero-block-6 h2 {
        font-family: 'Montserrat', sans-serif;
        color: #fff;
        font-weight: bold;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.4;
        text-shadow: 2px 2px #222 
    }
    
    .hero-block-6 h1 {
        font-size: calc(60px + (112 - 60) * ((100vw - 320px)/(1600 - 320)));
        line-height: 1.2
    }
    
    .hero-block-6 h2 {
        font-size: calc(24px + (54 - 24) * ((100vw - 320px)/(1600 - 320)));
        font-family: 'Roboto Condensed', sans-serif;
        text-transform: uppercase;
    }
    
    /* Mobiles */
    @media all and (max-width:767px) {
        .hero-block-6 { height: 360px; margin-bottom: 40px }
        .hero-block-6 h1, .hero-block-6 h2 { width: 80% }
        .hero-block-6 h1 { line-height: 1.2; margin-bottom: 10% }
    }
    
    /* Desktop */
    @media all and (min-width:768px) {
        .hero-block-6 { height: 480px; margin-bottom: 80px }
        .hero-block-6 h1, .hero-block-6 h2 { width: 80% }
        .hero-block-6 h1 { margin-bottom: 5% }
    }
    
    For all screen sizes, make these two changes to the background image:
    • Background image file: Set a new image named bike-tours.jpg as the background for the hero block.
    • Background image overlay: Add a semi-opaque overlay behind the text and in front of the background image. This is to make the text more readable against the image behind it. The overlay image colour is expressed in RGB (Red, Green, Blue) code, where 0,0,0 is the colour black. The level of opacity is measured on a scale of 0 to 1. The value of 0.3 means 30% opaque (or 70% transparent).
    • For the <h1> and <h2> headings, you changed the font to Roboto Condensed. Also for the <h2> text, the text-transform: uppercase value ensures its characters are always displayed in capitals.
    • For mobiles and desktops, the widths of the <h1> and <h2> headings are increased to 80%.
    • For mobiles, the <h1> line-height is reduced to 1.2 and margin-bottom increased from 5% to 10%.
    • For desktops, the margin-bottom increased to from 1% to 5%.
  5. Save the hero.css file and, in your web browser, view the effect on the hero-block-6 element in your index.html file. It should now look as shown below. Project Hero Blocks

Hero block: 7

Follow these steps to create the CSS styles for the <div> in your index.html file named 'hero-block-7.'

  1. In the hero.css stylesheet, select and copy all the CSS styles you created for 'hero-block-6.'
  2. Under the comment line /*== HERO BLOCK 7 ==*/, paste the CSS styles you have just copied.
  3. In the copied-and-pasted block, rename all occurrences of the text 'hero-block-7' to 'hero-block-6'.
  4. For all screen sizes, make these two changes to the background image:
    
    /* === HERO BLOCK 7 === */
    .hero-block-7 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-image: linear-gradient(rgba(0,0,255,0.5),rgba(0,0,255,0.5)),url('../img/meeting.jpg');
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    • Background image file: Set a new image named meeting.jpg as the background for the hero block.
    • Background image overlay: Change the colour of the semi-opaque overlay to blue (0,0,255) and increase its opacity to from 0.3 to 0.5.
  5. For the <h1> and <h2> headings, change the font to Roboto Condensed, apply a text-transform setting of uppercase, and adjust the font-size values.
    
    .hero-block-7 h1, .hero-block-7 h2 {
        font-family: 'Roboto Condensed', sans-serif;
        color: #fff;
        font-weight: bold;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.4;
        text-shadow: 2px 2px #222;
        text-transform: uppercase;
    }
    
    .hero-block-7 h1 {
        font-size: calc(34px + (76 - 34) * ((100vw - 320px)/(1600 - 320)));
    }
    
    .hero-block-7 h2 {
        font-size: calc(22px + (40 - 22) * ((100vw - 320px)/(1600 - 320)));
    }
    
  6. For mobile screens, reduce the width of the <h1> and <h2> headings from 80% to 70%.
  7. For desktop screens, reduce the width of the <h1> and <h2> headings from 70% to 60%. Aslo, reduce the margin-bottom for <h1> from5% to 2%.
    
    /* Mobiles */
    @media all and (max-width:767px) {
        .hero-block-7 { height: 360px; margin-bottom: 40px }
        .hero-block-7 h1, .hero-block-7 h2 { width: 70% }
        .hero-block-7 h1 { margin-bottom: 10% } 
    }
    
    /* Desktop */
    @media all and (min-width:768px) {
        .hero-block-7 { height: 480px; margin-bottom: 80px }
        .hero-block-7 h1, .hero-block-7 h2 { width: 60% }
        .hero-block-7 h1 { margin-bottom: 2% }
    }
    
  8. Save the hero.css file and, in your web browser, view the effect on the hero-block-7 element in your index.html file. It should now look as shown below. Project Hero Blocks

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.

vscode-meta-tags

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.

vscode-ga

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 in 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. You do not need to change this. vscode-privacy-head
  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. vscode-privacy-body Near the end of the lines of the JavaScript code, you can see the web address of the privacy page. 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 index.html file.

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

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. Powerpoint Project
  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 hero.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 hero of your websites/portfolio folder.

So you will need to upload this hero 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-portfolio
  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 hero folder to the GitHub tab in your web browser. github-upload-drag-drop
  6. After uploading the hero 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 sub-folder named hero. Click on this folder. github-uploaded-project
  8. The hero 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/hero/index.html

or, simply:

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

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



Return to Contents.