Главная страницаКатегория htmlHTML & CSS Bootcamp - 2023 Edition

HTML & CSS Bootcamp - 2023 Edition

Name: HTML & CSS Bootcamp - 2023 Edition
Price: 13 USD
Rating: 5 (57 reviews)

The HTML & CSS Bootcamp 2023 Edition

udemy

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

Начать Сейчас

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

37 ч 18 мин

Категория

HTML

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

317 Видео

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

16 мар. 2023 г., 21:16

Язык

Английский

Дата выхода

8 февр. 2023 г., 00:00

Этот курс научит вас всему, что вам нужно знать о HTML, CSS и веб-дизайне, чтобы создавать свои собственные потрясающие веб-сайты с нуля. Вместо того, чтобы просто наблюдать за мной во время кодирования, вы научитесь структурировать и создавать любые веб-сайты, которые только сможете представить.

Моя специализация - преподавание программ буткемп в режиме очной учебы по всему миру, где я работаю непосредственно с учениками, чтобы помочь им научиться веб-разработке и сменить карьеру. Этот курс основан на всем моем опыте. В отличие от большинства курсов на Udemy, в этом курсе есть десятки упражнений и заданий, в которых вы будете создавать компоненты, создавать макеты и практиковать HTML и CSS. Практика - самый важный инструмент, который я использую, чтобы помочь вам научиться, и этот курс включает много ее!

Этот курс охватывает огромное количество информации, но он разработан таким образом, чтобы был доступен как начинающим, так и средним разработчикам.

Мы начинаем с основ HTML: структурирование, создание текстовых элементов, таблиц и форм. Затем мы учимся создавать семантическую разметку и создавать доступные веб-страницы.
Далее мы изучаем основы CSS: работу с селекторами, цветовыми системами и стилизацией текстовых элементов.
Далее вы узнаете все о изображениях, градиентах, фильтрах, позиционировании элементов, работе с переходами и преобразованиями и многих других промежуточных свойствах CSS.
Затем мы тратим почти 10 часов на изучение создания сложных макетов CSS с использованием Flexbox и CSS Grid. Затем мы строим несколько проектов с сложными макетами.
Вы узнаете, как создавать отзывчивые макеты, которые выглядят хорошо на всех размерах экранов, от больших настольных компьютеров до планшетов и мобильных устройств.
Наконец, мы завершаем курс нашим масштабным финальным проектом, который мы создаем с нуля. Этот проект объединяет все, что мы узнали в курсе, в один огромный веб-сайт, построенный с помощью тысяч строк HTML и CSS.

Этот курс включает в себя:

Более 37 часов видео высокого качества
Загружаемые ресурсы, стартовый код и решения для всех разделов
Загружаемые слайды и шпаргалки, включая красивые диаграммы и справочники по синтаксису

Обо мне (вашем инструкторе)

Я учитель с большим реальным опытом преподавания. Я научил тысячи студентов программировать на моих личных курсах по программированию по всему миру. Мои выпускники работают в таких компаниях, как Google, Tesla, Apple, Airbnb и практически во всех крупных компаниях, какие только можно назвать. Мой личный опыт преподавания влияет на онлайн-опыт, который я создаю для студентов. В отличие от большинства преподавателей Udemy, я фактически преподавал этот материал в классе, полном студентов, почти десять лет. Я знаю, что работает, а что нет!

Посмотреть больше

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

