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

Acquérir des compétences de haut niveau avec Coursera Plus pour 199 $ (régulièrement 399 $). Économisez maintenant.

Ce cours n'est pas disponible en Français (France)

Nous sommes actuellement en train de le traduire dans plus de langues.

CSS Modern Responsive Web Design – Build 5 Websites

Instructeur : Packt - Course Instructors

7 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

niveau Intermédiaire

Expérience recommandée

1 semaine à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

7 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

niveau Intermédiaire

Expérience recommandée

1 semaine à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

Ce que vous apprendrez

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

Compétences que vous acquerrez

Catégorie : Web Development Tools
Catégorie : Typography

Détails à connaître

Certificat partageable

Ajouter à votre profil LinkedIn

Récemment mis à jour !

janvier 2026

Évaluations

9 devoirs

Enseigné en Anglais

Découvrez comment les employés des entreprises prestigieuses maîtrisent des compétences recherchées

En savoir plus sur Coursera pour les affaires

logos de Petrobras, TATA, Danone, Capgemini, P&G et L'Oreal

Il y a 7 modules dans ce cours

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.

Inclus

14 vidéos1 lecture1 devoir

14 vidéosTotal 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 lectureTotal 10 minutes

Full Course Resources10 minutes

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

Inclus

2 vidéos1 devoir

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.

Inclus

17 vidéos1 devoir

17 vidéosTotal 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 devoirTotal 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.

Inclus

12 vidéos1 devoir

12 vidéosTotal 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 devoirTotal 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.

Inclus

9 vidéos1 devoir

9 vidéosTotal 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 devoirTotal 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.

Inclus

12 vidéos1 devoir

12 vidéosTotal 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 devoirTotal 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.

Inclus

10 vidéos3 devoirs

10 vidéosTotal 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 devoirsTotal 90 minutes

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

Instructeur

Packt - Course Instructors

Packt

1 299 Cours334 545 apprenants

Offert par

Packt

En savoir plus sur Mobile and Web Development

Packt
Build 5 Responsive Websites with HTML, CSS, and JavaScript
Cours
Packt
Build Real-World Websites Using HTML5, CSS3, Sass and more
Cours
Statut : Essai gratuit
Packt
Modern HTML & CSS From The Beginning 2.0
Spécialisation
Statut : Essai gratuit
Packt
Advanced CSS & Responsive Web Design
Cours

Pour quelles raisons les étudiants sur Coursera nous choisissent-ils pour leur carrière ?

Felipe M.

Étudiant(e) depuis 2018

’Pouvoir suivre des cours à mon rythme à été une expérience extraordinaire. Je peux apprendre chaque fois que mon emploi du temps me le permet et en fonction de mon humeur.’

Jennifer J.

Étudiant(e) depuis 2020

’J'ai directement appliqué les concepts et les compétences que j'ai appris de mes cours à un nouveau projet passionnant au travail.’

Larry W.

Étudiant(e) depuis 2021

’Lorsque j'ai besoin de cours sur des sujets que mon université ne propose pas, Coursera est l'un des meilleurs endroits où se rendre.’

Chaitanya A.

’Apprendre, ce n'est pas seulement s'améliorer dans son travail : c'est bien plus que cela. Coursera me permet d'apprendre sans limites.’

Ouvrez de nouvelles portes avec Coursera Plus

Accès illimité à 10,000+ cours de niveau international, projets pratiques et programmes de certification prêts à l'emploi - tous inclus dans votre abonnement.

Faites progresser votre carrière avec un diplôme en ligne

Obtenez un diplôme auprès d’universités de renommée mondiale - 100 % en ligne

Découvrir les diplômes

Rejoignez plus de 3 400 entreprises mondiales qui ont choisi Coursera pour les affaires

Améliorez les compétences de vos employés pour exceller dans l’économie numérique

Foire Aux 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.