CSS: Web Page Layout - Usability and Accessibility

This course is part of Full-Stack Web Development Specialization

Instructor: Professor Matthew Yee-King

Access provided by University of Western Australia

4 modules

Gain insight into a topic and learn the fundamentals.

Beginner level

Recommended experience

8 hours to complete

Flexible schedule

Learn at your own pace

4 modules

Gain insight into a topic and learn the fundamentals.

Beginner level

Recommended experience

8 hours to complete

Flexible schedule

Learn at your own pace

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

11 assignments¹

AI Graded see disclaimer

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is part of the Full-Stack Web Development Specialization

When you enroll in this course, you'll also be enrolled in this Specialization.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

There are 4 modules in this course

In this course, you will learn how to use CSS to control the appearance, layout and responsiveness of web pages. Through interactive, guided lab activities on Coursera, you will style existing HTML pages and build responsive layouts using modern techniques such as CSS Grid, ensuring your designs work well across a range of screen sizes and devices.

You will explore the principles of responsive and accessible design, learning what web accessibility means and why it matters for users, organisations and society. Using hands-on exercises, you will apply practical techniques to improve accessibility, including testing pages with assistive technologies and automated accessibility checking tools, then fixing common issues to meet recognised standards. The course also introduces advanced CSS features such as variables, selectors, transitions and animations. By applying these in guided labs, you will develop efficient, maintainable and accessible stylesheets that reflect current best practice in modern web design.

This week, you will begin working with CSS, the language that controls the look and layout of web pages. You’ll start by exploring the basics of CSS and how it applies styles to HTML, then practise using it to change colours, fonts, and spacing. Next, you’ll move on to CSS Grid, a powerful tool for creating responsive layouts that adapt to different screen sizes. By the end, you’ll understand how CSS works, how to structure responsive designs, and how to use grids effectively to create modern, professional web pages.

What's included

2 videos6 readings1 assignment3 ungraded labs

2 videos Total 4 minutes

Introduction to the CSS course 3 minutes
Introduction: Introduction to web page layout with CSS 1 minute

6 readings Total 65 minutes

Course structure and navigation 15 minutes
How to learn effectively on this course 15 minutes
Course syllabus 10 minutes
Model answer – Introduction to CSS 5 minutes
Model answer – CSS grids 10 minutes
Model answer – Responsive CSS and responsive grids 10 minutes

1 assignment Total 15 minutes

Check your understanding: Web page layout with CSS 15 minutes

3 ungraded labs Total 90 minutes

Intro to CSS lab 30 minutes
CSS grids 30 minutes
Responsive CSS 30 minutes

This week, you will learn what web accessibility means and why it is essential for inclusive design. You’ll start by exploring the definition of accessibility and see how assistive technologies, such as screen readers, help users navigate websites. Through guided labs, you’ll experience common accessibility challenges, such as visual impairments, and learn techniques to make your pages more usable for everyone. You’ll also examine the business case for accessibility, understanding its impact on user experience and organisational success. By the end, you’ll understand both the practical steps and the ethical and commercial reasons for making websites accessible.

What's included

3 videos2 readings4 assignments

3 videos Total 21 minutes

Introduction: Introduction to accessibility 1 minute
Definition of accessibility 11 minutes
Screen reader demo 9 minutes

2 readings Total 20 minutes

Activity – Screen readers 10 minutes
The business case for accessibility 10 minutes

4 assignments Total 48 minutes

Check your understanding: Accessibility 15 minutes
Defining accessibility 9 minutes
Screen reader 9 minutes
The business case for accessibility 15 minutes

This week, you will learn how to evaluate and improve the accessibility of websites. You’ll start by using automated tools to test for common accessibility issues, then explore practical steps to fix these problems. You’ll apply accessibility principles to real HTML examples, ensuring your pages meet standards for usability and inclusivity. By the end, you’ll be able to identify accessibility issues, correct them, and understand why accessibility is essential for ethical and professional web design.

What's included

3 videos3 assignments1 ungraded lab

3 videos Total 18 minutes

Introduction: Testing webs accessibility and usability 1 minute
Automatic accessibility testing 11 minutes
How to rectify accessibility issues 6 minutes

3 assignments Total 33 minutes

Check your understanding: Testing websites for accessibility and usability 15 minutes
Automatic accessibility testing 9 minutes
Rectifying accessibility issues 9 minutes

1 ungraded lab Total 30 minutes

Evaluating and improving website accessibility 30 minutes

This week, you’ll learn advanced CSS techniques to make your designs more dynamic and efficient. You’ll work with CSS variables for reusable themes, add transitions and simple animations, use advanced selectors and pseudo-elements, and explore modern layout tips. You’ll also cover performance best practices and optimise your CSS for accessibility. Finally, you’ll apply everything in a capstone project to create a polished, professional design.