Урок 1. 00:06:03
Welcome & Curriculum Overview
Урок 2. 00:02:02
Important Note On Leaving Feedback!
Урок 3. 00:11:11
A First Taste of HTML & CSS
Урок 4. 00:07:38
How The Web Works
Урок 5. 00:07:16
The Roles of HTML, CSS, and JS
Урок 6. 00:03:15
Installing The Tools We Need
Урок 7. 00:05:23
Configuring VSCode
Урок 8. 00:02:12
Important Note On The Course Exercises
Урок 9. 00:04:00
Introducing HTML
Урок 10. 00:05:00
The Basic HTML Workflow
Урок 11. 00:05:50
The Paragraph Element
Урок 12. 00:02:11
Mozilla Developer Network
Урок 13. 00:03:48
Chrome Developer Tools
Урок 14. 00:05:05
Document Structure
Урок 15. 00:04:08
Creating HTML Comments
Урок 16. 00:09:49
Creating Headings
Урок 17. 00:10:27
HTML Basics Exercise
Урок 18. 00:08:25
Working With HTML Lists
Урок 19. 00:09:08
The Em, Strong, B, and I Elements
Урок 20. 00:01:52
Nesting Elements
Урок 21. 00:02:20
Superscript and Subscript
Урок 22. 00:03:10
Inline Vs. Block Elements
Урок 23. 00:07:04
Creating Links
Урок 24. 00:07:36
Other Types of Links
Урок 25. 00:08:06
Creating Images
Урок 26. 00:12:07
Pasta Recipe Exercise
Урок 27. 00:04:34
Creating Text Inputs and Buttons
Урок 28. 00:06:50
The Form Element
Урок 29. 00:06:53
Name and Placeholder Attributes
Урок 30. 00:04:01
Properly Labelling Form Controls
Урок 31. 00:05:10
Other Types of Inputs
Урок 32. 00:06:11
Checkboxes, Textareas, and Range Inputs
Урок 33. 00:07:45
Selects and Radio Button Groupings
Урок 34. 00:14:48
Course Landing Page Form Exercise
Урок 35. 00:06:30
Spans
Урок 36. 00:05:21
Divs
Урок 37. 00:09:18
Tables
Урок 38. 00:07:11
Semantic Markup
Урок 39. 00:07:19
Semantic Elements
Урок 40. 00:02:20
Getting Our Starter Code
Урок 41. 00:04:30
Working Within Inline Styles
Урок 42. 00:04:51
Writing Internal Styles
Урок 43. 00:04:29
External Styles: The Best Way To Write Styles
Урок 44. 00:02:21
Quick Note on Codepen
Урок 45. 00:05:04
Anatomy of CSS
Урок 46. 00:03:15
The Element Selector
Урок 47. 00:02:40
CSS Basics Exercise
Урок 48. 00:02:17
Working with background-color
Урок 49. 00:04:21
Quick Tip: MDN & Comments
Урок 50. 00:04:04
Named Colors
Урок 51. 00:07:30
Understanding RGB Colors
Урок 52. 00:08:17
Hexadecimal Colors
Урок 53. 00:05:52
RGBA Colors and Opacity
Урок 54. 00:05:02
Colors Quiz
Урок 55. 00:06:02
CSS Inheritance
Урок 56. 00:08:08
CSS Colors Exercise
Урок 57. 00:12:07
Changing Fonts with Font-Family
Урок 58. 00:08:53
Font-size, font-weight, and font-style
Урок 59. 00:04:13
Changing Text Alignment
Урок 60. 00:04:50
Line-height, letter-spacing, and word-spacing
Урок 61. 00:11:33
Adding Custom Fonts With Google Fonts
Урок 62. 00:12:36
Styling Text Exercise
Урок 63. 00:07:07
Creating Text Shadows
Урок 64. 00:16:07
Our First Mini Project: Cantilever
Урок 65. 00:07:56
Text-transform & text-decoration
Урок 66. 00:05:41
The ID Selector
Урок 67. 00:06:12
The Class Selector
Урок 68. 00:08:27
Styling Lists
Урок 69. 00:07:41
Styling Links and :hover Pseudo-Class
Урок 70. 00:04:35
The Font Shorthand Property
Урок 71. 00:09:48
Leafy Seadragon Exercise
Урок 72. 00:05:17
The Universal Selector
Урок 73. 00:07:21
The Attribute Selector
Урок 74. 00:04:26
Grouping Selectors
Урок 75. 00:08:19
Descendant & Child Combinators
Урок 76. 00:04:24
Compound Selectors
Урок 77. 00:08:15
CSS Selectors Exercise
Урок 78. 00:05:28
Introducing The Box Model
Урок 79. 00:07:22
Working With Borders
Урок 80. 00:06:53
Width, Height, and Percentages
Урок 81. 00:06:34
Adding Padding to Elements
Урок 82. 00:05:04
Working With Margins
Урок 83. 00:06:29
The Alternate Box Model
Урок 84. 00:11:34
The Display Property
Урок 85. 00:03:53
Display: None
Урок 86. 00:06:25
Negative Margin & Margin Auto
Урок 87. 00:05:14
Margin Collapsing: WTF?
Урок 88. 00:02:42
A Common Layout Pattern
Урок 89. 00:04:25
Min and Max Width
Урок 90. 00:03:18
Rounding Elements With Border Radius
Урок 91. 00:06:38
Box Shadows
Урок 92. 00:06:44
Working With Overflow
Урок 93. 00:13:27
Ski Resort Exercise
Урок 94. 00:03:02
Introducing Our Project
Урок 95. 00:05:12
Basic Project Setup
Урок 96. 00:04:08
Writing The Navbar Markup
Урок 97. 00:11:19
Styling The Navbar
Урок 98. 00:11:27
Finishing Up The Navbar
Урок 99. 00:05:06
Creating The Photo Grid
Урок 100. 00:13:26
Continuing The Photo Grid
Урок 101. 00:10:06
Finishing The Photo Grid
Урок 102. 00:16:08
Adding The Footer Content
Урок 103. 00:00:47
Section Introduction
Урок 104. 00:04:36
The Sibling Combinator
Урок 105. 00:15:04
Working With Pseudo-Classes
Урок 106. 00:04:42
Styling Pseudo-Elements
Урок 107. 00:13:03
CSS Selectors Pt. 2 Exercise
Урок 108. 00:08:01
The Basics of Specificity
Урок 109. 00:02:08
Inline Styles and Specificity
Урок 110. 00:09:49
Calculating Specificity Values
Урок 111. 00:06:05
!important and The Cascade
Урок 112. 00:06:28
Wrapping Up The Cascade
Урок 113. 00:03:25
Introducing Our Blog Post Project
Урок 114. 00:06:34
Centering The Main Content
Урок 115. 00:13:30
Working on Typography
Урок 116. 00:13:16
Creating the Headline Section
Урок 117. 00:10:00
Implementing Our Headings
Урок 118. 00:11:49
Adding In Code Styles
Урок 119. 00:09:35
Creating the Footer
Урок 120. 00:10:02
Writing The Full Size Hero
Урок 121. 00:10:18
Absolute Units: Pixels, Centimeters, and More!
Урок 122. 00:05:15
Working With Percentages
Урок 123. 00:07:44
The Joy of Rem Units
Урок 124. 00:08:17
Understanding The Em Unit
Урок 125. 00:06:32
Vw and Vh Units
Урок 126. 00:03:03
Which Units Should You Use?
Урок 127. 00:07:08
Working With Floats
Урок 128. 00:02:47
Introducing The Project
Урок 129. 00:07:35
Setting Up The Navbar
Урок 130. 00:05:05
Finishing The Navbar
Урок 131. 00:06:52
Starting The Hero Content
Урок 132. 00:09:47
Making The Skills Section
Урок 133. 00:11:22
Creating The Blog Section
Урок 134. 00:07:00
Adding The Events Section
Урок 135. 00:04:59
Making A Simple Footer
Урок 136. 00:08:33
Working With Background Images
Урок 137. 00:02:38
Controlling Background-Repeat
Урок 138. 00:05:51
Sizing Our Background
Урок 139. 00:05:56
Positioning Background
Урок 140. 00:02:13
Working With Background-Clip
Урок 141. 00:05:42
Background Exercise
Урок 142. 00:00:52
An Important Note About Gradients!
Урок 143. 00:05:39
Creating Linear Gradients
Урок 144. 00:08:09
Radial, Conic, and Repeating Gradients
Урок 145. 00:04:32
The Background Shorthand Property
Урок 146. 00:05:29
Fancy CSS Filters
Урок 147. 00:04:59
Introducing Positioning
Урок 148. 00:05:01
Relative Positioning
Урок 149. 00:03:00
Controlling Layers With Z-Index
Урок 150. 00:06:25
Absolute Positioning Pt 1
Урок 151. 00:04:53
Absolute Positioning Pt 2
Урок 152. 00:14:38
Creating A Button Badge
Урок 153. 00:04:36
Fixed Positioning
Урок 154. 00:04:30
Positioning Exercise #1
Урок 155. 00:06:05
Positioning Exercise #2
Урок 156. 00:05:31
Positioning Exercise #3
Урок 157. 00:04:24
Introducing Transitions
Урок 158. 00:06:34
The Basic Transition Syntax
Урок 159. 00:03:23
Working With Multiple Transitions
Урок 160. 00:05:40
Transition Timing Functions
Урок 161. 00:02:18
Transition Delays
Урок 162. 00:09:52
Understanding Animation Performance
Урок 163. 00:06:24
Introducing Transforms
Урок 164. 00:07:55
Other Types of Transformations
Урок 165. 00:02:36
Transform Origin
Урок 166. 00:17:08
Building Fancy Button Hover Effects
Урок 167. 00:06:32
Introducing Flexbox
Урок 168. 00:05:38
Display: Flex and Flex Axis
Урок 169. 00:05:12
Working With Flex-Direction
Урок 170. 00:02:19
Flexbox Exercise 1
Урок 171. 00:08:14
Flex-Wrap
Урок 172. 00:10:10
Justify-Content
Урок 173. 00:02:12
Flexbox Exercise 2
Урок 174. 00:06:29
Align-Items
Урок 175. 00:02:44
Flexbox Exercise 3
Урок 176. 00:05:46
Align-Content
Урок 177. 00:04:34
Flexbox Exercise 4
Урок 178. 00:03:43
Align-Self
Урок 179. 00:04:37
Flexbox Exercise 5
Урок 180. 00:11:10
The Flex-Grow Property
Урок 181. 00:05:07
Controlling Shrinkage With Flex-Shrink
Урок 182. 00:06:26
Flex-Basis: Important & Confusing
Урок 183. 00:07:35
The Flex Shorthand Property
Урок 184. 00:07:35
The Order Flex-Item Property
Урок 185. 00:09:12
Flexbox Patterns: Building A Simple Navbar
Урок 186. 00:05:12
Flexbox Patterns: Nested Flex Containers
Урок 187. 00:04:33
Flexbox Patterns: Centering Content
Урок 188. 00:07:00
Flexbox Patterns: Building A Card Layout
Урок 189. 00:02:33
Introducing The Cost Estimator Project
Урок 190. 00:07:54
Building Our Container
Урок 191. 00:08:07
Creating The Top Tabs
Урок 192. 00:08:03
Positioning The Tabs Underline
Урок 193. 00:11:57
Creating The Active Tab Styles
Урок 194. 00:10:44
Adding The Toggle Section
Урок 195. 00:06:59
Building The Sessions Card
Урок 196. 00:14:33
Creating The Slider
Урок 197. 00:08:06
Creating The Two Price Cards
Урок 198. 00:11:35
Finishing Up The Price Cards
Урок 199. 00:06:35
Introducing Responsive Design
Урок 200. 00:07:15
Our First Media Query
Урок 201. 00:06:22
More On Media Queries
Урок 202. 00:06:05
Working With Media Features
Урок 203. 00:03:07
Media Query Logical Operators
Урок 204. 00:05:32
Media Queries Exercise
Урок 205. 00:05:18
Media Queries Level 4 & 5
Урок 206. 00:08:56
Common Responsive Breakpoints
Урок 207. 00:08:44
Creating a Simple Responsive Navbar
Урок 208. 00:06:28
Responsive Flexbox Grid Demo
Урок 209. 00:04:43
Mobile First vs. Desktop First Design
Урок 210. 00:06:06
Building a Simple Mobile-First Layout
Урок 211. 00:07:40
Making Cantilever Responsive
Урок 212. 00:09:27
Making Potter Portfolio Responsive
Урок 213. 00:17:19
Making Hazel CV Project Responsive
Урок 214. 00:09:13
Making Cost Estimator Responsive
Урок 215. 00:06:52
Introducing CSS Grid
Урок 216. 00:05:30
Enabling CSS Grid
Урок 217. 00:05:29
Grid-Template-Columns
Урок 218. 00:05:11
Grid-Template-Rows
Урок 219. 00:02:52
Grid Exercise 1
Урок 220. 00:04:06
Grid-Template Shorthand Property
Урок 221. 00:08:28
The Minmax() Function
Урок 222. 00:03:33
Working With Repeat()
Урок 223. 00:03:03
Fit-Content
Урок 224. 00:03:46
Controlling Grid Gaps
Урок 225. 00:02:45
Grid Exercise 2
Урок 226. 00:05:18
Working with Grid Lines
Урок 227. 00:07:43
Positioning Grid Items
Урок 228. 00:03:24
The Span Keyword
Урок 229. 00:06:12
The Grid-Area Shorthand Property
Урок 230. 00:06:53
Naming Our Grid Lines
Урок 231. 00:07:53
Grid-Template-Areas
Урок 232. 00:06:23
Using Grid-Template-Areas With Rows & Cols
Урок 233. 00:05:17
Grid-Auto-Flow
Урок 234. 00:04:24
Grid Auto Columns & Rows
Урок 235. 00:07:12
Autofit and Autofill
Урок 236. 00:04:30
Introducing Our Grid Project
Урок 237. 00:10:32
Creating Image Overlay Pt 1
Урок 238. 00:05:51
Creating Image Overlay Pt 2
Урок 239. 00:05:39
Adding In Our Images
Урок 240. 00:07:35
Positioning Our Images On The Grid
Урок 241. 00:10:09
Making Our Grid Layout Responsive
Урок 242. 00:03:06
Fixing Our Image Overlays
Урок 243. 00:10:08
Building The Navbar
Урок 244. 00:07:05
Finalizing The Navbar and Footer
Урок 245. 00:12:30
Creating The Hamburger Button
Урок 246. 00:04:20
Introducing Keyframes Animations
Урок 247. 00:06:13
Defining @keyframes
Урок 248. 00:07:56
More Practice With @Keyframes
Урок 249. 00:06:27
Animation Delay, Repeat, and More!
Урок 250. 00:02:03
Reusing Animations
Урок 251. 00:04:23
Animation Shorthand Property
Урок 252. 00:04:14
Building A Simple Spinner Animation
Урок 253. 00:08:55
Creating a More Complex Loader
Урок 254. 00:04:54
The Animation Fill Mode Property
Урок 255. 00:02:41
Introducing Our Animated Drawer
Урок 256. 00:07:55
Writing The Individual Bar Animations
Урок 257. 00:09:05
A Lightspeed Crash Course In JavaScript
Урок 258. 00:06:38
Making Our Hamburger Button Work
Урок 259. 00:06:57
Creating The Mobile Drawer Menu
Урок 260. 00:07:30
Animating The Drawer Slide-Out
Урок 261. 00:05:05
Introducing Before and After
Урок 262. 00:07:36
Creating Decorative Quotes With Pseudo-Elements
Урок 263. 00:06:30
Gradient Borders With Pseudo-Elements
Урок 264. 00:08:21
Fancy Animated Buttons With Pseudo-Elements
Урок 265. 00:07:31
Super Fancy Animated Spinner With Pseudo-Elements
Урок 266. 00:13:19
Custom Form Controls With Pseudo-Elements
Урок 267. 00:03:21
Introducing CSS Variables
Урок 268. 00:07:17
Writing CSS Variables
Урок 269. 00:03:53
The :root pseudo-class
Урок 270. 00:02:32
Variables and Media Queries
Урок 271. 00:04:40
Using Variables For Sizes
Урок 272. 00:05:43
Introducing Calc()
Урок 273. 00:05:37
The Rules of Calc()
Урок 274. 00:05:02
Another Example of Using Calc()
Урок 275. 00:07:50
Introducing Swipe
Урок 276. 00:05:57
Setting Up Our Font Variables
Урок 277. 00:07:25
Defining Basic Heading Styles
Урок 278. 00:05:16
Writing General Link Styles
Урок 279. 00:04:09
Defining Body Styles
Урок 280. 00:11:36
Creating our Text Classes - Subtitle, Secondary Text
Урок 281. 00:12:52
Defining Our Button Styles - Primary & Secondary Buttons
Урок 282. 00:05:08
Creating Our Buttons With Animated Icons
Урок 283. 00:12:12
Building The Navbar
Урок 284. 00:11:56
Defining Our Two-Column Layout Classes
Урок 285. 00:04:50
Writing The Hero Markup
Урок 286. 00:13:12
Styling The Page Hero
Урок 287. 00:09:15
Building The Partners Grid Section
Урок 288. 00:15:01
Adding The Unified Platform Section
Урок 289. 00:08:06
Creating Our Graphic Photos Grid
Урок 290. 00:07:22
Writing Our Reusable Card Class
Урок 291. 00:16:57
Adding The Integrations Section
Урок 292. 00:09:21
Defining The Why Swipe Section
Урок 293. 00:14:59
Creating The Global Section
Урок 294. 00:06:00
Positioning The Globe Image
Урок 295. 00:07:51
Adding The Virtual Events Section Markup
Урок 296. 00:20:06
Styling The Virtual Events Section
Урок 297. 00:12:21
Building The Getting Started Section
Урок 298. 00:07:03
Writing The Page Footer Markup
Урок 299. 00:13:49
Styling The Page Footer
Урок 300. 00:08:19
Adding The First Angled Stripe
Урок 301. 00:09:07
Finishing The Angled Stripes
Урок 302. 00:11:12
Creating The Animated Gradient Hero Background
Урок 303. 00:04:18
Fixing An Issue With Our Angled Stripes
Урок 304. 00:07:43
Starting To Make Swipe Responsive
Урок 305. 00:08:24
Making The Partners Grid Responsive
Урок 306. 00:05:59
Making The Unified Platform Section Responsive
Урок 307. 00:09:01
Making The Integrations Section Responsive
Урок 308. 00:06:50
Making The Why Swipe Section Responsive
Урок 309. 00:05:40
Making The Global Section Responsive
Урок 310. 00:08:38
Making The Virtual Events Section Responsive
Урок 311. 00:10:34
Making The Bottom of The Page Responsive
Урок 312. 00:25:31
Making The Page Hero Responsive
Урок 313. 00:11:20
Adding Our Responsive Navbar
Урок 314. 00:14:38
Responsive Tweaks To Background Stripes
Урок 315. 00:10:59
Cleaning Up Our CSS
Урок 316. 00:05:04
Fixing A Minor Issue With Border Radius
Урок 317. 00:07:03
Fixing Another Minor Issue With Partners Grid

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+194

Другие материалы в этой категории

Andrew
20 мая 2024 г., 20:51
Please update
Anonymous
19 апр. 2023 г., 15:16
Hi, Are there slides for this course?
CourseHunter Team Anonymous
27 апр. 2023 г., 22:19
You can find all course materials at code.zip

HTML & CSS Bootcamp - 2023 Edition

Ограничение времени просмотра

Автор - udemy

udemy

Другие материалы в этой категории

Семантика HTML и селекторы CSS

Понимание HTML и CSS

Ускоренный курс HTML

Базовый HTML, CSS + Javascript

10 Супер Адаптивных Веб-Сайтов с HTML, CSS и JavaScript

Изучите HTML и CSS за несколько часов

Практические CSS Layouts