Unit 3: Modern Development

Unit Essential Questions

You should use the questions below to assess your own learning and understanding of course material. These questions are also a good method of organization if you’re taking notes.

Image Optimization

  • What is image optimization?
  • What does optimizing the images on my site accomplish?

Responsive Design

  • What is responsive design?
  • Why is it important for a website to be responsive?
  • How can I check if my site is responsive?
  • What are some guidelines to ensure a site is responsive?

Bootstrap

  • What is Bootstrap?
  • What are some benefits of using Bootstrap?
  • How do I use Bootstrap?

Unit Readings

Image Optimization

Responsive Design

Bootstrap

SCSS

You may notice some unique-looking CSS as you explore Bootstrap and that’s because they use SASS— specifically SCSS— which extends CSS by offering cool features such as variables, nesting, and more. You can learn more about SCSS by reading What is the difference between SCSS and SASS and/or watching Sass in 100 Seconds

Bootstrap Versions

There are three versions of Bootstrap– to minimize the overhead of having to learn jQuery, we’ll be working with Bootstrap 5.

  • Bootstrap 3: Released in 2013, this was the original version of Bootstrap. It’s considered to be “the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes.”
  • Bootstrap 4: Released in 2018, this was the first major upgrade to Bootstrap. It included “new components, faster stylesheet and more responsiveness. However, Internet Explorer 9 and down is not supported.”
  • Bootstrap 5: Released in 2021, this is the newest version of Bootstrap. While Bootstrap 3 & 4 used jQuery, Bootstrap 5 has switched over to vanilla JavaScript (i.e., plain JavaScript). “Bootstrap 5 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 11 and down is not supported.”

Note: Bootstrap 3 and Bootstrap 4 is still supported by the team for critical bugfixes and documentation changes, and it is perfectly safe to continue to use them. However, new features will NOT be added to them.

Source: W3Schools

Unit 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

Additional Resources

HTML & CSS

Bootstrap

results matching ""

    No results matching ""