Skip to content

Week 2 Learn & Practice - Big Concepts

Textbook

  • Chapter 3: Some Big Concepts You Need to Know

html banner

Coding Standards

Make sure to review our course coding standards in Brightspace! Your projects and exercises will be graded based on adherence to these rules.

Standards are important for the following reasons:

  • Foundation for professional web development
  • In place to build well-structured HTML and CSS
  • Each company may have its own list of standards
  • Helps to support responsive web design, accessibility, and site performance

Responsive Web Design

  • Regardless of screen size (viewport), the webpage will still be usable.
  • Custom layouts are used for different devices based on the size of the viewport.
  • Instead of having different websites for EACH type of device, only one site is created, and it changes the layout of the webpage based on the screen size.
  • Using well-structured HTML and CSS and following standards is paramount in being able to create responsive websites!
  • You will learn more about how to create responsive designs in the Advanced CSS course, but if you would like to read more about it, this is a great introduction:
  • A List Apart: Responsive Web Design (2010) https://alistapart.com/article/responsive-web-design

View a Responsive Website

  1. Go to https://madisoncollege.edu and https://www.apple.com
  2. Change the size of the browser window.
    • Notice how the layout, especially the navigation changes based on the browser size.

Web Accessibility

Failing to make any service accessible is a form of discrimination, and access to web content is a basic human right. Websites must be available and usable by all regardless of their ability. Accessibility allows anyone to perceive, understand, interact, navigate, and contribute to web content. Generally, there are four categories of impairment:

  • Visual
  • Motor
  • Auditory
  • Cognitive

The W3C (World Wide Web Consortium)

The W3C is the main international governing body for the world wide web and web accessibility. They began the Web Accessibility Initiative (WAI), who has published the Web Content Accessibility Guidelines (WCAG), typically pronounced “W-Cag” or “Wee-Cag”.

You will be learning about these guidelines in more detail in the UI/UX for Developers course, but it's a good idea to be aware of these principles early. For now, following the Coding Standards for this course will help build a foundation for creating accessible websites.

Section 508

In 1973 the Rehabilitation Act was the first major legislative effort to secure an equal playing field for people with disabilities. Sections 504 and 508 impact web design. Section 508 defines the minimum level of web accessibility for websites developed or used by the federal government.

Accessibility Tools

There are many free tools available that can aid developers in checking for any accessibility violations. Axe is a Chrome plugin that is already installed on your Madison College Computers.

Run An Accessibility Test

  1. Open Chrome and go to https://www.deque.com/axe
  2. Click the button labeled, Install free Chrome extension
  3. Go to the Madison College homepage.
  4. Open the Chrome Developer Tools by hitting F12 on your keyboard.
  5. Click on the Axe tab (far right of the Dev Tools).
    • You may have to click on the double right arrow (>>) to see it.

  6. Click the Analyze button. What issues do you see?

    axe dev tool

Site Performance

How long are you willing to wait for a website to load? Is your patience threshold different for mobile websites compared to desktop websites?

Two Main Categories to Improve Web Performance

  1. Limiting File Size
    • Optimize images
    • Minimize HTML and CSS documents (minifying)
    • Keep JavaScript to minimum
    • Don't load unnecessary assets (images, scripts)
  2. Reducing requests to the server
    • Each trip to the server (HTTP request) costs time.
    • Although each trip only takes milliseconds, they add up

Run a Performance Test

Test the Performance of the Madison College website

Using the Developer Tools

  1. Go to https://madisoncollege.edu
  2. Open the Developer Tools by pressing F12
  3. Click on the Performance tab
  4. Click on the Reload button to run a performance test

Using a Site Testing Tool

  1. Go to https://www.webpagetest.org
  2. Enter https://madisoncollege.edu into the search bar.
  3. Click Start Test ->

Why do you think it runs three tests? What could Madison College do to improve its performance?