WDD 130: Web Fundamentals

W01 Code-along Activity: Creating a New HTML File

Code-along Activity Overview

For this activity, you will code along with an instructor video that walks you through each step of this activity. Make sure that you pause the video, or watch sections over if you need to, so that you are able to complete the entire activity.

Your instructor will post a link to the video in Microsoft Teams.

Overview

Follow the code-along video to create a new HTML file that highlights your favorite city.

Instructions

  1. Create a new HTML file with these requirements:
    • named favorite-city.html
    • located in the week01 subfolder of your wdd130 repository
    • the document contains all the required head information and is properly structured with a a body section for the displayed content

      Hint: you can use the VS Code html:5 abbreviation to help you start with a valid HTML structure.

    • the body contains an appropriate h1 heading
    • the body contains a paragraph p or two about your city
    • the body contains an image img

      Hint: you can find a free image to use from Wikipedia.

  2. Preview the favorite-city.html file in your web browser using Live/Five Server.
  3. When finished, commit and sync/push your changes to the wdd130 repository to GitHub.
  4. View your GitHub Pages hosted HTML file in a browser to verify that everything has worked correctly.

    Hint: Your GitHub Pages URL will be
    https://your-username.github.io/wdd130/week01/favorite-city.html.

Alternative Video Link

In addition to the link that your instructor posted, you are also welcome to watch the following code walkthrough or use its transcript:

Submission

Please pause and re-watch any sections of the instructor video necessary until you have completed the entire activity and your page is similar to the instructor's. When you are finished: