Who is this course for?

This course is perfect for anyone who wants to learn how to design modern, responsive websites. It is ideal for beginners in web development, aspiring front-end developers, and those looking to enhance their web design skills. If you’re interested in creating websites that look great on any device, this course is for you.

How long does it take to complete the course?

The course consists of 8 hours of video content. Depending on your pace, you can expect to spend additional time working on the projects and exercises, which will help reinforce the concepts learned. Most students complete the course in a few days to a week, but you can go at your own pace.

Can I preview a course before enrolling?

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.

When will I have access to the lectures and assignments?

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.

What will I get when I enroll?

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.

When will I receive my Course Certificate?

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

Why can’t I audit this course?

This course is currently available only to learners who have paid or received financial aid, when available.

Is financial aid available?

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.

CSS Modern Responsive Web Design – Build 5 Websites

Gain next-level skills with Coursera Plus for $199 (regularly $399). Save now.

CSS Modern Responsive Web Design – Build 5 Websites

Instructor: Packt - Course Instructors

7 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

7 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

Master the CSS techniques needed to create modern, responsive web designs
Build a solid understanding of CSS Flexbox, Grid, and Float layout methods
Learn to design interactive, mobile-ready websites with JavaScript and CSS
Gain hands-on experience by creating five distinct websites from scratch

Skills you'll gain

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

There are 7 modules in this course

This course 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. This hands-on course is designed to guide you through the process of creating responsive websites using modern CSS techniques. You will learn to build five distinct websites from scratch, applying a variety of layout strategies such as CSS Flexbox, CSS Grid, and Float. With every step, you'll explore different methods of positioning elements, styling text, and creating interactive, user-friendly designs for both mobile and desktop devices. Throughout the course, you will start by learning the fundamentals of CSS, from setting up CSS files and selecting page elements to understanding the CSS Box Model and applying styles to text and images. As you move through the lessons, you will dive into more advanced topics, including building multi-column layouts, creating responsive navigation bars, and adding interactive features like smooth scrolling and collapsible menus. The course will also take you through the process of building five unique websites, giving you practical experience in applying CSS to real-world web design challenges. You will practice creating templates, designing responsive pages, and building fully functional websites with modern features that look great on any device. This course is perfect for anyone looking to build a solid foundation in web design and enhance their skills in creating modern, responsive websites. . Prior experience with HTML and CSS is recommended. By the end of the course, you will be able to create complex layouts using Flexbox and Grid, build responsive navigation, and integrate JavaScript features for a dynamic user experience.

In this module, we will introduce you to the basics of CSS and web design. You will learn how to set up your first CSS file and link it to an HTML document. By the end of this section, you will have a solid understanding of how CSS enhances the presentation of your web pages.

What's included

14 videos1 reading1 assignment

14 videosTotal 96 minutes

Introduction to Getting Started with CSS Web Design for a Beginner's Course1 minute
Adding CSS to Your HTML Page from CSS File6 minutes
How to Select Page Elements CSS HTML Page Element Selection6 minutes
Setting Colors for Text and Backgrounds with CSS Adding Images to Elements Color11 minutes
What Is the CSS Box Model and How to Set Border Margin Padding for Elements7 minutes
How to Apply CSS to Text Setting Font Styling Text Decoration and Transformation9 minutes
How to Set the Element Display Values and What Display None Does Versus Visibility Property6 minutes
CSS Position Method for HTML Page Element Absolute Relative Fixed Static8 minutes
How to Use Float to Set Images in Line with Text and Position Elements with CSS8 minutes
CSS Pseudo-Classes for Hover Effects and More; Create Interactive Content CSS8 minutes
Pseudo-Elements CSS Adding Content to Page Elements with CSS3 minutes
How to Create a Simple Template Using CSS Float Layout with CSS Three-Column Website6 minutes
Create a Three-column Website Layout with CSS Flexbox Simple Layout Design5 minutes
Modern Responsive Three-Column Website Template with CSS Grid Quick Layout Design4 minutes

1 readingTotal 10 minutes

Full Course Resources10 minutes

1 assignmentTotal 15 minutes

CSS Course Information - Assessment15 minutes

