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

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

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

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

HTML & CSS for Beginners – First Coding Step

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

О курсе

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. In this beginner-friendly course, you’ll learn the essentials of HTML and CSS from the ground up. Starting with setting up your development environment and mastering Visual Studio Code, you'll build a solid foundation in web development. The course will walk you through HTML tags, attributes, image integration, and more. You'll also learn to style your pages using CSS, customize layouts, and implement design best practices. As you advance, you'll dive into creating lists, links, forms, tables, and master more complex CSS techniques like flexbox and grid. Practical exercises, including building navigation menus and contact forms, will enhance your skills and prepare you for real-world web development. Ideal for beginners with no prior experience, this course requires just a computer and internet access to get started. By the end of the course, you'll be able to design responsive webpages, create engaging layouts, and use HTML & CSS to build interactive websites.

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

Development EnvironmentIntegrated Development EnvironmentsWeb DevelopmentWeb Design

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

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

01Introduction2 материалов

Introduction

IntroductionВидеоFull Course ResourcesЧтение
02Installing Tools4 материалов

Installing Tools

Download and Installing Visual Studio CodeВидео

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

Packt - Course Instructors

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

HTML & CSS for Beginners – First Coding Step
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 20.9 ч

16 модулей

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

Часть программы вашего университета
Setting Your First ProjectВидео
Understanding Conditional Statements in ProgrammingDIALOGUE
Installing Tools - AssessmentЗадание
03HTML Basics16 материалов

HTML Basics

What Is HTML? What Is Tag?ВидеоBasic HTML DocumentВидеоNested Tags and Fast Wrapping Existing Text with Tags Using EMMETВидеоCreating Paragraphs p | What Are Whitespaces?ВидеоVoid Tag and Breaking the Line brВидеоWhat Are Attributes? [title] and [lang]ВидеоNeutral Tag spanВидеоInstalling Extensions in VSC: AutoRenameTagВидеоChange Background Without Color GeneratorВидеоAwesome Color Selection Tools for Your Website!ВидеоAdding Image to Your Site imgВидеоBonus: Where to Get Free Pictures on Your Site?ВидеоGetting img Size Using VSC ShortcutВидеоHow to Link to Different Folders? Creating PATH TheoryВидеоUnderstanding and Using HTML Tags and AttributesDIALOGUEHTML Basics - AssessmentЗадание
04HTML | Improving Document and Workflow10 материалов

HTML | Improving Document and Workflow

Viewing the Source Code of Any Site. What Are Comments?ВидеоMeta TagsВидеоCharset - Proper Encoding on Your SiteВидеоHTML DoctypeВидеоLive Server and Auto-Saving Code FeatureВидеоEntities and HTML ValidationВидеоHow to Properly Name Your Files? Why Is the Main Page Called index.html?ВидеоExtension: Sweet Icons in Your VSCВидеоUnderstanding HTML Comments and MetadataDIALOGUEHTML | Improving Document and Workflow - AssessmentЗадание
05HTML | Listing Things6 материалов

HTML | Listing Things

ol Versus ulВидеоFast Tricks with Emmet to Use with ListsВидеоdl - Definition ListВидеоEMMET: Creating Siblings and Treating Two Elements as OneВидеоCreating Lists and Using HTML Tags EffectivelyDIALOGUEHTML | Listing Things - AssessmentЗадание
06HTML | Links7 материалов

HTML | Links

Creating Internal LinksВидеоExternal Links | _blankВидео#labelsВидеоHow to Create a Link to Email?ВидеоTelephone LinkВидеоCreating and Using Links in HTMLDIALOGUEHTML | Links - AssessmentЗадание
07HTML | Text Formatting9 материалов

HTML | Text Formatting

Headers - h1 to h6Видеоcite Versus blockquote Versus q - How to Cite OthersВидеоabbr | dfnВидеоSemantic Tags strong, em and mark vs b, i, u, sВидеоsub Versus supВидеоPreformatted Text, Tags: pre, code, varВидеоMulticursor | Searching and Replacing Text in VSCВидеоHTML Headers and Text FormattingDIALOGUEHTML | Text Formatting - AssessmentЗадание
08Forms | Basics9 материалов

Forms | Basics

