Этот курс научит вас всему, что вам нужно знать о 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
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
HTML - это мост между контентом и кодом. Большая буква «С» в CSS означает каскад. К сожалению, мало времени тратится на изучение того, что означает любое из этих понятий, или их влияние на ваш код. В этом курсе вы научитесь использовать семантический HTML, селекторы, наследование и каскадирование для создания веб-страниц с более компактным кодом и более эффективным стилем.
Глубоко изучите семантический HTML, CSS, Flexbox, Grid, научитесь читать спецификации и многое другое. В этом курсе вы получите глубокое понимание HTML и CSS, поскольку мы углубимся в то, как эти технологии действительно работают. Мы рассмотрим проблемы, которые пытаются решить HTML и CSS, и то, как они их решают. Мы углубимся в то, как на самом деле работают браузерные движки рендеринга. Мы обретем уверенность в чтении и понимании спецификаций H
Основополагающие знания HTML, необходимые для успешного прохождения фронтенд-интервью. HTML может быть не самой захватывающей темой в компьютерных науках, но он лежит в основе веб-разработки и является обязательным знанием для любого фронтенд-инженера.
10 Супер Адаптивных Веб-Сайтов с HTML, CSS и JavaScript
10 Mega Responsive Websites with HTML, CSS, and JavaScript
Добро пожаловать на новый курс, где вы узнаете, как создавать современные и красивые шаблоны дизайна для своих веб-сайтов. Если вы хотите создать и настроить свое портфолио, стать опытным разработчиком и получить работу, то этот курс для вас. Мы создадим 10 мега-полноценных адаптивных веб-сайтов с использованием трех основных технологий: HTML, CSS и JS.