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

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

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

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

HTML and CSS in depth

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

О курсе

In this course, you’ll use software development tools like HTML to build attractive web pages that work well—and you’ll use structured semantic data to control how websites appear to the end user. You will then dive deeper into CSS by applying increasingly specific styling to various elements. You’ll learn to use Bootstrap’s grid system to create layouts and work with components and themes. Finally, you’ll explore debugging and learn how it can be utilized to banish common front-end errors. By the end of this course you will be able to: • Create a simple form with a responsive layout using HTML5 and CSS • Create a responsive layout using CSS • Create a UI using Bootstrap • Implement debugging tools This is a beginner course for learners who would like to prepare themselves for a career in front-end development. To succeed in this course, you do not need prior development experience, only basic internet navigation skills and an eagerness to get started with coding.

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

Cascading Style Sheets (CSS)DebuggingHypertext Markup Language (HTML)Data ValidationJavascriptServer SideWeb DesignWeb Development ToolsSemantic WebResponsive Web DesignWeb Analytics and SEOBrowser CompatibilityUI ComponentsAnimationsHTML and CSSFront-End Web DevelopmentBootstrap (Front-End Framework)

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

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

01HTML in depth61 материалов

Course Introduction

Introduction to the ProgramВидеоIntroduction to HTML and CSS in depthВидеоCourse syllabusЧтениеHow are HTML and CSS used in the real world?Видео

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

Taught by Meta Experts

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

HTML and CSS in depth
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 32.1 ч

3 модулей

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

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

Часть программы вашего университета
Understanding HTML and CSS in Real Web DevelopmentDIALOGUE
How to be successful in this courseЧтение
Recap: What you know about HTML and CSSВидео
Working with labs in this courseЧтение

Semantic and Meta Tags

Semantic tags and why we need themВидеоSemantic HTML cheat sheetЧтениеSemantic tags in actionВидеоKnowledge check: Practice using semantic tagsЗаданиеMetadataВидеоMetadata cheat sheetЧтениеBare bones layoutВидеоKnowledge check: MetadataЗаданиеLayout designЧтениеUX with meta tagsВидеоSocial media cardsЧтениеSetting up a social media cardВидеоKnowledge check: Open Graph ProtocolЗаданиеKnowledge check: Semantic and meta tagsЗаданиеAdditional resourcesЧтениеSemantic HTML: Enhancing Web Page Accessibility and StructureЛабораторная

User Input and Forms

Forms and validationВидеоInput typesЧтениеCreating a formВидеоIdentifying input typesDIALOGUEMaking the most of client-side validationВидеоVisual Studio Code on CourseraЧтениеCreate and test a formЛабораторнаяCreate and test a form (solution)ЧтениеSelf review: Create and test a formЗаданиеRadio buttonsВидеоCheat sheet: Interactive form elementsЧтениеUsing interactive form elementsВидеоKnowledge check: Declaring form elementsЗаданиеForm submissionВидеоSubmitЧтениеKnowledge check: Form submissionЗаданиеBrowser differencesВидеоGlossary: HTML form elementsЧтениеCreate a complex formЛабораторнаяCreate a complex form (solution)ЧтениеSelf-review: Create a complex formЗаданиеKnowledge check: User input and formsЗаданиеAdditional resourcesЧтение

Media Elements

Video and audioВидеоEmbedded playersВидеоRate the mediaЛабораторнаяRate the media (solution)ЧтениеSelf review: Rate the mediaЗаданиеImagesЧтениеiFramesВидеоiFrame sandbox cheat sheetЧтениеiFrame as a pictureВидеоThe canvas elementВидеоKnowledge check: Media elementsЗаданиеModule summary: HTML deep diveВидеоKnowledge check: HTMLЗаданиеAdditional resourcesЧтение
02Interactive CSS56 материалов

Creating layouts

CSS web layoutВидеоUnderstanding flexboxЧтениеCSS units of measurementЧтениеBasic flexboxВидеоFlex chartsВидеоCSS flexboxDIALOGUECSS gridsВидеоGrids and flexbox cheat sheetЧтениеGrid showcaseВидеоGrid template areaЧтениеCreate a grid layoutЛабораторнаяCreate a grid layout (solution)ЧтениеSelf review: Create a grid layoutЗаданиеCase study: How Meta creates responsive buildsВидеоKnowledge check: Creating layoutsЗаданиеAdditional resourcesЧтение

CSS Selectors

Widely used selectorsВидеоAll selectors and their specificityЧтениеCombination selectorsВидеоTargeted CSSЛабораторнаяTargeted CSS (solution)ЧтениеSelf review: Targeted CSSЗаданиеPseudo-classes

CSS Effects

What is an effectВидеоText effectsВидеоText effects cheat sheetЧтениеCSS Transforms and transitionsВидеоTransforming and transitioning elementsЛабораторнаяTransforming and transitioning elements (solution)ЧтениеSelf review: Transforming and transitioning elements

Debugging

Common errorsВидеоHandling errorsВидеоInstalling a third-party Linter in VS CodeЧтениеDebugging the front-endЧтениеDebugging toolsВидеоBrowser-specific CSSВидео
03Graded Assessment16 материалов

Graded Assessment

Course recapВидеоAbout the portfolio projectЧтениеSubject selectionЧтениеSelecting the subject and working out the layoutВидеоPositioning the elements, creating placeholdersВидеоSetting up your local development environmentЧтениеProject sandboxЛабораторнаяReadiness check: Have you completed the initial setup?ЗаданиеPlanning the user experienceВидеоCreating themesЧтениеSubmit your portfolio projectВзаимная проверкаExemplar: So far so goodВидеоShare your completed portfolioОбсуждение

Course wrap up

Congratulations, you have completed HTMLS and CSS in depth!ВидеоWhat did you find most interesting in this course?ОбсуждениеNext stepsЧтение
Видео
Pseudo-elementsЧтение
Practical use of pseudoВидео
CSS Pseudo cheat sheetЧтение
Knowledge check: CSS selectorsЗадание
Additional resourcesЧтение
Styling with Pseudo-Classes and Pseudo-ElementsЛабораторная
Задание
CSS animationВидео
CSS keyframesЧтение
Animation examplesВидео
Animation and effects cheat sheetЧтение
Preprocessors: sass, scss, StylusЧтение
Knowledge check: CSS effectsЗадание
Additional resourcesЧтение
What are some CSS bugs you have struggled with?Обсуждение
UI testingВидео
Case study: How Meta performs front-end testingВидео
Knowledge check: DebuggingЗадание
Module summary: Interactive CSSВидео
Module quiz: Interactive CSS Задание
Additional resourcesЧтение