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

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

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

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

Mobile & Responsive Design

Курс от Coursera
Уровень не указан≈ 16.5 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

Learn how to design and build mobile experiences that adapt seamlessly across devices. In this course, you’ll explore the foundations of responsive web design, including how to implement fluid grid layouts, apply the mobile-first design principle, and ensure images and videos scale correctly within flexible layouts. You’ll also learn how CSS media queries allow interfaces to adjust to different device breakpoints. As you progress, you’ll use a web development environment to build and test responsive webpages with HTML and CSS while also working in Figma to design mobile interfaces. You’ll create low-fidelity wireframes and clickable prototypes that demonstrate user flows for mobile features, then apply platform conventions and design system components to develop high-fidelity mobile UI mockups. This multi-author experience brings together perspectives from multiple instructors, exposing you to a range of practical approaches to responsive and mobile design workflows. Ideal for aspiring UX designers, UI designers, and web developers who want to build skills in creating responsive, mobile-first digital experiences.

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

User Interface (UI)HTML and CSSUser Interface (UI) DesignWeb Design and DevelopmentUI ComponentsUser Interface and User Experience (UI/UX) DesignUser Experience DesignResponsive Web DesignMockupsWeb DesignDesign Elements And PrinciplesFigma (Design Software)PrototypingWireframingCascading Style Sheets (CSS)Hypertext Markup Language (HTML)Style Guides

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

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

01Start Here: Get Oriented and Check Your Skills2 материалов
Start Here: How This Skill-Based Course WorksЧтениеSkill Diagnostic: Find Your Recommended Starting PointЗадание
02Implementing Responsive Design Using CSS37 материалов

Responsive Design Principles

Introduction: Implementing Responsive Design Using CSSВидео

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

Professionals from the Industry

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

Mobile & Responsive Design
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 16.5 ч

7 модулей

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

Субтитры: Арабский, Французский, Узбекский, Украинский, Китайский (Китай), Греческий, Итальянский, Бразильский португальский, Вьетнамский, Нидерландский, Корейский, Немецкий, Пушту, Русский, Тайский, Индонезийский, Шведский, Турецкий, Азербайджанский, Испанский, Дари, Хинди, Японский, Казахский, Венгерский, Польский

Часть программы вашего университета
Responsive DesignВидео
Describe the Key Benefits of Implementing Responsive DesignВидео
Differences Between Responsive and Adaptive Design ApproachesВидео
Responsive Design PrinciplesЧтение
Practice Quiz: Responsive Design PrinciplesЗадание

Mastering Media Queries for Responsive Design

Media QueriesВидеоCommon Use Cases for Media QueriesВидеоBest Practices for Writing Media QueriesВидеоMastering Media Queries for Responsive DesignЧтениеCreating a Responsive Webpage Using Media QueriesВидеоGuided Lab: Creating a Responsive Webpage Using Media QueriesPLUGINYou Try It! Creating a Responsive Webpage Using Media QueriesЛабораторнаяYou Try It! Creating a Responsive Webpage Using Media Queries - Answer KeyЧтениеPractice Quiz: Mastering Media Queries for Responsive DesignЗадание

Techniques for Building Responsive Layouts

Using Flexbox for Responsive DesignВидеоUsing Flexbox for Responsive DesignЧтениеUsing CSS Grid for Responsive DesignВидеоUsing CSS Grid for Responsive DesignЧтениеCombining Flexbox and Grid for Complex LayoutsВидеоBuilding Responsive Layouts with Flexbox and GridВидеоGuided Lab: Building Responsive Layouts with Flexbox and GridPLUGINYou Try It! Building Responsive Layouts with Flexbox and GridЛабораторнаяYou Try It! Building Responsive Layouts with Flexbox and Grid - Answer KeyЧтениеPractice Quiz: Techniques for Building Responsive LayoutsЗадание

Principles of Mobile-First Design

What is Mobile-First Design?ВидеоBenefits of Mobile-First DesignВидеоImplementing Mobile-First Design in PracticeВидеоPrinciples of Mobile-First DesignЧтениеPractice Quiz: Principles of Mobile-First DesignЗадание

Testing and Validating Responsive Designs

Tools for Testing Responsive DesignВидеоBest Practices for Responsive TestingВидеоDocumenting and Addressing Responsive IssuesВидеоTesting and Validating Responsive DesignsЧтениеActivity: Test Responsive LayoutsЗаданиеPractice Quiz: Testing and Validating Responsive DesignsЗаданиеConclusion: Implementing Responsive Design Using CSSВидео
03Skills Assessment 13 материалов

Lesson

Practice for Responsive Design Best PracticesЗаданиеLearner Expectations for AssessmentЧтениеCheckpoint 1 of 3 - Responsive Design Best PracticesЗадание
04Wireframing Fundamentals with Figma19 материалов

Getting Started with Figma Wireframes

Introduction to Figma Interface ВидеоFigma Basics: Frames, Shapes, and Components ВидеоWorking with Grids in FigmaВидеоUnderstanding Wireframes and Their TypesВидеоReading: Figma Tips and Shortcuts for Beginners PLUGINDemo Video: Getting Started with Figma ВидеоReading: Figma Basics for Beginners PLUGINLab: Setting Up a Wireframe in Figma PLUGINPractice Quiz: Getting Started with Figma WireframesЗадание

Effective Wireframing Practices

Creating and Digitizing Paper WireframesВидеоLow-Fidelity Wireframing in FigmaВидеоLab: Create a Low-Fi Wireframe for a Mobile AppPLUGINIntroduction to Gestalt PrinciplesВидеоApplying Gestalt Principles in UX/UI DesignВидеоHow Gestalt Principles Improve UXPLUGIN

Glossary

Glossary: Wireframing Fundamentals with Figma PLUGIN
05Skills Assessment 23 материалов

Lesson

Practice for Quick Transfer Flow PrototypingЗаданиеLearner Expectations for AssessmentЧтениеCheckpoint 2 of 3 - Quick Transfer Flow PrototypingЗадание
06UI Patterns and Design Systems19 материалов

UI Elements and Design Patterns

UI Components and Design Patterns in Mobile and Web ВидеоBest Practices for UI Layouts ВидеоIntroduction to Design Systems ВидеоCreating a Moodboard and Style Guide ВидеоLab: Creating a Style Guide in FigmaPLUGINReading: Common Mobile and Web UI Patterns PLUGINBuilding a Component Library in Figma ВидеоReading: The Role of Design Systems in UX PLUGINLab: Hi-Fidelity Design Using a Style GuidePLUGINPractice Quiz: UI Elements and Design PatternsЗадание

Responsive and Adaptive UI Design

Designing for Different Screen Sizes ВидеоBreakpoints and Fluid Layouts in UI ВидеоCross-Device UI Considerations ВидеоMobile-First Design Strategy ВидеоAccessibility in Responsive UI ВидеоLab: Adaptive UI Design (Design a Web-to-Mobile Adaptive UI Layout)PLUGIN

Glossary

Glossary: UI Patterns and Design Systems PLUGIN
07Skills Assessment 33 материалов

Lesson

Practice for Cross-Platform UI Pattern ApplicationЗаданиеLearner Expectations for AssessmentЧтениеCheckpoint 3 of 3 - Cross-Platform UI Pattern ApplicationЗадание
Lab: Enhancing Wireframes Using Gestalt PrinciplesPLUGIN
Reading: When to Use Paper, Low-Fi, and Mid-Fi Wireframes PLUGIN
Practice Quiz: Effective Wireframing PracticesЗадание
Reading: Material Design Guidelines PLUGIN
Practice Quiz: Responsive and Adaptive UI DesignЗадание