Advanced CSS & Responsive Web Design
Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Advanced CSS & Responsive Web Design
This course is part of Modern HTML & CSS From The Beginning 2.0 Specialization
Included with
Ask Coursera
Recommended experience
Recommended experience
What you'll learn
Learn how to use Flexbox and Grid for responsive layouts.
Master media queries and container queries for adaptive design.
Understand how to implement rem, em, and viewport units for typography.
Gain hands-on experience creating responsive web projects and forms.
Skills you'll gain
Details to know
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- 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 8 modules in this course
Updated in May 2025.
This course now features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. In this course, you’ll master advanced CSS techniques and responsive web design, enabling you to create modern, adaptive websites. By the end of the course, you'll be proficient in using Flexbox, CSS Grid, media queries, and container queries to build responsive layouts that adapt to various devices. You’ll also gain experience with rem, em, and viewport units for flexible typography and learn how to optimize your designs for mobile-first development. The course begins with foundational principles of responsive design, guiding you through layout flexibility using percentages and viewport units. You'll learn to implement responsive typography and effective media queries for device-specific styles. Next, you'll tackle practical projects like building a responsive pricing grid and a landing form, refining your skills with real-world challenges. Ideal for intermediate developers and designers, this course requires a basic understanding of HTML and CSS. By the end, you’ll have the confidence to design and implement responsive websites effectively.
In this module, we will explore the fundamentals of responsive design, guiding you through techniques such as flexible layouts, media queries, and responsive typography. You will learn to create adaptive and user-friendly designs across various devices and screen sizes, enhancing your web development skills.
What's included
10 videos2 readings1 assignment
10 videos•Total 69 minutes
- Section Intro•2 minutes
- What Is Responsive Design?•8 minutes
- Flexible Layouts & Percentages•7 minutes
- rem & em Units•13 minutes
- Viewport Units (vh & vw)•5 minutes
- Media Queries•11 minutes
- Responsive Pricing Grid•5 minutes
- Responsive Flexbox Layout•6 minutes
- Container Queries•8 minutes
- Container Units•5 minutes
2 readings•Total 20 minutes
- Introduction to the Course 'Advanced CSS & Responsive Web Design'•10 minutes
- Full Specialization Resources•10 minutes
1 assignment•Total 15 minutes
- Responsive Design - Assessment•15 minutes
In this module, we will guide you through building a responsive landing page with a form. You’ll learn to implement Flexbox for layout control, structure the HTML, and refine the design to be mobile-friendly using CSS techniques like media queries.
What's included
6 videos1 assignment
6 videos•Total 36 minutes
- Project Intro•2 minutes
- Setup & HTML•9 minutes
- Base CSS & Header Styles•7 minutes
- Main Content Flex & Alignment•4 minutes
- Inner Styles•7 minutes
- Mobile Layout & Media Queries•8 minutes
1 assignment•Total 15 minutes
- Landing Form Mini-Project - Assessment•15 minutes
In this module, we will cover various CSS features that elevate your designs. You’ll explore custom properties, vendor prefixes, filters, and the calc() function while learning how to enhance your website’s functionality and appearance with unique styling effects.
What's included
8 videos1 assignment
8 videos•Total 65 minutes
- Section Intro•2 minutes
- Custom Properties•11 minutes
- Vendor Prefixes•4 minutes
- Filters•7 minutes
- Smooth Scroll Mini-Project•11 minutes
- Sticky Nav & Style On Scroll•12 minutes
- calc() Function•6 minutes
- Nesting•12 minutes
1 assignment•Total 15 minutes
- Various CSS Features - Assessment•15 minutes
In this module, we will build the Lumina Creative website project from scratch. You’ll work through each stage, from the initial setup and header design to adding interactive features like the lightbox effect, while refining responsive design practices.
What's included
10 videos1 assignment
10 videos•Total 73 minutes
- Project Intro•4 minutes
- Setup & Base CSS•6 minutes
- Header & Navigation•10 minutes
- Hero Text•7 minutes
- Custom Properties•3 minutes
- Gallery Section Flexbox•8 minutes
- Footer•6 minutes
- About Page•9 minutes
- Contact Page•16 minutes
- Image Lightbox Effect•5 minutes
1 assignment•Total 15 minutes
- Lumina Creative Website Project - Assessment•15 minutes
In this module, we will teach you how to manage your projects with Git and GitHub, deploy websites to Netlify, and set up domain names for professional web hosting. You’ll also learn how to securely manage your website’s code and collaborate using version control.
What's included
7 videos1 assignment
7 videos•Total 39 minutes
- Section Intro•2 minutes
- Intro To Git & GitHub•9 minutes
- Generate SSH Keys•7 minutes
- Git Workflow & Commands•10 minutes
- Deploy Website To Netlify•4 minutes
- Contact Form Submission•4 minutes
- Connect & Configure a Domain Name•4 minutes
1 assignment•Total 15 minutes
- Git, GitHub & Web Hosting - Assessment•15 minutes
In this module, we will introduce you to web accessibility, helping you understand its significance for inclusive web design. You will learn how to test your website for accessibility, implement ARIA attributes, and ensure that your site is usable by all users.
What's included
7 videos1 assignment
7 videos•Total 60 minutes
- Section Intro•1 minute
- What Is Web Accessibility?•8 minutes
- Skilltide Browser Extension•5 minutes
- Screen Reader Testing•14 minutes
- Role Attribute•17 minutes
- ARIA Attributes•8 minutes
- Aria Expanded & Dynamic Elements•6 minutes
1 assignment•Total 15 minutes
- Web Accessibility Introduction - Assessment•15 minutes
In this module, we will dive into advanced CSS selectors, including pseudo-classes and pseudo-elements. You will learn how to create more dynamic and powerful styles using selectors like :before, :after, and new CSS functions for precise element targeting.
What's included
11 videos1 assignment
11 videos•Total 75 minutes
- Section Intro•2 minutes
- Attribute Selectors•7 minutes
- Child & Sibling Combinators•7 minutes
- Pseudo Elements•5 minutes
- Pseudo Classes - first-child, last-child & nth-child•5 minutes
- Pseudo Classes - first-of-type, last-of-type, nth-of-type•7 minutes
- before & after Pseudo Elements•6 minutes
- Image Overlay With :before•10 minutes
- is(), where() & has()•6 minutes
- Styling Forms•11 minutes
- Selectors Challenge•9 minutes
1 assignment•Total 15 minutes
- Advanced Selectors - Pseudo Classes & Elements - Assessment•15 minutes
In this module, we will explore CSS Grid in detail, showing you how to create flexible, responsive layouts. You’ll learn how to use grid functions, position items precisely, and combine CSS Grid with media queries to build adaptive web designs.
What's included
14 videos1 reading3 assignments
14 videos•Total 77 minutes
- Section Intro•2 minutes
- CSS Grid Overview•6 minutes
- Grid Columns & Gap•8 minutes
- repeat() & minmax()•4 minutes
- Grid Rows•5 minutes
- Grid Challenge 1•3 minutes
- Align & Justify Properties•5 minutes
- repeat() With autofit & autofill•6 minutes
- Positioning & Spanning Items•8 minutes
- Named Grid Lines•6 minutes
- Grid Challenge 2•4 minutes
- CSS Grid & Media Queries•5 minutes
- Grid Template Areas•7 minutes
- Lumina Creative Grid Refactor•7 minutes
1 reading•Total 10 minutes
- Conclusion to the Course 'Advanced CSS & Responsive Web Design'•10 minutes
3 assignments•Total 90 minutes
- CSS Grid - Assessment•15 minutes
- Full Course Assessment•60 minutes
- Full Course Practice Assessment•15 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
Explore more from Mobile and Web Development
- Status: Free TrialB
Board Infinity
Course
- Status: Free TrialU
University of Michigan
Course
Why people choose Coursera for their career
Frequently asked questions
Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.
If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.
Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.
More questions
Financial aid available,