WDD 130: Web Fundamentals

Building Your Course Home Page

Overview

In this assignment, you will apply your learning creating a basic home page for the course in HTML.

Instructions

  1. Create a course folder on your computer named "wdd130" (lower case, no spaces).
  2. In VS Code, open that wdd130 folder using File -> Open Folder.
  3. Create a new file in that wdd130 folder named "index.html". This will be your course home page.
    How do I create a new file within VS Code?

    There are many ways to create a new file in Visual Studio Code, including:

    • Right-click in the Explorer panel and select New File.
    • Use the VS Code application pull-down menu by selecting File and then select New File...
    • Use the keyboard shortcut. Windows: Ctrl+Alt+Windows+N | Mac: Cmd+N
    • Select the New File icon in the Explorer panel (demonstrated below in an animation). Demonstration: Create a New File in VS Code

    "index" is a standard page name on web servers that will load by default unless changed by the server administrator. This page will load if only the folder is referenced in a URL. Try it. In a browser window, go to ibm.com and then go to ibm.com/index.html. The same page loads.

  4. In your index.html file, write the HTML markup to build the basic HTML page anatomy including:

    For a reminder of the purpose of these elements, refer to the Learning Activity An Introduction to HTML

    • the document type,
    • the html element with language attribute,
    • the head element within the html element's opening and closing tags, and
    • the body element within the html element and after the head.
    Check Your Understanding 
            <!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>
  5. Within the head element, include the following from the required meta information:

    Review the Learning Activity An Introduction to HTML for details on the elements contained in the <head> element.

    • Meta charset attribute
    • Meta viewport element
    • Title element
  6. Set the title content to [Your Full Name] | WDD 130 where [Your Full Name] is replaced with your actual, preferred full name.
    Check Your Understanding 
                    <!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Xavier Rodriquez | WDD 130</title>
  </head>
  <body>
  </body>
</html>
  7. Within the body element, include three, semantic, child elements:
    • header
    • main
    • footer
    to create the major sections of the page.
  8. Within the header element, add a nav element with anchor tag a elements with the following href attribute values. The Rafting Website link will be used in a future assignment so just prepare now by linking to this future page even though it will not work now. 
    <header>
  <nav>
    <a href="#">Home</a>
    <a href="wwr/">Rafting Website</a>
  </nav>
</header>
<main>
</main>
<footer>
</footer>

    The # value for the Home page href anchor link refers to the current page and will not reload the page. This is the behavior and structure that we want.

  9. Within the main element:
    • add a h1 heading element that contains Your Full Name | WDD 130
    • add an img element with the following attributes:
      • src: The src specifies the URL of the image file. It consists of the path and the file name with its extension. Use the following path: src="images/profile.___" where ___ will be your file extension.
      • alt: The alt attribute is required as part of accessibility to provide alternative text to display when the image is not rendered by the browser. Go ahead and include your name in the alternative text.
      • width: Set the layout initial width of the image to 200.
    • add a p paragraph element that contains information that you want to share about yourself.
  10. To support the image reference, add a new folder named "images" to your wdd130 folder.
    Example File Structure Week 01
    Figure 1: Example File Structure
  11. Copy or move an optimized for the web profile picture file of yourself into this images folder.
    1. The acceptable image file types for this assignment include:
      • png
      • webp
      • jpg
    2. The image must not exceed 100 kB in file size.
  12. Rename the image file profile. and use your image file extension.
    Check Your Understanding 
    <main>
  <h1>Xavier Rodriquez | WDD 130</h1>
  <img src="images/profile.jpg" alt="Hello, my name is Xavier Rodriquez" width="200">
  <p>Hello! My name is Xavier Rodriquez and I am from Piura, Perú. I enjoy ... </p>
</main>

    Video Demonstration: ▶️ Optimizing an Image and Adding it to a Web Page

    Is the image file not displaying! Check the instructions under the File Sources and References help page to help resolve the issue.

  13. Within the footer element, add a p paragraph element. The paragraph should contain the following:
    • The copyright symbol © and a copyright year.

      To display the copyright symbol, use the HTML entity &copy; or use a built-in emoji.


      To display the emoji menu, do the following:

      • Windows/Linux: Hold the 🪟 window key and press period (.)
      • macOS: Hold down the following three keys at the same time: Command+Control+Spacebar or press the fn key.

    • Your name.
    • Your state or country.
    Each of these items in the footer will be separated by syntax of your choice.
    Check Your Understanding 
    <footer>
  <p>©️2024 🌴 Xavier Rodriquez 🌴 Piura, Perú</p>
</footer>
  14. Check your rendered page by right mouse clicking on the index.html file name in the Explorer panel and selecting Open with Live Server or by using the menu item at the bottom of VS Code. Live Server will open up the page in your default browser.
    Demonstration of launching Live Server Demonstration of launching Live Server in VS Code.

    Complete Example

    <!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Xavier Rodriquez | WDD 130</title>
  </head>
  <body>
    <header>
      <nav>
        <a href="#">Home</a>
        <a href="wwr/">Rafting Site</a>
      </nav>
    </header>
    <main>
      <h1>Xavier Rodriquez | WDD 130</h1>
      <img src="images/profile.jpg" alt="Hello, my name is Xavier Rodriquez" width="200">
      <p>Hello! My name is Xavier Rodriquez and I am from Piura, Perú. I enjoy ... </p>
    </main>
    <footer>
      <p>©️2024 🌴 Xavier Rodriquez 🌴 Piura, Perú</p>
    </footer>
  </body>
</html>
    Figure 2: Example Student Course Home Page
    Figure 2: Screenshot of Example Student Course Home Page
  15. Validate your HTML by running the Web Developer extension in your browser.
    1. Render the page on your browser using the Live Server tool in VS Code.
    2. Using the Web Developer extension, select Tools -> Validate Local HTML to get an HTML validation report.
    3. Correct any issues that you observe after testing the page and then test again.
      Post your questions or look to help others in Microsoft Teams.
  16. Continuously save your work.

    It is recommended that you turn on Auto Save in VS Code. Go to File -> Preferences -> Settings and then type "Auto Save" in the search bar at the top of the panel. Use the pull-down menu to select afterDelay. Set the Files: Auto Save Delay field to something like 1000 ms (1 second).

    • Save / Auto Save - code.visualstudio.com

Submission

  1. You will be committing and pushing/uploading your work to your remote wdd130 repository on GitHub for publication in the next activity using a service called GitHub Pages.

Optional Resources