WDD 130: Web Fundamentals

W02 Assignment: Home Page Enhancement

Overview

In this assignment you will apply the learning activity concepts to enhance your home page with additional HTML and CSS.

Instructions

Learning Activity

Make sure you have completed the learning activities for this week before working on this assignment.

If you have not completed the learning activities yet, you should complete them now before proceeding, or you will be missing important concepts you need to complete this assignment correctly and pass the page audit.

HTML: Add <head> meta Elements

  1. Open your course home page, index.html for editing.
  2. Add two new meta tags to your head section, namely after the title and before the CSS external file link element. These will be the meta description and the meta author. 
    <meta name="description" content="Describe your home page here using keywords like your name, the course, the purpose of the page.">
<meta name="author" content="Your name">

HTML: <body>

  1. In the body section, add an aside element after the existing main element and before the footer.
  2. In the aside element, add the following child elements and element content:
    • h2 – Your state or country.
    • img – A picture that can represent your state or country.

      Remember that all images must be optimized.
      This image cannot be more than 125kB in file size.

    • p – A brief paragraph describing your state or country.
    Check Your Understanding – Example 
    ...
</main>
<aside>
  <h2>Utah</h2>
  <img src="images/utah.jpg" alt="Utah landscape">
  <p>Utah is a state in the western United States. It is bordered by Colorado to the east, Wyoming to the northeast, Idaho to the north, Arizona to the south, and Nevada to the west. It also touches a corner of New Mexico in the southeast. The state is a center of transportation, education, information technology, and research, and a major tourist destination for outdoor recreation. Salt Lake City, the state capital and largest city, is home to the headquarters of The Church of Jesus Christ of Latter-day Saints (LDS Church).</p>
</aside>
<footer>
  ...

CSS

  1. Open the styles.css file for editing.
  2. Add a CSS declaration to the main selector to limit its width for now.
    Check Your Understanding – Example 
    main {
  max-width: 840px;
}
  3. Add CSS declarations for the following properties for an aside element selector.
    • width
    • margin
    • border
    • padding
    • background color
    • color
    Check Your Understanding – Example 
    aside {
  width: 20rem;
  margin: 1rem;
  border: 1px solid rgb(0 0 0 / 0.2); /* 1️⃣ */
  padding: 1rem;
  background-color: #eee;
  color: #333;
  text-align: center;
}

    1️⃣ The border color uses the preferred rgb color method in order to take advantage of a subtle, transparent border effect. The RGB value consists of four values: red, green, blue, and alpha. The first three values (0, 0, 0) represent black, and the last value, .2 (20%) represents the alpha or opacity of the color. An alpha value of .2 means that the color is mostly transparent, allowing the background to show through. By using this border color, the border appears very light and barely noticeable, while still providing a subtle visual cue that helps to separate elements on a webpage. Additionally, it can help to add a layer of visual interest to the design without being overly distracting or detracting from the overall layout.

  4. Set the img inside the aside to have a width of 200 pixels and a height of auto.

    This auto setting ensures that we do not change the images aspect ratio.
    Why is that important?

    Check Your Understanding 
    aside img {
  width: 200px;
  height: auto;
}

    Changing the native aspect ratio of an image will distort or pixelate the image.

  5. By default, the general img CSS selector will apply to your images. Change this for the profile image by adding a main parent selector with a specific style. 
    main img {
  width: 150px;
  height: auto;
  ...
}
  6. Change the existing paragraph p padding property value to 0 pixels.
    Note that any 0 value does not need to specify the units. 
    p { padding: 0;}
  7. Apply CSS to the <footer> element to 1️⃣add a top margin to separate it from the main element content, 2️⃣add a top border to design additional distinction from the main content, and 3️⃣align any text in the footer to the center of its content box.
    Check Your Understanding 
    footer {
  margin-top: 15px;
  border-top: 1px solid #000;
  text-align: center;
}

    Explanation
    margin-top specifies just the top of the element to have a margin of 15 pixels.
    border-top uses a shorthand property list to set the border-width, border-style, and border-color in one declaration versus three.
    text-align sets the text alignment to center.

  8. Test your page locally in your browser often using the Live/Five Server extension in VS Code which renders the page in your default browser as a web page.
  9. Be sure to Save your work.

Help

Video Demonstration: ▶️ Home Page Enhancement – [ 10.00 minutess ]

Test, Fix, and Update

  1. Commit and Sync your changes to your GitHub Pages enabled wdd130 repository.
  2. Run this assignment's ✔ Page Audit tool to make sure your page meets the basic requirements.
  3. Fix any issues based upon the feedback.
  4. Remember that you will need to commit and sync your changes to your GitHub repository and re-run the Page Audit tool until your page passes all checks after making any updates/changes.

If you encounter any issues or are not sure how to fix an item listed as incorrect, please reach out for help on Microsoft Teams in the Week 02 Forum channel.

Submission

  1. Return to Canvas to submit your wdd130 GitHub Pages home page URL: 
    https://yourusername.github.io/wdd130

❌ Wrong submission: https://github.com/yourusername/wdd130

❌ Wrong submission: Anything starting with http://127.0.0.1