VOOZH about

URL: https://www.coursera.org/learn/packt-css-modern-responsive-web-design-build-5-websites-04w6q

⇱ CSS Modern Responsive Web Design – Build 5 Websites | Coursera

CSS Modern Responsive Web Design – Build 5 Websites

Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

CSS Modern Responsive Web Design – Build 5 Websites

Included with

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

Details to know

Shareable certificate

Add to your LinkedIn profile

Recently updated!

January 2026

Assessments

9 assignments

Taught in English

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 videos•Total 96 minutes
  • Introduction to Getting Started with CSS Web Design for a Beginner's Course•2 minutes
  • Adding CSS to Your HTML Page from CSS File•7 minutes
  • How to Select Page Elements CSS HTML Page Element Selection•6 minutes
  • Setting Colors for Text and Backgrounds with CSS Adding Images to Elements Color•12 minutes
  • What Is the CSS Box Model and How to Set Border Margin Padding for Elements•7 minutes
  • How to Apply CSS to Text Setting Font Styling Text Decoration and Transformation•10 minutes
  • How to Set the Element Display Values and What Display None Does Versus Visibility Property•6 minutes
  • CSS Position Method for HTML Page Element Absolute Relative Fixed Static•9 minutes
  • How to Use Float to Set Images in Line with Text and Position Elements with CSS•8 minutes
  • CSS Pseudo-Classes for Hover Effects and More; Create Interactive Content CSS•9 minutes
  • Pseudo-Elements CSS Adding Content to Page Elements with CSS•4 minutes
  • How to Create a Simple Template Using CSS Float Layout with CSS Three-Column Website•7 minutes
  • Create a Three-column Website Layout with CSS Flexbox Simple Layout Design•6 minutes
  • Modern Responsive Three-Column Website Template with CSS Grid Quick Layout Design•4 minutes
1 reading•Total 10 minutes
  • Full Course Resources•10 minutes
1 assignment•Total 15 minutes
  • CSS Course Information - Assessment•15 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

2 videos•Total 14 minutes
  • Introduction•5 minutes
  • Tools and Resources for the Course•9 minutes
1 assignment•Total 15 minutes
  • Creating Five Websites from Scratch Using Modern Web Design – HTML, CSS, JavaScript - Assessment•15 minutes

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 videos•Total 108 minutes
  • Creating a Single-Page Float Website with a Grid Structure Using CSS•4 minutes
  • Setting Up Your Web Development Environment•6 minutes
  • Creating a Website Wireframe to Plan Your Site•4 minutes
  • Adding the HTML Main Structure•5 minutes
  • Updating HTML with Styles•7 minutes
  • Creating a Responsive Navbar•4 minutes
  • Creating a Mobile-Ready Responsive Navbar•7 minutes
  • Adding More Content to Your Website's Top Section•5 minutes
  • Creating a CSS Grid for Your Website Using Float•11 minutes
  • Adding an Image Gallery•9 minutes
  • Creating Content Areas – Multiple Columns Content Area•10 minutes
  • Adding a Single Column to a Grid•4 minutes
  • Creating a Contact Form Using CSS and HTML•15 minutes
  • Adding Mailto to Your Contact Form•4 minutes
  • Adding a Style to Your Website•5 minutes
  • Adding and Moving Sections in a Single-Page Website•3 minutes
  • Single-Page Website Review•7 minutes
1 assignment•Total 15 minutes
  • Modern Responsive Websites Using Float and CSS to Create Reusable Grids - Assessment•15 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 videos•Total 86 minutes
  • Single-Page Flexbox Website Introduction•4 minutes
  • Flexbox Website: Setting Up a Webpage•6 minutes
  • Creating Sections in a Single-Page Website Using Flexbox•2 minutes
  • Creating a Navbar Using Flexbox•7 minutes
  • Designing and Adding Content to the Home Screen Section•6 minutes
  • Applying Your Own Custom Grid Columns with Flexbox•8 minutes
  • Creating CSS Flexbox Page Cards with Flexbox•13 minutes
  • Creating a CSS Form Using CSS Flexbox•16 minutes
  • Creating a Footer•6 minutes
  • Creating Smooth Scrolling Using JavaScript•7 minutes
  • Adding Smooth Scrolling to Your Website Using JavaScript•9 minutes
  • Single-Page Flexbox Website Review•4 minutes
1 assignment•Total 15 minutes
  • Single-Page Flexbox Website with Auto-scroll JavaScript - Assessment•15 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 videos•Total 66 minutes
  • CSS Grid Website Introduction•3 minutes
  • Preparing Your Design – CSS Grid Setup•4 minutes
  • Creating a Website – CSS Grid•8 minutes
  • Creating a CSS Grid Responsive Navbar•6 minutes
  • Adding a Responsive Navbar to Your Website•12 minutes
  • Creating a Fully Responsive Collapsible Navbar•6 minutes
  • Adding Placeholder Content•15 minutes
  • Updating the Page Footer•9 minutes
  • CSS Grid Website Review•3 minutes
1 assignment•Total 15 minutes
  • "No JavaScript" Checkbox – Responsive Navbar Website from Scratch in the CSS Grid Website Section - Assessment•15 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 videos•Total 82 minutes
  • Introduction: Responsive Float Website•2 minutes
  • Modern Website: Website Setup and Planning•7 minutes
  • Creating a Modern Website: Set Up Main HTML•5 minutes
  • Making a Responsive Navigation bar Using CSS Navbar Styling•9 minutes
  • Making a Dynamic Collapse Menu Using Responsive CSS Navbar•8 minutes
  • Mobile-Ready Navbar Menu Using Responsive CSS Navbar•8 minutes
  • Adding JavaScript Select and Toggle to Your Navbar Menu Items•9 minutes
  • Custom Dynamic Grid – Creating a Website and Column•6 minutes
  • Adding Placeholder Content and Resources•9 minutes
  • Best Resources for Web Design – Adding Placeholder Content•7 minutes
  • Website Tweaks and Adjustments•10 minutes
  • Float Responsive Website Review•3 minutes
1 assignment•Total 15 minutes
  • JavaScript Collapsible Menu – Mobile-Ready and Fully Responsive CSS Float Website - Assessment•15 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 videos•Total 70 minutes
  • Complex Responsive Navbar Introduction•3 minutes
  • Website Planning and Setup for Modern Website Design – Flexbox•5 minutes
  • Creating a Website by Applying CSS for Websites Using Flexbox•9 minutes
  • Mobile-First Website Design: Creating a Responsive Navbar•9 minutes
  • Mobile-First Design: Creating a Responsive Navbar with Menu Items•5 minutes
  • Adding JavaScript: Creating an Interactive JavaScript Navbar Toggler•8 minutes
  • More Complex Multiple Layer Menu with Sub-Menu Items: Adding Navbar Sub-Menu•4 minutes
  • Responsive Navbar with Sub-Menu Items – Navbar Sub-Menu JavaScript•4 minutes
  • Responsive Menu with Sub-Menu Items – Website Tweaks and Updates•11 minutes
  • Complex Responsive Navbar Overview•12 minutes
3 assignments•Total 90 minutes
  • CSS Flexbox Website with Responsive Navbar Sub-Menu Items - Assessment•15 minutes
  • Full Course Assessment•60 minutes
  • Full Course Practice Assessment•15 minutes

Instructor

Offered by

Explore more from Mobile and Web Development

Why people choose Coursera for their career

👁 Image

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

Jennifer J.

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

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

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.

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.

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.

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.

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.

This course is currently available only to learners who have paid or received financial aid, when 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.

Financial aid available,