What Is Form and Input? How to Create a Basic Form with Login and PasswordВидеоHow to Properly Submit Form and Name Its InputsВидеоRadio and Form Labels and LegendВидеоCheckboxesВидеоMost Frequently Used Form AttributesВидеоExercise: How to Create a Contact Form on Your Site?ВидеоGetting Date and Time from the UserВидеоCreating and Using HTML Forms for Data CollectionDIALOGUEForms | Basics - AssessmentЗадание
09Tables4 материалов

Tables

Basics of Creating TablesВидеоHow to Stretch Cells Using rowspan and colspan?ВидеоCreating and Modifying HTML Tables with CSS and AttributesDIALOGUETables - AssessmentЗадание
10CSS | Basics6 материалов

CSS | Basics

What Is CSS?ВидеоCSS Placement and CSS Priority (Cascade)ВидеоClass Versus IDВидеоUseful CSS ExtensionsВидеоUnderstanding CSS Selectors and SpecificityDIALOGUECSS | Basics - AssessmentЗадание
11CSS | Formatting15 материалов

CSS | Formatting

div Versus span - Grouping More ElementsВидеоDisplay: Block/Inline/Inline BlockВидеоEMMET | Tricks Creating Tags with ID and ClassВидеоSelector RehearsalВидеоRules of Selecting Tags - Important Lecture to Avoid Problems in CSSВидеоBorderВидеоRounded Corners - Border-RadiusВидеоTables and PaddingВидеоHow to Create Horizontal Menu? States of Links: link, visited, hover, activeВидеоChanging Default List Icons | :: before SelectorВидеоHow to Make Elements Transparent? Opacity Versus rgbaВидеоChanging Cursor | Creating Hint BoxВидеоAttribute Selector | Custom Named Attributes In HTMLВидеоUnderstanding CSS Display and PositioningDIALOGUECSS | Formatting - AssessmentЗадание
12CSS | Text8 материалов

CSS | Text

Text Formatting and DecorationВидеоParagraph Indentation and ::first-letter SelectorВидеоCSS Units: em Versus px Versus %ВидеоLine-Height | Letter-Spacing | Word-SpacingВидеоPlaying with FontsВидеоCustom Fonts from Web - Google FontsВидеоUnderstanding CSS Text Styling TechniquesDIALOGUECSS | Text - AssessmentЗадание
13CSS Background3 материалов

CSS Background

Changing Background of Your Website: Set It to Image or PatternВидеоSetting and Optimizing Website Background Images with CSSDIALOGUECSS Background - AssessmentЗадание
14CSS Element Placement19 материалов

CSS Element Placement

Box Model - Margin, Padding, Border, Content Differences, Centering ElementsВидеоFitting Elements Inside a Container - Properly Counting WidthВидеоcalc() - Automate the Calculations on Your SiteВидеоCustom Properties (Variables)ВидеоBox-Sizing - A Solution for Counting Width FasterВидеоPositioning of Elements - Static Versus Relative Versus Absolute Versus FixedВидеоRelative and Absolute: Practical ExampleВидеоContainer Inside Another Container - Let's Make a Template for WebsiteВидеоExercise: Create a Button That Moves the User to the Top of WebsiteВидеоFloat and Clear: Floating Text Around the ImageВидеоHow to Stick Element Like Menu in One Place?ВидеоExercise: Create Drop Down Menu (Second Level) for Your Main MenuВидеоz-index - Setting the Order of Overlapping ElementsВидеоExercise: Create Box Informing about Cookie Usage at the Bottom of PageВидеоHow to React to Trolls That 'Overflow' Your Content?ВидеоAligning SVG Icons with Text Using display: flex;ВидеоCentering Element Vertically and Horizontally - Modal BoxВидеоMastering the CSS Box Model and PositioningDIALOGUECSS Element Placement - AssessmentЗадание
15HTML3 материалов

HTML

Semantic Tags: article, aside, section, nav, main, headerВидеоUsing Semantic HTML Tags for Clear Website StructureDIALOGUEHTML - AssessmentЗадание
16CSS 3 Grid6 материалов

CSS 3 Grid

Grid Template, Row and Column, Gaps, and Auto ExpandingВидеоGrid Areas - Name Areas for Your GridВидеоExercise: Change the Place of 'nav' Bar Using Grid Area and @media QueriesВидеоCSS 3 Grid - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание