Главная страницаКатегория cssСовременные HTML и CSS с нуля, 2.0

Современные HTML и CSS с нуля, 2.0

Name: Современные HTML и CSS с нуля, 2.0
Price: 12.5 USD
Rating: 5 (24 reviews)

Modern HTML & CSS From The Beginning Course

Brad Traversy

★5 (всего оценок - 24)

Продолжительность

24 ч 21 мин

Категория

CSS

Количество уроков

200 Видео

Дата добавления

7 нояб. 2024 г., 20:15

Язык

Английский

Дата обновления

29 апр. 2026 г., 21:42

Современная веб-разработка требует уверенного владения HTML и CSS, и этот курс создан именно для того, чтобы провести вас путь от базовой разметки до профессиональных интерфейсов. Материал подается структурировано, практично и ориентирован на реальное применение.

Что представляет собой курс по HTML и CSS 2.0

Обновлённая программа охватывает фундаментальные концепции и современные практики, включая продвинутые CSS‑техники, адаптивную вёрстку и работу с инструментами разработчика. Вас ждут учебные модули, задания для закрепления, мини‑проекты и три больших полноценных проекта, которые вы сможете опубликовать на Netlify или Vercel.

Практическая направленность

Курс построен вокруг практики: после изучения теории вы сразу применяете знания в задачах и проектах, чтобы закрепить навыки и почувствовать себя уверенно в реальных рабочих сценариях.

Актуальные технологии и подходы

Все темы и методики соответствуют современным стандартам веб-разработки. Особое внимание уделено адаптивности, семантике, удобству поддержки кода и лучшим практикам построения UI.

Ключевые темы, которые вы освоите

Основы HTML5 и структура страницы

Семантические теги и корректная организация контента
Работа с текстом, изображениями, ссылками и списками
Формы и взаимодействие с пользователем

База CSS и фундаментальные концепции

Каскад, наследование и специфичность
Цвета, шрифты, размеры и единицы измерения
Box Model и управление внешним видом элементов

Современные способы построения макетов

Flexbox: создание гибких интерфейсов
CSS Grid: полноценные сетки и сложные раскладки
Позиционирование элементов и работа со слоями

Адаптивность и отзывчивые интерфейсы

Медиа-запросы и адаптивные точки перелома
Относительные и гибкие единицы измерения
Создание интерфейсов для мобильных, планшетов и десктопов

Анимации и визуальная динамика

CSS-переходы
Трансформации
Анимации на базе @keyframes

Методология и организация кода

BEM (Block Element Modifier) — чистая и понятная структура CSS
Масштабируемость и удобство поддержки

Публикация проектов и Git

Основы Git: коммиты, ветки, управление версиями
Развёртывание проектов на Netlify и Vercel
Публикация портфолио-работ

Итог: что вы получите после прохождения курса