In this module, we will provide an overview of the course and introduce you to the essential tools and resources needed to start creating websites from scratch. You’ll learn how to set up your development environment and explore the core technologies that will power your web projects: HTML, CSS, and JavaScript. By the end of this section, you’ll be ready to begin building your own websites with confidence

What's included

2 videos1 assignment

In this module, we will guide you through the process of creating a modern, responsive single-page website using Float and CSS. You’ll learn how to set up your web development environment, create a website wireframe, and design a reusable grid structure. By the end of this section, you'll have the skills to develop a responsive website with a navigation bar, image gallery, contact form, and other essential sections.

What's included

17 videos1 assignment

17 videosTotal 108 minutes

Creating a Single-Page Float Website with a Grid Structure Using CSS3 minutes
Setting Up Your Web Development Environment6 minutes
Creating a Website Wireframe to Plan Your Site4 minutes
Adding the HTML Main Structure4 minutes
Updating HTML with Styles6 minutes
Creating a Responsive Navbar4 minutes
Creating a Mobile-Ready Responsive Navbar6 minutes
Adding More Content to Your Website's Top Section4 minutes
Creating a CSS Grid for Your Website Using Float10 minutes
Adding an Image Gallery8 minutes
Creating Content Areas – Multiple Columns Content Area10 minutes
Adding a Single Column to a Grid3 minutes
Creating a Contact Form Using CSS and HTML15 minutes
Adding Mailto to Your Contact Form3 minutes
Adding a Style to Your Website4 minutes
Adding and Moving Sections in a Single-Page Website3 minutes
Single-Page Website Review6 minutes

1 assignmentTotal 15 minutes

Modern Responsive Websites Using Float and CSS to Create Reusable Grids - Assessment15 minutes

In this module, we will guide you through the creation of a single-page website using Flexbox and JavaScript. You will learn how to set up a webpage with Flexbox, create a responsive navbar, design page cards, and integrate smooth scrolling with JavaScript. By the end of this section, you'll have the skills to build a modern, dynamic single-page website with a smooth, seamless user interface.

What's included

12 videos1 assignment

12 videosTotal 86 minutes

Single-Page Flexbox Website Introduction3 minutes
Flexbox Website: Setting Up a Webpage6 minutes
Creating Sections in a Single-Page Website Using Flexbox2 minutes
Creating a Navbar Using Flexbox6 minutes
Designing and Adding Content to the Home Screen Section5 minutes
Applying Your Own Custom Grid Columns with Flexbox7 minutes
Creating CSS Flexbox Page Cards with Flexbox12 minutes
Creating a CSS Form Using CSS Flexbox15 minutes
Creating a Footer5 minutes
Creating Smooth Scrolling Using JavaScript6 minutes
Adding Smooth Scrolling to Your Website Using JavaScript8 minutes
Single-Page Flexbox Website Review4 minutes

1 assignmentTotal 15 minutes

Single-Page Flexbox Website with Auto-scroll JavaScript - Assessment15 minutes

In this module, we will walk you through building a responsive website using CSS Grid. You’ll learn how to set up your design with CSS Grid, create a responsive navbar, and ensure it functions without JavaScript. By the end of this section, you will be able to build a fully responsive website with a collapsible navbar and a polished footer, all while mastering CSS Grid layout techniques.

What's included

9 videos1 assignment

9 videosTotal 65 minutes

CSS Grid Website Introduction2 minutes
Preparing Your Design – CSS Grid Setup4 minutes
Creating a Website – CSS Grid7 minutes
Creating a CSS Grid Responsive Navbar5 minutes
Adding a Responsive Navbar to Your Website12 minutes
Creating a Fully Responsive Collapsible Navbar6 minutes
Adding Placeholder Content15 minutes
Updating the Page Footer8 minutes
CSS Grid Website Review3 minutes

1 assignmentTotal 15 minutes

"No JavaScript" Checkbox – Responsive Navbar Website from Scratch in the CSS Grid Website Section - Assessment15 minutes

In this module, we will teach you how to build a fully responsive, mobile-ready website using CSS Float and JavaScript. You’ll learn how to set up a dynamic, collapsible navigation menu, add placeholder content, and optimize your website for a seamless user experience. By the end of this section, you’ll have the skills to create a modern, responsive website with an interactive, mobile-friendly navbar and smooth, functional layout.

What's included

12 videos1 assignment

12 videosTotal 82 minutes

