WDD 230 - Web Frontend Development I

06: Chamber Home - Responsive Images

Overview

Continue building the chamber home page.

Instructions

1. Review the feedback you received from your group, peers, teaching-assistant, instructor, and/or others and make corrections and updates to your existing work as needed.
2. Optimize all the images you are using on the page and any images you use going forward to help with the performance of the pages.
3. Make sure that images in the basic three level view port sizes do not violate their intrinsic aspect ratio.
4. Replace your hero image on the home page this week only with this large sized and heavy image: wdd230-org.jpg LARGE
   • Create three (3) versions of this image, optimizing them and modifying them to support the three, basic viewport sizes. Label each image with a text overlay using the words "small", "medium", and "large", respectively, so that they are easily recognized when testing the page in the different viewports.
   • Use the srcset to provide three different versions of the optimized image to be used in the small, medium, and large views.
5. Convert your logo image, wherever it is used, to the Google WebP image file format.
6. Add a wind chill value to the weather section on the home page. This means you have to have a current temperature and windspeed indicator in the weather section as well. The wind chill factor is a computed value using the current temperature and wind speed which values you will extract from the page using JavaScript. Create a "windchill.js" file and add it to your "scripts" folder. The "windchill.js" script should
   • get the two input values of temperature and wind speed,
   • check to make sure they meet the specification limits (<=50°F and >3.0mph) allowed to officially calculate the wind chill, and
   • either calculate and display the wind chill factor value or display "N/A" (not applicable) if the input values did not meet the requirements.
   💡Wind Chill Help

   It is recommended that you isolate the temperature and wind speed values in your HTML document for easy extraction. When you isolate a value, consider using the tag and do not include the unit labels in your spanned content.

   The formula to calculate the wind chill factor is
   where T_wc is the wind chill index in Fahrenheit, T_a is the air temperature in Fahrenheit, and v is the wind speed in miles per hour.

   Wind Chill Specification Limits: "Wind Chill Temperature is officially defined for temperatures at or below 10 °C (50 °F) and wind speeds above 4.8 kilometers per hour (3.0 mph)." - U.S. National Weather ServiceLinks to an external site.

   In the future, we will be getting live temperature and wind speed values from which we can plug into our wind chill function.

Testing

• Use this page audit tool.
• Validate your HTML and CSS.
• Test your page in the latest version of your browser in responsive mode using the Inspect Device Toolbar (Dev Tools).
• Use the network tab in the Dev Tools to verify that your images are being loaded responsively and the that total weight of the page is less than 500kb

Submission

1. Commit and push your work to your wdd230 GitHub Pages enabled repository.
2. Return to I-Learn to submit your course home page URL.