CSS: Web Page Layout - Usability and Accessibility

Seize the savings! Get 40% off 3 months of Coursera Plus and full access to thousands of courses.

CSS: Web Page Layout - Usability and Accessibility

This course is part of Full-Stack Web Development Specialization

Instructor: Professor Matthew Yee-King

Included with

Learn more

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

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

Defining accessibility 9 minutes
Screen reader 9 minutes
The business case for accessibility 15 minutes
Check your understanding: 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

Automatic accessibility testing 9 minutes
Rectifying accessibility issues 9 minutes
Check your understanding: Testing websites for accessibility and usability 15 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.

What's included

4 videos1 reading3 assignments2 ungraded labs

4 videos Total 18 minutes

Introduction: Advanced CSS 1 minute
CSS Variables an Custom Properties 8 minutes
CSS Transitions and Simple Animations 7 minutes
Course summary 2 minutes

1 reading Total 10 minutes

Modern CSS Cheat Sheet 10 minutes

3 assignments Total 50 minutes

Animation basics 5 minutes
Capstone: Apply advanced CSS 30 minutes
Check your understanding: Advanced CSS 15 minutes

2 ungraded labs Total 60 minutes

Add a colour theme using CSS variables 30 minutes
CSS transitions and animations 30 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Professor Matthew Yee-King

University of London

24 Courses 434,409 learners

Offered by

University of London

Explore more from Mobile and Web Development

Status: Free Trial
Scrimba
Learn Accessible Web Design
Course
Status: Free Trial
Packt
Styling with CSS – Layouts and Visual Design
Course
Status: Free Trial
EDUCBA
CSS: Design & Optimize Responsive Web Pages
Course
Coursera
Introduction to Accessible Web Development
Guided Project

Why people choose Coursera for their career

Felipe M.

Learner since 2018

"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."

Jennifer J.

Learner since 2020

"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."

Larry W.

Learner since 2021

"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Open new doors with Coursera Plus

Unlimited access to 10,000+ world-class courses, hands-on projects, and job-ready certificate programs - all included in your subscription

Learn more

Advance your career with an online degree

Earn a degree from world-class universities - 100% online

Explore degrees

Join over 3,400 global companies that choose Coursera for Business

Upskill your employees to excel in the digital economy

Learn more

Frequently asked questions

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.