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
- Download the practice02.zip file.
- Unzip the practice02 file and move it to the practice folder you have for this class.
- In VS Code, open the practice02 folder
- Select the kitchen.html file
-
Open the Live Preview (Look for the image on the far-right side of VS Code)
-
Open the page in Browser (Look for the menu icon, then: “Open in Browser”)
Test the HTML
- Go to https://validator.w3.org/
- Select the Validate by File Upload tab
- Select the Choose File button and select the kitchen.html file from your practice02 folder
- Select Check
Save Results as a PDF:
- In Chrome, create a pdf file by printing the page as a pdf
- Windows Shortcut > CTRL + P
- Mac Shortcut > CMD + P
- Or select from the browser: File > Print
-
Change the destination to be Save as PDF
Test CSS
- Go to https://jigsaw.w3.org/css-validator/
- Select the By file upload tab
- Select Choose File and select the kitchen.css file from the styleSheets folder in your practice02 folder
- Select Check
- 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
- Install axe DevTools with this link: Axe Devtools link. You can also find the extension by Googling "axe DevTools"
-
Click Add to Chrome.
-
A pop-up box will as if you want to add the extension or cancel. Click Add extension.
-
A confirmation box may pop up letting you know it has been added, just close it to continue
-
Once installed, go to the upper right corner of Chrome Ellipsis > More Tools > Extensions.
-
In the list of extension, click Details
-
Toggle the “Allow access to file URLs” to ON
Run Accessibility Test
- Refresh the kitchen.html page in Chrome.
-
Open the Developer Tools and go the axe DevTools tab.
- You may need to click the >> arrows to see it
-
Click the “Scan ALL of my page” option shown below
-
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
- Go to https://www.webpagetest.org/
- In the Enter a website URL input, enter the URL for Madison College (https://madisoncollege.edu/)
- Open the Advanced Configuration toggle
- Set the Test Location to any location you would like to pick
- Set the Browser to any browser you would like to pick (this may be influenced by your selected
- Test Location)
- Leave all other options as they are and select Start Test ->
-
Let the site run the 3 tests (this may take a while)
-
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
- Locate the submission link for Practice 2 in Brightspace (Module 1 > Week 2 > Week 2 Coding Practice).
- Copy the below text (there is a copy icon in the upper-right of the textarea) and paste it into the Comments section.
- 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
- Compress your entire practice02 folder to a .zip (zipped) file.
-
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
-
Click on "Upload" to upload your .zip file or you can drag and drop it into the submission window.
- Click "Submit"