WDD 130 | W02 | Course Home Page Enhancement

W02: Enhancing Your Course Home Page

Overview

This assignment has you apply the concepts that you have learned from the learning activities to enhance the 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 be lost in the instructions.

HTML: Add <head> meta Elements

Open your course home page, index.html for editing.
Add two new meta tags to your head section, after the title and before the CSS external file link element. 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"

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>

In the body section, add an aside element after the existing main element and before the footer.

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.

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

Open the styles.css file for editing.
Add a CSS declaration to the main selector to limit its width for now.
Example
```
main {
  max-width: 840px;
}
```
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
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.
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?
Example
```
aside img {
  width: 200px;
  height: auto;
}
```
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;
  ...
}
```
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;}
```
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 the any text in the footer to the center of its content box.
Example
```
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.
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 with it running with Live Server.
Save your work.

Assignment Demonstration: 🎦 Home Page Enhancement

Testing

Every page in this course will be expected to pass the development standards checklist.
Review your rendered page and markup against this checked items.
Validate the HTML by running the Web Developer extension in your browser. Correct any errors.
Validate the CSS. Correct any errors that are reported.
Commit and sync your changes to your wdd130 GitHub Pages enabled repository.
Use this page evaluation tool to self check some of the basic requirements.

Submission

Return to I-learn to submit your wdd130 GitHub Pages URL:
```
https://githubusername.github.io/wdd130
```