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

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

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

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

Learn HTML and CSS

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

О курсе

This course is perfect if you want to learn how to code websites from scratch. You will learn the basics of HTML and CSS through interactive challenges. Along the way, you will build multiple projects, like a Google.com clone, a Space Exploration page, and a fun birthday site filled with GIFs. While most of the challenges are done in Scrimba's interactive editor, you will also learn how to use professional tools like VS Code for code editing, GitHub for hosting your code, and Netlify for deploying your projects to the world wide web.

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

Cascading Style Sheets (CSS)Hypertext Markup Language (HTML)Web DevelopmentCloud HostingApplication DeploymentHTML and CSSWeb DesignSoftware Development ToolsFront-End Web DevelopmentUI ComponentsInteractive DesignWeb Development ToolsDevelopment EnvironmentCollaborative SoftwareResponsive Web DesignUser Interface (UI)Web Design and Development

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

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

01🟨 Intro to HTML: Part 110 материалов

Build and deploy your first website

Welcome to the HTML & CSS course!PLUGINWelcome to interactive lessons!PLUGINHTML tagsPLUGINWrite a news article!PLUGIN

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

Per Harald Borgen

CEO at Scrimba

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

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 13.3 ч

16 модулей

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

Часть программы вашего университета
The <img> tagPLUGIN
NestingPLUGIN
Internet superpowers -> Change the BBC news!PLUGIN
Interactive elements - buttonPLUGIN
Interactive elements - input tags -> Experiment with input typesPLUGIN
Intro to HTML 1 – Practice AssignmentЗадание
02🟨 Intro to HTML: Part 28 материалов
Let's build Google!PLUGINAside: Anchor tagsPLUGINAdd an anchor tag to Google.comPLUGINProper document structurePLUGINAside: ListsPLUGINBuild a Personal WebsitePLUGINDeploy your Personal WebsitePLUGINIntro to HTML 2 – Practice AssignmentЗадание
03🟨 Intro to HTML: Test Your Knowledge2 материалов
Intro to HTML Graded AssignmentЗаданиеHTML RecapPLUGIN
04🟦 Intro to CSS: Part 112 материалов

Build a Google.com Clone

Let's learn CSS!PLUGINWrite your first lines of CSS!PLUGINWrite your first lines of CSS! - SolutionPLUGINLet's destroy wikipedia - recordingPLUGINLink to the CSS filePLUGINSet the width of the elementsPLUGINinline vs block elementsPLUGINMargin topPLUGINDivs rule the worldPLUGINCSS classesPLUGINAside: Learn margins via flagsPLUGINIntro to CSS 1 - Practice AssignmentЗадание
05🟦 Intro to CSS: Part 213 материалов
Add space between our elementsPLUGINAside: centering with marginsPLUGINCentering our contentPLUGINAside: paddingPLUGINAside: border and border-radiusPLUGINAside challenge: style Twitter buttonPLUGINFix the input fieldPLUGINCenter the buttonPLUGINStyle the buttonPLUGINWhy we can't have two block-level buttonsPLUGINAside: flexboxPLUGINCentering both buttons with flexboxPLUGINIntro to CSS 2 – Practice AssignmentЗадание
06🟦 Intro to CSS: Test Your Knowledge2 материалов
Intro to CSS Graded AssignmentЗаданиеIntro to CSS RecapPLUGIN
07🟩 Intermediate CSS: Part 19 материалов

Build a Digital Business Card

Building your digital business cardPLUGINFix the image pathPLUGINAdd alt attributePLUGINMake image smallerPLUGINAdd a border and paddingPLUGINAside: flexbox child containersPLUGINFlex item containersPLUGINAdd a utility classPLUGINIntermediate CSS 1 Practice AssignmentЗадание
08🟩 Intermediate CSS: Part 211 материалов
Justify the itemsPLUGINCenter the cardPLUGINAside: inheritancePLUGINCenter the text via inheritancePLUGINAdd colorsPLUGINWeb-safe fontsPLUGINAside: margin/padding shorthandPLUGINUse the margin and padding shorthandsPLUGINMake it your own!PLUGINDeploy your Digital Business CardPLUGINIntermediate CSS 2 Practice AssignmentЗадание
09🟩 Intermediate CSS: Test Your Knowledge2 материалов
Intermediate CSS Graded AssignmentЗаданиеIntermediate CSS RecapPLUGIN
10🟧 CSS for a Modern UI: Part 18 материалов

Build a Space Exploration Site

Let's go to space!PLUGINAdd a background image from unsplashPLUGINCenter elements and style buttonPLUGINAdd a Google FontPLUGIN@font-facePLUGINAside: spansPLUGINAdd an underline using a spanPLUGINCSS for a Modern UI 1 – Practice AssignmentЗадание
11🟧 CSS for a Modern UI: Part 27 материалов
Use an ID for the logoPLUGINReplace the jpg with a webpPLUGINChoose a color palette from an imagePLUGINAdd the terms & conditions sectionPLUGINAside: text shadowPLUGINImproving the readability with text shadowsPLUGINCSS for a Modern UI 1 – Practice AssignmentЗадание
12🟧 CSS for a Modern UI: Test Your Knowledge2 материалов
CSS for a Modern UI AssignmentЗаданиеCSS for a Modern UI RecapPLUGIN
13⬛️ Next-level CSS: Part 112 материалов

Build a Business GIFt Site

Let's build a Birthday GIFt site!PLUGINAdd basic header stylingPLUGINSet the colorsPLUGINAdd shadow on textPLUGINWe have a problem that flexbox can fixPLUGINAside: align-itemsPLUGINAside: flex-directionPLUGINTurn the header into a flexboxPLUGINFix date and age designPLUGINCreate the first giftPLUGINReplace the img with a divPLUGINNext-level CSS 1 – Practice AssignmentЗадание
14⬛️ Next-level CSS: Part 212 материалов
Aside: make elements change on hoverPLUGINAdd the hover effectPLUGINCreate the next GIFtPLUGINCreate two more GIFtsPLUGINCreate the final GIFtPLUGINAdd the footerPLUGINAdd a background gradientPLUGINPersonalize the Birthday GIFt SitePLUGINUse GitHub Desktop to publish your Birthday GIFt SitePLUGINDeploying your Birthday GIFt SitePLUGINUse VS Code to edit your Birthday GIFt SitePLUGINNext-level CSS 2 – Practice AssignmentЗадание
15⬛️ Next-level CSS: Test Your Knowledge2 материалов
Next-level CSS Graded AssignmentЗаданиеNext-level CSS RecapPLUGIN
16Bonus Module: Solo Projects8 материалов
About Solo ProjectsЧтениеIt's time for you to build a Solo ProjectPLUGINSolo Project HintsЧтениеSolo Project - The Daily Dribble NewsletterPLUGINSolo Project - Amazon Product PagePLUGINSolo Project - Web Agency HeroPLUGINSolo Project – Hometown HomepagePLUGINCongrats on completing the course!PLUGIN