После обучения вы сможете уверенно создавать современные интерфейсы, работать с адаптивной вёрсткой, применять CSS‑сетки и анимацию, использовать BEM и публиковать проекты на популярных хостингах. Курс идеально подойдёт тем, кто хочет получить прочный фундамент и практические навыки, востребованные в работе фронтенд‑разработчика.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:05:08
Welcome To The Course
Урок 2. 00:07:33
How The Web Works
Урок 3. 00:06:36
The Role Of HTML & CSS In Web Development
Урок 4. 00:06:33
VS Code & Environment
Урок 5. 00:01:54
Premium Docs
Урок 6. 00:01:09
Section Intro
Урок 7. 00:05:45
Creating & Opening HTML Files
Урок 8. 00:05:09
HTML Tags & Attributes
Урок 9. 00:06:13
Document Structure
Урок 10. 00:05:21
Live Server & Prettier
Урок 11. 00:03:10
Sandbox Files Setup
Урок 12. 00:09:52
Meta Tags & Search Engines
Урок 13. 00:08:57
Headings, Paragraphs & Text Emphasis
Урок 14. 00:05:08
Browser Devtools Intro
Урок 15. 00:05:33
Lists
Урок 16. 00:08:31
Anchor Tags (Links)
Урок 17. 00:05:55
Images
Урок 18. 00:06:44
Block vs. Inline Elements
Урок 19. 00:06:03
Line Breaks, Horizontal Rules & Entities
Урок 20. 00:05:55
Divs & Spans
Урок 21. 00:06:43
Classes & IDs
Урок 22. 00:06:36
Semantic Elements
Урок 23. 00:08:37
Emmet Crash Course
Урок 24. 00:08:57
Keyboard Shortcuts
Урок 25. 00:09:07
Pricing Grid HTML Challenge
Урок 26. 00:00:58
Section Intro
Урок 27. 00:05:06
Form & Input Tags
Урок 28. 00:06:56
Text-Based Inputs
Урок 29. 00:06:55
Input Field Attributes
Урок 30. 00:05:35
Select Boxes & Textareas
Урок 31. 00:05:02
Checkboxes & Radio Buttons
Урок 32. 00:04:25
Other Input Types
Урок 33. 00:07:51
Datalist
Урок 34. 00:05:33
HTML Form Challenge
Урок 35. 00:00:49
Section Intro
Урок 36. 00:06:41
Audio Element
Урок 37. 00:03:12
Video Element
Урок 38. 00:04:53
Image Map
Урок 39. 00:05:34
Tables
Урок 40. 00:05:01
Iframe
Урок 41. 00:09:16
Global Attributes
Урок 42. 00:06:20
SVG Element
Урок 43. 00:04:27
Popover & Details
Урок 44. 00:05:09
Progress & Meter
Урок 45. 00:01:03
Section Intro
Урок 46. 00:08:14
Implementing CSS
Урок 47. 00:12:41
Basic Selectors
Урок 48. 00:07:13
Fonts In CSS
Урок 49. 00:09:10
Font & Text Properties
Урок 50. 00:12:28
Colors (Color Names, Hex, RGB, HSL)
Урок 51. 00:05:13
CSS Specificity
Урок 52. 00:09:40
Backgrounds
Урок 53. 00:04:25
Styling Links & Link States
Урок 54. 00:07:32
Font Awesome Icons
Урок 55. 00:09:26
CSS Basics Challenge
Урок 56. 00:01:16
Section Intro
Урок 57. 00:03:21
Box Model Explained
Урок 58. 00:07:49
Sizing & Overflow
Урок 59. 00:05:55
Padding
Урок 60. 00:07:01
Margin
Урок 61. 00:04:28
Universal Selector & Resetting
Урок 62. 00:05:34
Borders
Урок 63. 00:08:05
Display Property
Урок 64. 00:10:30
Position Property
Урок 65. 00:04:23
Box Shadow
Урок 66. 00:12:29
Freelance Form Mini-Project
Урок 67. 00:12:10
Shoe Cards Mini-Project
Урок 68. 00:01:46
Section Intro
Урок 69. 00:04:48
What Is Flexbox?
Урок 70. 00:07:19
Flexbox Basics - Containers & Items
Урок 71. 00:10:20
Align & Justify
Урок 72. 00:10:04
Flex Properties & Dynamic Sizing
Урок 73. 00:02:55
Flex Order
Урок 74. 00:07:22
Flexbox Layout Challenge
Урок 75. 00:21:31
Pricing Cards Mini-Project
Урок 76. 00:01:41
Section Intro
Урок 77. 00:07:54
What Is Responsive Design?
Урок 78. 00:06:56
Flexible Layout & Percentages
Урок 79. 00:12:54
rem & em Units
Урок 80. 00:04:41
vh & vw Units
Урок 81. 00:10:56
Media Queries
Урок 82. 00:04:48
Responsive Pricing Grid
Урок 83. 00:06:16
Responsive Flexbox Layout
Урок 84. 00:07:55
Container Queries
Урок 85. 00:05:28
Container Units
Урок 86. 00:01:33
Project Intro
Урок 87. 00:08:44
Setup & HTML
Урок 88. 00:06:37
Base CSS & Header Styles
Урок 89. 00:04:25
Main Content Flex & Alignment
Урок 90. 00:06:42
Inner Styles
Урок 91. 00:08:20
Mobile Layout & Media Queries
Урок 92. 00:02:18
Section Intro
Урок 93. 00:10:34
Custom Properties
Урок 94. 00:03:35
Vendor Prefixes
Урок 95. 00:07:04
Filters
Урок 96. 00:11:30
Smooth Scroll Mini-Project
Урок 97. 00:11:36
Sticky Nav & Style On Scroll
Урок 98. 00:06:08
calc() Function
Урок 99. 00:12:27
Nesting
Урок 100. 00:03:47
Project Intro
Урок 101. 00:05:56
Setup & Base CSS
Урок 102. 00:09:51
Header & Navigation
Урок 103. 00:06:40
Hero Text
Урок 104. 00:02:42
Custom Properties
Урок 105. 00:07:49
Gallery Section
Урок 106. 00:05:56
Footer
Урок 107. 00:09:28
About Page
Урок 108. 00:15:53
Contact Page
Урок 109. 00:04:51
Image Lightbox Effect
Урок 110. 00:02:01
Section Intro
Урок 111. 00:08:43
Intro To Git & GitHub
Урок 112. 00:07:06
Generate SSH Keys
Урок 113. 00:09:42
Git Workflow & Commands
Урок 114. 00:03:55
Deploy Website To Netlify
Урок 115. 00:04:05
Contact Form Submissions
Урок 116. 00:03:46
Configure a Domain Name
Урок 117. 00:01:11
Section Intro
Урок 118. 00:08:08
What is Web Accessibility?
Урок 119. 00:04:33
Skilltide Browser Extension
Урок 120. 00:14:22
Screen Reader Testing
Урок 121. 00:17:08
Role Attribute
Урок 122. 00:08:09
ARIA Attributes
Урок 123. 00:06:23
Aria Expanded & Dynamic Content
Урок 124. 00:02:13
Section Intro
Урок 125. 00:06:45
Attribute Selectors
Урок 126. 00:06:57
Child & Sibling Combinators
Урок 127. 00:05:28
Pseudo Elements
Урок 128. 00:05:08
Pseudo Classes - first-child, last-child & nth-child
Урок 129. 00:06:36
Pseudo Classes - first-of-type, last-of-type, nth-of-type
Урок 130. 00:06:00
:before & :after Pseudo Classes
Урок 131. 00:09:46
Image Overlay Using :before
Урок 132. 00:05:47
is(), where() & has()
Урок 133. 00:11:03
Styling Forms
Урок 134. 00:09:15
Selectors Challenge
Урок 135. 00:02:10
Section Intro
Урок 136. 00:06:21
CSS Grid Overview
Урок 137. 00:08:24
Grid Columns & Gap
Урок 138. 00:03:38
repeat() & minmax()
Урок 139. 00:05:05
Grid Rows
Урок 140. 00:03:02
Grid Challenge 1
Урок 141. 00:05:28
Align & Justify Properties
Урок 142. 00:05:49
repeat() with autofill & autofit
Урок 143. 00:07:48
Positioning & Spanning Rows & Columns
Урок 144. 00:06:08
Named Grid Lines
Урок 145. 00:03:45
Grid Challenge 2
Урок 146. 00:04:54
CSS Grid & Media Queries
Урок 147. 00:07:19
Grid Template Areas
Урок 148. 00:07:21
Lumina Creative Grid Refactor
Урок 149. 00:01:47
Section Intro
Урок 150. 00:03:46
Transition Overview
Урок 151. 00:06:03
Creating Transitions
Урок 152. 00:06:39
Transform Property
Урок 153. 00:02:18
Absolute Center With Transform/Translate
Урок 154. 00:07:15
3D Transforms
Урок 155. 00:12:21
JavaScript & CSS
Урок 156. 00:17:55
Hamburger Menu
Урок 157. 00:07:44
Keyframes - Part 1
Урок 158. 00:09:09
Keyframes - Paart 2 (CSS Loader Animation)
Урок 159. 00:09:12
3D Rotating Cube
Урок 160. 00:16:11
Presentation Website Mini-Project
Урок 161. 00:04:46
Project Intro
Урок 162. 00:06:54
Project Setup
Урок 163. 00:10:25
Desktop Navigation
Урок 164. 00:12:12
Mobile Navigation
Урок 165. 00:09:22
Hero Section
Урок 166. 00:09:15
Hero SVG & Media Queries
Урок 167. 00:05:40
Navbar Background On Scroll
Урок 168. 00:10:59
Learn Section
Урок 169. 00:08:03
Chapters Section
Урок 170. 00:07:10
Summary Section
Урок 171. 00:08:01
Info Section
Урок 172. 00:07:00
Takeaways Section
Урок 173. 00:11:19
Details & Author Section
Урок 174. 00:11:47
Stats Section
Урок 175. 00:06:37
Newsletter Form
Урок 176. 00:11:31
Footer & Social Icons
Урок 177. 00:12:21
Contact Page
Урок 178. 00:11:51
Add Accessibility
Урок 179. 00:08:41
Deploy To Vercel & Hook Up Form
Урок 180. 00:05:33
Project Intro
Урок 181. 00:05:35
BEM Methodology Explained
Урок 182. 00:06:05
Project Setup
Урок 183. 00:09:44
Navbar & Desktop Menu
Урок 184. 00:13:30
Hamburger Button & Mobile Menu
Урок 185. 00:15:57
Hero Section
Урок 186. 00:02:50
Navbar Background On Scroll
Урок 187. 00:09:42
Testimonials Section
Урок 188. 00:15:18
Features Section & Grid
Урок 189. 00:05:47
Features Mobile Layout
Урок 190. 00:06:28
Preview Section
Урок 191. 00:13:30
Animated Play Button
Урок 192. 00:16:04
Video Modal
Урок 193. 00:14:41
Details Area & Icons
Урок 194. 00:05:32
Screenshots Section
Урок 195. 00:09:24
Download Section
Урок 196. 00:09:59
Footer
Урок 197. 00:03:47
Create Details Page
Урок 198. 00:13:25
Pricing Cards
Урок 199. 00:13:04
Details Features
Урок 200. 00:03:23
Course Wrap Up

Автор - Brad Traversy

Brad Traversy

Я начал программировать в 2007 году в возрасте 26 лет. В 2016 году я стал штатным преподавателем и создателем контента. Я показываю людям, что им не обязательно быть отличником или гением, чтобы научиться программировать. Я разбиваю сложные концепции, показывая вам, как их реализовать в курсах и учебных пособиях на основе проектов.

+201

Комментарии

solomonchima91
14 авг. 2025 г., 18:17
Pretty awesome man..🫡
Anonymous
1 февр. 2025 г., 01:33
I don't see Premium docs in the course materials? Can you upload them?
CourseHunter Team Anonymous
10 февр. 2025 г., 00:24
Sure, materials folder was updated, please re-download it. Thanks for notify us about this!
ildar7sins
5 дек. 2024 г., 21:18
спасибо за долгожданное обновление