Skip to content

Week 8 Coding Practice

Purpose

Transform HTML through Cascading Style Sheets

Textbook Reference

  • Chapter 12: Formatting Text
  • Chapter 13: Colors and Backgrounds (pages 303-338)

Instructions

Directory Structure

  1. Download the practice08 and save it into your practice folder for this course.
  2. Open the webpage, index.html in VS Code, and the browser.
  3. Besides adding the link element to the HTML document, NO changes should be made to the HTML.

Add an External Stylesheet

The index.css stylesheet has been started already. Leave the styles for the <main> element in the stylesheet.

  1. Create a style that makes the <h1> text a different color.
  2. Create a style that makes the <h2> text a different color.
  3. Link the index.css stylesheet to the index.html.
  4. Make sure you can see your styles take effect on the webpage.

Format the Text

  1. The <body> element should use a sans-serif font-family.
  2. Center everything in the <header> element
  3. Using only one CSS rule, style the <h1>, <h2>, and <h3> elements in a serif font-family.
  4. Using only one CSS rule, apply some letter-spacing to the <h1>, <h2>, and <h3> elements.
  5. Increase the font-size of the navigation text.
  6. Remove the default underline from all links
  7. The links in the <main> element should appear in bold. Use CSS, not an HTML element. Hint: use a descendent selector to target only the appropriate links.
  8. Using only one CSS rule, increase the line-height of the paragraphs and list items.
  9. Change the bullet points in the unordered list to use a square.
  10. Center the footer text.

Add Color

The <h1> and <h2> should already have different colors applied to them.

  1. Change the color of the <h3> elements. Use a hex value for this.
  2. Change the background color of the <main> element - make sure this is light enough that the text is still legible. Use a hex value for this.
  3. Change the color of all the links to something different than the default blue.

Pseudo-class Selectors

  1. Change the color of the visited links. Use an RGB value.
  2. When links are hovered over by the mouse, they should change color and have a text-shadow. Use an RGB value.

Attribute Selector

  1. Using an attribute selector, change the background color of the <section> elements that contain the text, "door" in their id value, to white. Only one CSS rule is needed!

Background Image

  1. Apply the cactusBackground.jpg as a background image to the <body> element.

    • Keep the background color you applied earlier. Keeping a background-color style is needed if your image fails to load.

Sample Output

Sample Output

HTML Validation

  1. Go to https://validator.w3.org/
  2. Click on the Validate by File Upload
  3. Click on the Choose file button and navigate to the location of your HTML document.
  4. Click the Check button
  5. Print it as a PDF and save it into a folder named validations in your practice08 folder
    • Name the PDF indexValidation.pdf.

CSS Validation

  1. Go to https://jigsaw.w3.org/css-validator/
  2. Click on the by File Upload option
  3. Click on the Choose file button and navigate to the location of your CSS document.
  4. Click the Check button
  5. Print and save as a PDF and save the validation in a folder called validations in your practice08 folder
    • Name the PDF cssValidation.pdf

Grading Criteria

  • The correct file directory structure exists in the practice08 folder along with the HTML and CSS validation.
  • All course coding standards have been followed.
  • All text formatting follows practice instructions and is implemented correctly.
  • All color follows practice instructions and is implemented correctly.
  • All pseudo-class selectors follow practice instructions and is implemented correctly.
  • The background images is implemented correctly.
  • Reflection questions are answered honestly and thoroughly.

Submission

Part 1: Reflection

  1. Locate the submission link for Practice 8 in Brightspace (Module 2 > Week 8 > Week 8 Coding Practice).
  2. Copy the below text (there is a copy icon in the upper-right of the textarea) and paste it into the Comments section.
  3. Answer the questions in the Brightspace.
1. How are you doing? Are you encountering any issues preventing you from completing this week's assignments? What can I do to better support you this week?


2. What did you find particularly insightful this week?


3. What part of the learning or coding process did you find most challenging? How did you overcome it?


4. What questions (if any) do you have about the material covered this week?

5. Can you describe a situation where two or more CSS rules might conflict due to specificity? How does understanding the concept of specificity help you resolve or prevent such conflicts in your stylesheets?

Part 2: Upload .zip

  1. Compress your entire practice08 folder to a .zip (zipped) file.

  2. Do not zip the practice or Web Development folders. You should have the following files/folder in the zip file:

    • images (folder)
      • with images
    • stylesheets (folder)
      • index.css
    • validations (folder)
      • 1 HTML validation file
      • 1 CSS validation file
    • index.html

  3. Click on "Upload" to upload your .zip file or you can drag and drop it into the submission window.

  4. Click "Submit"