Skip to Content
Module Outline

HTML and CSS Review with Accessibility

Module Summary

This module provides a focused review of HTML and CSS, emphasizing the creation of responsive and accessible web pages. Learners will reinforce their understanding of core concepts, apply responsive design techniques, and explore best practices for web accessibility. Interactive and practical activities, including a guided asynchronous session on accessible web design, will enable learners to create web pages that are both user-friendly and inclusive. By the end of this module, learners will have demonstrated the ability to build well-structured, responsive, and accessible web pages.

Learning Objectives

By the end of this module, learners will be able to:

  • Create well-structured, responsive web pages using HTML and CSS.
  • Examine fundamental principles of accessible web design.
  • Implement accessibility features in HTML and CSS.
  • Develop well-structured, accessible, and responsive web pages.

Learning Outcomes

Upon completing this module, learners will be able to:

  • Construct web pages that adhere to semantic HTML and CSS best practices.
  • Design and implement responsive layouts using CSS techniques such as media queries.
  • Apply accessibility features, including ARIA roles and appropriate color contrast, to ensure inclusivity.
  • Debug and optimize web pages for both responsiveness and accessibility.

Module Outline

Lesson 1: HTML and CSS Review

  • Time: 2.5 hours
  • Topics:
    • Overview of semantic HTML and its significance.
    • CSS review: selectors, properties, and the box model.
    • Responsive web design principles: fluid grids, flexible images, and media queries.
  • Activities:
    • Code along: Building a basic responsive web page.
    • Hands-on: Implementing a responsive navigation menu.

Lesson 2: Flexbox, Grid, and DevTools

  • Time: 3 hours
  • Topics:
    • Advanced CSS techniques: Flexbox and CSS Grid.
    • Using developer tools to debug and optimize CSS.
  • Activities:
    • Workshop: Creating a responsive layout using Flexbox and Grid.
    • Pair programming: Debugging and refining layout code.

Lab: Interactive Accessibility Lesson

  • Time: 2 hours (asynchronous)
  • Content: Scrimba Accessible Web Design Course 
  • Focus:
    • Understanding web accessibility principles.
    • Implementing semantic HTML for improved accessibility.
    • Ensuring proper color contrast and text readability.
    • Creating accessible forms and interactive elements.
    • Using alt text and title attributes for improved accessibility.
    • Using ARIA roles and attributes for enhanced navigation.
  • Objective: Apply accessibility concepts to existing HTML and CSS code.

Lesson 3: Integrating Accessibility into Web Design

  • Time: 2.5 hours
  • Topics:
    • Review of asynchronous lab: Key takeaways and group discussion.
    • Advanced accessibility: Keyboard navigation and ARIA landmarks.
  • Activities:
    • Group discussion: Accessibility challenges and solutions.
    • Guided practice: Implementing accessible forms and interactive elements.

Final Assessments

Skills-Based Assessment (SBA)

  • Time: 3 hours
  • Format: Practical project
  • Activity: Build a well-structured, responsive, and accessible web page using HTML and CSS. The project must demonstrate effective use of semantic HTML, CSS for layout and styling, and best practices for web accessibility.
  • Deliverable: Submit the completed project via GitHub, including a brief explanation of accessibility features implemented.
Lesson 1: HTML and CSS Review