Skip to content

Week 7 Coding Practice

Purpose

Practice writing a few CSS rules and connect an external stylesheet

Textbook Reference

Chapter 11: Introduction to CSS

Instructions

Directory Structure

  1. Download the practice07 and save it into your practice folder for this course.
  2. Open the webpage, index.html in VS Code, and the browser.

External Stylesheet

  1. Create a main.css stylesheet and save this into the styleSheets directory of your practice07 website
  2. Link the main.css stylesheet to the index.html and gustaveEiffel.html documents.
  3. Create a style that makes the <h1> text a different color.
  4. Create a style that makes the <h2> text a different color.
  5. Add at least three additional styles to the web site! Make sure you can see all your styles take effect on the webpage. You may choose what styles to add, or what elements to target, if you take these into consideration
    • Do not use the h1 or h2 selector from steps 3 and 4 above
    • Do not change more font colors – unless you are writing more than 3 new rules
    • Try new things!
  1. On the gustaveEiffel.html, make the "Back to Homepage" an image. An image has already been provided for you, but you can use one of your choosing.

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 practice07 folder
    • Name the PDF gustaveEiffelValidation.pdf.
  6. Repeat this process for the index.html file
    • 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 practice07 folder
    • Name the PDF cssValidation.pdf

Grading Criteria

  • The correct file directory structure exists in the practice07 folder along with the HTML and CSS validation.
  • All course coding standards have been followed.
  • The <h1> and <h2> elements have different color styles.
  • At least three additional styles have been added to the website.
  • An image has been used as a link back to the index.html page.
  • Reflection questions are answered honestly and thoroughly.

Submission

Part 1: Reflection

  1. Locate the submission link for Practice 7 in Brightspace (Module 2 > Week 7 > Week 7 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. How does the DOM structure affect how CSS styles are applied to elements on a web page?

Part 2: Upload .zip

  1. Compress your entire practice07 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)
      • main.css
    • validations (folder)
      • 2 HTML validation files
      • 1 css validation file
    • index.html
    • gustaveEiffel.html

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

  4. Click "Submit"