Web Development Curriculum

Advanced HTML, CSS & Web Accessibility

1
Advanced HTML Structure
40 minutes

Master semantic HTML, forms, tables, and modern structural elements.

2
Advanced CSS Layouts
45 minutes

Explore Flexbox, Grid, and responsive design techniques.

3
Advanced CSS Effects
40 minutes

Learn animations, transforms, and modern visual effects.

4
Web Accessibility Fundamentals
45 minutes

Make websites usable for everyone with accessibility best practices.

5
Accessibility Implementation
40 minutes

Apply accessibility techniques to real projects and test for compliance.

Lesson 1: Advanced HTML Structure

Advanced HTML

Learning Objectives

  • Understand and use semantic HTML5 elements
  • Create accessible forms with proper validation
  • Build complex table structures
  • Implement microdata for SEO
Semantic HTML provides meaning to web content, making it more accessible and improving SEO.

Semantic HTML5 Elements

Modern HTML5 introduces elements that describe their meaning to browsers and developers:

<header><!-- Site or section header -->
<nav><!-- Navigation menu -->
<main><!-- Primary content -->
<article><!-- Self-contained content -->
<section><!-- Thematic grouping -->
<aside><!-- Side content -->
<footer><!-- Site or section footer -->
Header

Article Title

This is the main content area.

Footer

Advanced Forms

HTML5 introduced new input types and attributes for better user experience and validation:

<form id="user-form">
  <label for="email">Email:</label>
  <input type="email" id="email" required>

  <label for="birthdate">Birthdate:</label>
  <input type="date" id="birthdate">

  <label for="range">Volume:</label>
  <input type="range" id="range" min="0" max="100">

  <button type="submit">Submit</button>
</form>
Hands-On Activity

Create a Semantic Webpage

Build a simple webpage using at least 5 different semantic HTML5 elements. Include a header, navigation, main content area with articles, and a footer.

Pro Tip: Always use the most specific semantic element available. This improves accessibility and helps search engines understand your content.

Lesson 2: Advanced CSS Layouts

Advanced CSS

Learning Objectives

  • Master CSS Flexbox for 1D layouts
  • Implement CSS Grid for 2D layouts
  • Create responsive designs with media queries
  • Use modern layout techniques effectively
CSS Flexbox is designed for one-dimensional layouts, while CSS Grid excels at two-dimensional layouts.

Flexbox Fundamentals

Flexbox makes it easy to design flexible responsive layout structures.

/* Container properties */
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* Item properties */
.item {
  flex: 1;
  align-self: flex-start;
}

CSS Grid Basics

Grid is the most powerful layout system available in CSS.

/* Container properties */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}
Grid Item 1
Grid Item 2
Grid Item 3
Flex Item 1
Flex Item 2

Responsive Design with Media Queries

Media queries allow you to apply CSS rules based on device characteristics.

