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

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

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

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

Creating Basic Web Layouts

Курс от University of California, Davis
Средний≈ 15.9 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

In this course, we’ll explore the history of layout on the web and techniques that have been used to create those layouts. You’ll practice using Flexbox CSS and gain an understanding of how Flexbox works to create layouts for web pages. We’ll practice using responsive web design and discuss the challenges of managing layouts across multiple screen sizes. You’ll learn specific techniques to build a responsive web page and practice using mobile first development. Lastly, you’ll apply the techniques learned in this course by using Flexbox properties to create a mini portfolio website and deploy it on GitHub.

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

Responsive Web DesignWeb DesignCascading Style Sheets (CSS)Web DevelopmentGitHubFront-End Web DevelopmentApplication DeploymentHTML and CSSUser Interface (UI) Design

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

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

01Layout on the Web23 материалов

Course Overview

Course IntroductionВидеоLearning GoalsОбсуждениеCourse Navigation and Safety StatementЧтение

Web Layout History

Module IntroductionВидео

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

William Mead

Lecturer

Creating Basic Web Layouts
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 15.9 ч

4 модулей

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

Субтитры: Арабский, Французский, Узбекский, Итальянский, Корейский, Индонезийский, Испанский, Японский, Казахский

Часть программы вашего университета
Web Layout History, Part 1Видео
Web Layout History, Part 2Видео
Web Layout History, Part 3Видео
Web Layout History, Part 4Видео
The Wax and the Wane of the WebЧтение

Box Model

Box Model FilesЧтениеBox Model, Part 1ВидеоBox Model, Part 2ВидеоBox Model, Part 3ВидеоBox Model, Part 4ВидеоBox Model (Optional)Обсуждение

Display Property Basics

Display Property Basics FilesЧтениеDisplay Property Basics, Part 1ВидеоDisplay Property Basics, Part 2ВидеоDisplay Property Basics, Part 3ВидеоDigging Into the Display Property: Box GenerationЧтениеDisplay Property Basics (Optional)Обсуждение

Review

Module 1 QuizЗаданиеModule 1 DiscussionОбсуждение
02Flexbox21 материалов

Flexbox, Part 1

Module IntroductionВидеоFlexbox, Part 1 FilesЧтениеFlexbox, Part 1.1ВидеоFlexbox, Part 1.2ВидеоFlexbox, Part 1.3ВидеоFlexbox, Part 1.4ВидеоFlexbox, Part 1.5ВидеоFlexbox, Part 1 (Optional)Обсуждение

Flexbox Challenge

Flexbox Challenge FilesЧтениеFlexbox Challenge 1 IntroВидеоFlexbox Challenge 1 Answer & Challenge 2 IntroВидеоFlexbox Challenge 2 Answer & Challenge 3 IntroВидеоFlexbox Challenge 3 Answer & Challenge 4 IntroВидеоFlexbox Challenge 4 Answer & Challenge 5 IntroВидео

Review

Module 2 QuizЗаданиеModule 2 DiscussionОбсуждение
03Responsive Web Design25 материалов

Responsive Design

Module IntroductionВидеоResponsive Design FilesЧтениеResponsive Design, Part 1ВидеоResponsive Design, Part 2ВидеоResponsive Design, Part 3ВидеоResponsive Design, Part 4ВидеоResponsive Design, Part 5ВидеоResponsive Design, Part 6ВидеоResponsive Design, Part 7ВидеоResponsive Design, Part 8ВидеоResponsive Design, Part 9ВидеоResponsive Design, Part 10ВидеоResponsive Design, Part 11ВидеоResponsive Design Historical ReadingsЧтениеResponsive Design (Optional)Обсуждение

Mobile First Response Example

Mobile First Response FilesЧтениеMobile First Responsive Example, Part 1ВидеоMobile First Responsive Example, Part 2ВидеоMobile First Responsive Example, Part 3ВидеоMobile First Responsive Example, Part 4ВидеоCommon Sense CSS Resets FileЧтение

Review

Module 3 QuizЗаданиеModule 3 DiscussionОбсуждение
04Example Project28 материалов

Flexbox, Part 2

Module IntroductionВидеоFlexbox, Part 2 FilesЧтениеFlexbox, Part 2.1ВидеоFlexbox, Part 2.2ВидеоFlexbox, Part 2.3ВидеоFlexbox, Part 2.4ВидеоFlexbox, Part 2.5ВидеоFlexbox, Part 2 (Optional)Обсуждение

Flexbox Challenge

Flexbox Challenge FilesЧтениеFlexbox Challenge 9 IntroВидеоFlexbox Challenge 9 Answer & Challenge 10 IntroВидеоFlexbox Challenge 10 Answer & Challenge 11 IntroВидеоFlexbox Challenge 11 Answer & Challenge 12 IntroВидеоFlexbox Challenge 12 Answer & Challenge 13 IntroВидео

Flexbox Layout Challenge

Flexbox Layout Challenge FilesЧтениеFlexbox Layout Challenges 1-3 IntroductionВидеоFlexbox Layout Challenge 1 AnswerВидеоFlexbox Layout Challenge 2 AnswerВидеоFlexbox Layout Challenge 3 AnswerВидеоMini Portfolio FilesЧтение

Review

Module 4 QuizЗаданиеModule 4 DiscussionОбсуждение

Summary

Course SummaryВидеоSelf-ReflectionОбсуждение
Flexbox Challenge 5 Answer & Challenge 6 IntroВидео
Flexbox Challenge 6 Answer & Challenge 7 IntroВидео
Flexbox Challenge 7 Answer & Challenge 8 IntroВидео
Flexbox Challenge 8 AnswerВидео
Flexbox Challenge (Optional)Обсуждение
Common Sense CSS ResetsВидео
Mobile First Responsive Example (Optional)Обсуждение
Flexbox Challenge 13 AnswerВидео
Flexbox Challenge (Optional)Обсуждение
Putting it all Together: Mini Portfolio ProjectВидео
Flexbox Layout Challenge (Optional)Обсуждение