Skip to content

Week 2 Coding Practice

Purpose

Test the HTML, CSS, accessibility, and the performance of a web page/site.

Textbook Reference

Chapter 3: Some Big Concepts You Need to Know

Instructions

Create the Directory Structure

  1. Download the practice02.zip file.
  2. Unzip the practice02 file and move it to the practice folder you have for this class.
  3. In VS Code, open the practice02 folder
  4. Select the kitchen.html file

  5. Open the Live Preview (Look for the image on the far-right side of VS Code)

    live preview

  6. Open the page in Browser (Look for the menu icon, then: “Open in Browser”)

    open browser

Test the HTML

  1. Go to https://validator.w3.org/
  2. Select the Validate by File Upload tab
  3. Select the Choose File button and select the kitchen.html file from your practice02 folder
  4. Select Check

Save Results as a PDF:

  1. In Chrome, create a pdf file by printing the page as a pdf
  2. Windows Shortcut > CTRL + P
  3. Mac Shortcut > CMD + P
  4. Or select from the browser: File > Print

  5. Change the destination to be Save as PDF

    save as pdf

Test CSS

  1. Go to https://jigsaw.w3.org/css-validator/
  2. Select the By file upload tab
  3. Select Choose File and select the kitchen.css file from the styleSheets folder in your practice02 folder
  4. Select Check
  5. Save the results as a PDF (same as the HTML results) into your practice02 folder, naming the file cssResults.pdf

Test Accessibility

We will be using a Chrome extension, axe DevTools, to perform accessibility testing. If you are using a Madison College IT computer or laptop axe DevTools should already be installed for you.

Install the axe DevTools

  1. Install axe DevTools with this link: Axe Devtools link. You can also find the extension by Googling "axe DevTools"

  2. Click Add to Chrome.

    install axe

  3. A pop-up box will as if you want to add the extension or cancel. Click Add extension.

    confirm axe install

  4. A confirmation box may pop up letting you know it has been added, just close it to continue

  5. Once installed, go to the upper right corner of Chrome Ellipsis > More Tools > Extensions.

    chrome extension menu

  6. In the list of extension, click Details

    axe extension details

  7. Toggle the “Allow access to file URLs” to ON

    access to files is toggled on

Run Accessibility Test

  1. Refresh the kitchen.html page in Chrome.

  2. Open the Developer Tools and go the axe DevTools tab.

    1. You may need to click the >> arrows to see it

    axe web panel in dev tools

  3. Click the “Scan ALL of my page” option shown below

    axe scan button

  4. Take a Screenshot of the results and save them to your practice02 folder as a .png or .jpg. Name the file axeResults.

Test Site Performance

  1. Go to https://www.webpagetest.org/
  2. In the Enter a website URL input, enter the URL for Madison College (https://madisoncollege.edu/)
  3. Open the Advanced Configuration toggle
  4. Set the Test Location to any location you would like to pick
  5. Set the Browser to any browser you would like to pick (this may be influenced by your selected
  6. Test Location)
  7. Leave all other options as they are and select Start Test ->

  8. Let the site run the 3 tests (this may take a while)

    site performance check

  9. Save the report by printing it to a PDF to your practice02 folder, name the file performance.pdf

Grading Criteria

  • The correct file directory structure exists in the practice02 folder.
  • The HTML & CSS tests were successfully performed and the results are saved as a PDF.
  • The accessibility test was successfully performed with axe DevTools and the results are saved as a PNG.
  • The site performance was successfully performed and the results are saved as a PDF.
  • Reflection questions are answered honestly and thoroughly.

Submission

Part 1: Reflection

  1. Locate the submission link for Practice 2 in Brightspace (Module 1 > Week 2 > Week 2 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.

Weekly Reflections - Tip

You may find it helpful to copy and paste the questions below in word document, or other text editor, and writing your answers there before pasting them into 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 challenges (if any) did you encounter in your learning this week?


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


5. Are you planning on completing a Show & Tell this semester for an A or B grade? If so, what topic(s) do you think you'll choose to research?

Part 2: Upload .zip

  1. Compress your entire practice02 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)
    • styleSheets (folder)
    • kitchen.html
    • htmlResults.pdf
    • cssResults.pdf
    • axeResults.png
    • performance.pdf

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

  4. Click "Submit"