WDD 130: Web Fundamentals

W02: Enhancing Your Course Home Page

Overview

In this assignment you will apply the learning activity concepts to enhance your home page with HTML standards, CSS, and testing with the W3C validators.

Instructions

Learning Activity

If you have not completed the An Introduction to CSS learning activity, do so now or you will have difficulty following the instructions below.

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">

    Description
    "Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines" - MDN

    Author
    "Specifying an author is beneficial in many ways: it is useful to be able to understand who wrote the page, if you have any questions about the content and you would like to contact them. Some content management systems have facilities to automatically extract page author information and make it available for such purposes." - MDN

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 100kB 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
      Be sure to check the contrast ratio between your foreground and background colors. contrast-ratio.com
    Check Your Understanding - Example 
    aside {
  width: 20rem;
  margin: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.2); /* 1️⃣ */
  padding: 1rem;
  background-color: #eee;
  color: #333;
  text-align: center;
}

    1️⃣ The border color uses the rgba color method in order to take advantage of a subtle, transparent border effect. The RGBA value consists of four values: red, green, blue, and alpha. The first three values (0, 0, 0) represent black, and the last value (.2) 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. To not allow the existing img CSS selector to affect this new image, change the selector for the existing profile img to be more exclusive by adding the main parent selector. 
    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. Be sure to test your page locally often using the Live Server extension in VS Code. Remember that server tool will render the page in your default browser as a web page.

    You do not need to be on the internet to test your page locally when running it with Live Server.

  9. Save your work.

Video Demonstration: ▶️ Home Page Enhancement | (10.00 mins)

Testing

Submission

  1. Return to I-learn to submit your wdd130 GitHub Pages home page URL: 
    https://yourgithubusername.github.io/wdd130