Introduction: Responsive Float Website1 minute
Modern Website: Website Setup and Planning6 minutes
Creating a Modern Website: Set Up Main HTML5 minutes
Making a Responsive Navigation bar Using CSS Navbar Styling8 minutes
Making a Dynamic Collapse Menu Using Responsive CSS Navbar7 minutes
Mobile-Ready Navbar Menu Using Responsive CSS Navbar7 minutes
Adding JavaScript Select and Toggle to Your Navbar Menu Items8 minutes
Custom Dynamic Grid – Creating a Website and Column6 minutes
Adding Placeholder Content and Resources9 minutes
Best Resources for Web Design – Adding Placeholder Content7 minutes
Website Tweaks and Adjustments10 minutes
Float Responsive Website Review3 minutes

1 assignmentTotal 15 minutes

JavaScript Collapsible Menu – Mobile-Ready and Fully Responsive CSS Float Website - Assessment15 minutes

In this module, we will guide you through the creation of a complex, responsive navbar using CSS Flexbox. You will learn how to design mobile-first websites, implement multi-layered sub-menus, and integrate JavaScript for navbar interactivity. By the end of this section, you will be able to build a fully functional, interactive navbar with responsive sub-menus, making your websites both user-friendly and visually appealing.

What's included

10 videos3 assignments

10 videosTotal 70 minutes

Complex Responsive Navbar Introduction2 minutes
Website Planning and Setup for Modern Website Design – Flexbox5 minutes
Creating a Website by Applying CSS for Websites Using Flexbox9 minutes
Mobile-First Website Design: Creating a Responsive Navbar9 minutes
Mobile-First Design: Creating a Responsive Navbar with Menu Items4 minutes
Adding JavaScript: Creating an Interactive JavaScript Navbar Toggler8 minutes
More Complex Multiple Layer Menu with Sub-Menu Items: Adding Navbar Sub-Menu3 minutes
Responsive Navbar with Sub-Menu Items – Navbar Sub-Menu JavaScript3 minutes
Responsive Menu with Sub-Menu Items – Website Tweaks and Updates10 minutes
Complex Responsive Navbar Overview12 minutes

3 assignmentsTotal 90 minutes

CSS Flexbox Website with Responsive Navbar Sub-Menu Items - Assessment15 minutes
Full Course Assessment60 minutes
Full Course Practice Assessment15 minutes

Instructor

Packt - Course Instructors

Packt

1,299 Courses334,545 learners

Offered by

Packt

Explore more from Mobile and Web Development

Packt
Build 5 Responsive Websites with HTML, CSS, and JavaScript
Course
Packt
Build Real-World Websites Using HTML5, CSS3, Sass and more
Course
Status: Free Trial
Packt
Modern HTML & CSS From The Beginning 2.0
Specialization
Status: Free Trial
Packt
Advanced CSS & Responsive Web Design
Course

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."

Frequently asked questions

CSS Modern Responsive Web Design focuses on teaching students how to use CSS to create responsive, visually appealing websites. This is relevant because, in today’s digital world, it’s essential for websites to adapt seamlessly to different screen sizes, from desktops to smartphones. Understanding modern CSS techniques, including Flexbox, Grid, and responsive layouts, is crucial for any web developer aiming to create user-friendly and professional websites.

This course, CSS Modern Responsive Web Design - Create Five Different Websites, is designed to teach learners the fundamentals of CSS for building responsive web designs. It covers everything from styling HTML elements with CSS, creating multi-column layouts, and applying modern layout techniques using Flexbox and Grid, to integrating JavaScript for interactive features. By the end of the course, you will be able to build five different websites from scratch, all using modern, responsive web design principles.

After completing this course, you will be able to create fully responsive websites using CSS, from simple layouts to more complex designs like three-column layouts. You’ll also be skilled in using CSS Flexbox and Grid for layout control and will know how to integrate JavaScript for interactive elements like navigation bars and smooth scrolling. The course will give you the practical skills needed to design and implement modern, mobile-friendly websites.

This course is aimed at beginners, so no prior experience with CSS or web development is required. However, having a basic understanding of HTML is helpful, as the course builds on structuring web pages with HTML and applying CSS for styling. The course is designed to walk you through all the essentials, even if you’re starting from scratch.