/* Mobile-first approach */
.container {
  padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
Hands-On Activity

Build a Responsive Layout

Create a webpage that uses Flexbox for a navigation bar and CSS Grid for the main content area. Make it responsive with media queries for mobile, tablet, and desktop views.

Pro Tip: Start with mobile styles first, then use min-width media queries to progressively enhance the layout for larger screens (mobile-first approach).

Lesson 3: Advanced CSS Effects

Advanced CSS 2

Learning Objectives

  • Create smooth CSS animations and transitions
  • Apply 2D and 3D transforms to elements
  • Use advanced visual effects like gradients and shadows
  • Implement modern CSS features like custom properties
CSS Transforms and Animations can create engaging user experiences without JavaScript.

CSS Transitions and Animations

Transitions allow property changes to occur smoothly over time, while animations provide more control over intermediate steps.

/* Transition example */
.button {
  background: #3498db;
  transition: background 0.3s ease, transform 0.2s;
}

.button:hover {
  background: #2980b9;
  transform: scale(1.05);
}

/* Animation example */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.slide-element {
  animation: slideIn 0.5s ease-out;
}

CSS Custom Properties (Variables)

Custom properties allow you to store and reuse values throughout your CSS.

/* Define custom properties */
:root {
  --primary-color: #3498db;
  --spacing-unit: 1rem;
  --border-radius: 8px;
}

/* Use custom properties */
.card {
  background: white;
  padding: var(--spacing-unit);
  border-radius: var(--border-radius);
  border: 2px solid var(--primary-color);
}
Hands-On Activity

Create an Animated Interface

Build a card component that uses CSS transitions for hover effects and a simple animation when the page loads. Use CSS custom properties to make the design easily customizable.

Lesson 4: Web Accessibility Fundamentals

Web Accessibility

Learning Objectives

  • Understand the importance of web accessibility
  • Learn WCAG guidelines and principles
  • Implement proper semantic structure for screen readers
  • Create keyboard-navigable interfaces
Web Accessibility ensures that people with disabilities can perceive, understand, navigate, and interact with the web.

WCAG Principles (POUR)

The Web Content Accessibility Guidelines are built on four principles:

Perceivable

Information and UI components must be presentable to users in ways they can perceive.

  • Text alternatives for non-text content
  • Captions and other alternatives for multimedia
  • Content that can be presented in different ways
  • Easy-to-see and -hear content

Operable

UI components and navigation must be operable by all users.

  • Keyboard accessibility
  • Enough time to read and use content
  • Content that does not cause seizures
  • Easy navigation

Understandable

Information and operation of UI must be understandable.

  • Readable and predictable text
  • Input assistance for forms
  • Consistent navigation

Robust

Content must be robust enough to work with current and future user tools.

  • Compatible with assistive technologies
  • Valid and well-structured HTML

Accessible HTML Practices

Proper HTML structure is the foundation of accessibility:

<!-- Use semantic elements -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

<!-- Provide text alternatives -->
<img src="chart.jpg" alt="Bar chart showing sales growth from 2018 to 2022">

<!-- Use proper form labels -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">
Hands-On Activity

Audit and Improve Accessibility

Take an existing webpage (or create a simple one) and identify at least 5 accessibility issues. Then fix those issues using proper semantic HTML, ARIA attributes, and accessibility best practices.

Lesson 5: Accessibility Implementation

Web Accessibility

Learning Objectives

  • Use ARIA attributes to enhance accessibility
  • Implement keyboard navigation and focus management
  • Test websites for accessibility compliance
  • Apply accessibility techniques to complex components
ARIA (Accessible Rich Internet Applications) provides attributes to make web content more accessible when native HTML isn't sufficient.

ARIA Attributes and Roles

ARIA helps communicate information about elements to assistive technologies:

<!-- ARIA roles -->
<div role="navigation" aria-label="Main menu">
  <!-- navigation content -->
</div>

<!-- ARIA states and properties -->
<button aria-expanded="false" aria-controls="dropdown1">
  Menu
</button>
<ul id="dropdown1" aria-hidden="true">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

<!-- ARIA live regions -->
<div aria-live="polite" aria-atomic="true">
  <!-- Dynamic content will be announced -->
</div>

Keyboard Accessibility

Ensure all interactive elements can be operated with a keyboard:

/* Focus styles */
button:focus,
a:focus,
input:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #e74c3c;
  color: white;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
}

.skip-link:focus {
  top: 6px;
}

Accessibility Testing

Several tools can help you test and improve accessibility:

  • Automated tools: axe, WAVE, Lighthouse
  • Screen readers: NVDA (Windows), VoiceOver (Mac)
  • Manual testing: Keyboard navigation, color contrast checkers
Hands-On Activity

Build an Accessible Component

Create an accessible modal dialog or tab component that includes proper ARIA attributes, keyboard navigation, and focus management. Test it with a screen reader and keyboard-only navigation.

Pro Tip: Remember the first rule of ARIA - don't use ARIA if you can use native HTML elements with the required semantics and behavior.