К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
CSS Modern Responsive Web Design – Build 5 Websites · LearnSpace
Назад в каталог
courseraПрограммирование

CSS Modern Responsive Web Design – Build 5 Websites

Курс от Packt
Средний≈ 13.1 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

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.

Навыки, которые вы освоите

Hypertext Markup Language (HTML)TypographyWeb Development Tools

Программа курса

7 модулей · 91 учебных материалов

01CSS Course Information16 материалов

CSS Course Information

Introduction to Getting Started with CSS Web Design for a Beginner's CourseВидеоFull Course ResourcesЧтениеAdding CSS to Your HTML Page from CSS FileВидеоHow to Select Page Elements CSS HTML Page Element SelectionВидео

Учитесь у экспертов

Packt - Course Instructors

Преподаватель курса

CSS Modern Responsive Web Design – Build 5 Websites
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 13.1 ч

7 модулей

Язык: Английский

Часть программы вашего университета
Setting Colors for Text and Backgrounds with CSS Adding Images to Elements ColorВидео
What Is the CSS Box Model and How to Set Border Margin Padding for ElementsВидео
How to Apply CSS to Text Setting Font Styling Text Decoration and TransformationВидео
How to Set the Element Display Values and What Display None Does Versus Visibility PropertyВидео
CSS Position Method for HTML Page Element Absolute Relative Fixed StaticВидео
How to Use Float to Set Images in Line with Text and Position Elements with CSSВидео
CSS Pseudo-Classes for Hover Effects and More; Create Interactive Content CSSВидео
Pseudo-Elements CSS Adding Content to Page Elements with CSSВидео
How to Create a Simple Template Using CSS Float Layout with CSS Three-Column WebsiteВидео
Create a Three-column Website Layout with CSS Flexbox Simple Layout DesignВидео
Modern Responsive Three-Column Website Template with CSS Grid Quick Layout DesignВидео
CSS Course Information - AssessmentЗадание
02Creating Five Websites from Scratch Using Modern Web Design – HTML, CSS, JavaScript4 материалов

Creating Five Websites from Scratch Using Modern Web Design – HTML, CSS, JavaScript

IntroductionВидеоTools and Resources for the CourseВидеоUnderstanding Floats, Flexbox, and CSS Grid in Web DesignDIALOGUECreating Five Websites from Scratch Using Modern Web Design – HTML, CSS, JavaScript - AssessmentЗадание
03Modern Responsive Websites Using Float and CSS to Create Reusable Grids19 материалов

Modern Responsive Websites Using Float and CSS to Create Reusable Grids

Creating a Single-Page Float Website with a Grid Structure Using CSSВидеоSetting Up Your Web Development EnvironmentВидеоCreating a Website Wireframe to Plan Your SiteВидеоAdding the HTML Main StructureВидеоUpdating HTML with StylesВидеоCreating a Responsive NavbarВидеоCreating a Mobile-Ready Responsive NavbarВидеоAdding More Content to Your Website's Top SectionВидеоCreating a CSS Grid for Your Website Using FloatВидеоAdding an Image GalleryВидеоCreating Content Areas – Multiple Columns Content AreaВидеоAdding a Single Column to a GridВидеоCreating a Contact Form Using CSS and HTMLВидеоAdding Mailto to Your Contact FormВидеоAdding a Style to Your WebsiteВидеоAdding and Moving Sections in a Single-Page WebsiteВидеоSingle-Page Website ReviewВидеоCreating a Responsive Website Structure with CSS and HTMLDIALOGUEModern Responsive Websites Using Float and CSS to Create Reusable Grids - AssessmentЗадание
04Single-Page Flexbox Website with Auto-scroll JavaScript14 материалов

Single-Page Flexbox Website with Auto-scroll JavaScript

Single-Page Flexbox Website IntroductionВидеоFlexbox Website: Setting Up a WebpageВидеоCreating Sections in a Single-Page Website Using FlexboxВидеоCreating a Navbar Using FlexboxВидеоDesigning and Adding Content to the Home Screen SectionВидеоApplying Your Own Custom Grid Columns with FlexboxВидеоCreating CSS Flexbox Page Cards with FlexboxВидеоCreating a CSS Form Using CSS FlexboxВидеоCreating a FooterВидеоCreating Smooth Scrolling Using JavaScriptВидеоAdding Smooth Scrolling to Your Website Using JavaScriptВидеоSingle-Page Flexbox Website ReviewВидеоBuilding a Single Page Website with Flexbox and JavaScriptDIALOGUESingle-Page Flexbox Website with Auto-scroll JavaScript - AssessmentЗадание
05"No JavaScript" Checkbox – Responsive Navbar Website from Scratch in the CSS Grid Website Section11 материалов

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

CSS Grid Website IntroductionВидеоPreparing Your Design – CSS Grid SetupВидеоCreating a Website – CSS GridВидеоCreating a CSS Grid Responsive NavbarВидеоAdding a Responsive Navbar to Your WebsiteВидеоCreating a Fully Responsive Collapsible NavbarВидеоAdding Placeholder ContentВидеоUpdating the Page FooterВидеоCSS Grid Website ReviewВидеоBuilding a Responsive Website Layout with CSS GridDIALOGUE"No JavaScript" Checkbox – Responsive Navbar Website from Scratch in the CSS Grid Website Section - AssessmentЗадание
06JavaScript Collapsible Menu – Mobile-Ready and Fully Responsive CSS Float Website14 материалов

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

Introduction: Responsive Float WebsiteВидеоModern Website: Website Setup and PlanningВидеоCreating a Modern Website: Set Up Main HTMLВидеоMaking a Responsive Navigation bar Using CSS Navbar StylingВидеоMaking a Dynamic Collapse Menu Using Responsive CSS NavbarВидеоMobile-Ready Navbar Menu Using Responsive CSS NavbarВидеоAdding JavaScript Select and Toggle to Your Navbar Menu ItemsВидеоCustom Dynamic Grid – Creating a Website and ColumnВидеоAdding Placeholder Content and ResourcesВидеоBest Resources for Web Design – Adding Placeholder ContentВидеоWebsite Tweaks and AdjustmentsВидеоFloat Responsive Website ReviewВидеоBuilding a Responsive Navigation Bar and ColumnsDIALOGUEJavaScript Collapsible Menu – Mobile-Ready and Fully Responsive CSS Float Website - AssessmentЗадание
07CSS Flexbox Website with Responsive Navbar Sub-Menu Items13 материалов

CSS Flexbox Website with Responsive Navbar Sub-Menu Items

Complex Responsive Navbar IntroductionВидеоWebsite Planning and Setup for Modern Website Design – FlexboxВидеоCreating a Website by Applying CSS for Websites Using FlexboxВидеоMobile-First Website Design: Creating a Responsive NavbarВидеоMobile-First Design: Creating a Responsive Navbar with Menu ItemsВидеоAdding JavaScript: Creating an Interactive JavaScript Navbar TogglerВидеоMore Complex Multiple Layer Menu with Sub-Menu Items: Adding Navbar Sub-MenuВидеоResponsive Navbar with Sub-Menu Items – Navbar Sub-Menu JavaScriptВидеоResponsive Menu with Sub-Menu Items – Website Tweaks and UpdatesВидеоComplex Responsive Navbar OverviewВидеоCSS Flexbox Website with Responsive Navbar Sub-Menu Items - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание