Unit 3 Lab

This assignment will have you ensure your website is responsive and up to modern standards. Make sure to refer to the unit readings for helpful reference material as well as additional resources.

Description

Start by replacing any placeholder images with real (and relevant images)– keeping in mind what you learned about image optimization. Remember to write a short description of each image for its ‘alt’ attribute.

Update your site to ensure it is responsive– you may stick to raw HTML and CSS features, make use of the Bootstrap framework, or use a combination of the two. Test your site on at least 2 browsers by performing the following and ensuring your site responds appropriately without ‘breaking’:

1. Resize your browser windows across various widths and heights
2. Zoom your browser windows down to 50% and up to 400%
3. Use your browsers’ developer tools to simulate your site across various devices including:
   • at least one desktop/laptop or XL screen
   • at least two tablets or M-L screens
   • at least three mobile devices or XXS-S screens

Finish up any missing styling for your site. As you’re choosing colors, make sure your site has enough contrast– you can use the WAVE Browser Extension or TPGi’s Colour Contrast Analyzer.

Beyond being responsive, modern sites must be accessible. Perform some basic accessibility testing using your browsers’ built-in dev tools (refer to Unit 2 readings as needed) and any of our posted accessibility testing resources.

Create a document and include a screenshot or video link of each of the tests you perform across all of your pages, along with a brief caption explaining what test the screenshot is showing and whether you passed it on the first try or whether you had to perform any updates to get your site to work as intended. Then, write 1-2 paragraphs reflecting on the work you performed to make your site responsive and accessible. Your document should include at least 8 screenshots from your responsive testing and at least 5 screenshots from your accessibility testing.

Recorded Lecture

The lecture below provides additional information on making a website responsive with just CSS as well as with Bootstrap which you may find particularly useful for completing your assignment. However, if you feel comfortable with the material already, you may choose to skip watching this lecture. Copies of the completed vanilla CSS and Bootstrap code are available for download (you might have to right-click to save/download): Code using vanilla CSS | Code using Bootstrap.

What to Submit

Submit a single document with your screenshots, captions, and writeup. Remember all submissions are done through Canvas.

Requirements

1. Website looks complete
   1. No missing styling
   2. No placeholder images
   3. No evident layout oddities or discrepancies
2. Document includes at least 8 screenshots or video links from responsive testing across all site pages
3. Responsive testing screenshots demonstrate each of the tests in the assignment description
   1. At least two browsers tested
   2. Browser windows resizing: various widths
   3. Browser windows resizing: various heights
   4. Zoomed out to 50%
   5. Zoomed in to 400%
   6. Device simulation: Desktop/Laptop / XL screen
   7. Device simulation: Tablet / M-L screen
   8. Device simulation: Mobile / XXS-S screens
4. Document includes at least 5 screenshots or video link from accessibility testing across all site pages
5. Accessibility testing screenshots include
   1. Testing for sufficient color contrast across site
   2. Testing for missing image alts
6. Document includes a short caption for each screenshot
7. Each caption explains what test the screenshot is showing and whether the test was passed on the first try or whether updates were needed to get site to work as intended
8. Document includes overall reflection on updates performed