Modern HTML & CSS From The Beginning Course

24h 21m 52s
English
Paid

Course description

This course is suitable for both beginners who want to learn HTML and CSS from scratch to an advanced level, and developers who want to implement interesting projects and improve their CSS skills.

The course includes hours of training and modules for learning CSS properties and concepts, small tasks and mini-projects, as well as three full-fledged projects that we will deploy on platforms like Netlify and Vercel.

Read more about the course
What you will learn: - Learning modules, mini-projects, assignments, and 3 real projects - Semantic markup of HTML5 and basics of CSS - Box Model, positioning, Flexbox, CSS Grid - Creating responsive websites with media queries, flexible layouts, relative units - Transitions, transformations, animation using keyframes - BEM methodology (Block Element Modifier) - Version control in Git and site deployment

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 200 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Modern HTML & CSS From The Beginning Course

0:00
/
#1: Welcome To The Course

All Course Lessons (200)

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

Unlock unlimited learning

Get instant access to all 199 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Flexbox Simplified

Flexbox Simplified

Sources: kevin powell
Flexbox is a wonderful tool that opens up the world of responsive layouts, but it can be hard to predict exactly what's going to happen when we use it, and it's full of sometime...
4 hours 41 minutes 57 seconds
Full-Stack Web Developer Bootcamp with Real Projects

Full-Stack Web Developer Bootcamp with Real Projects

Sources: udemy
This Course covers full process of web development from scratch till deployment with domain name. We will use Node, Express, MongoDB to build Server side which
22 hours 11 minutes 13 seconds
The Ultimate HTML5 & CSS3 Series: Part 3

The Ultimate HTML5 & CSS3 Series: Part 3

Sources: codewithmosh (Mosh Hamedani)
Have you always wanted to learn web development but didn't know where to start? Tired of lengthy, boring and outdated courses? This course is for you. A fun...
5 hours 38 minutes 4 seconds
CSS Animations & Transitions

CSS Animations & Transitions

Sources: leveluptutorials
Welcome to the CSS Transitions course. In this course, you will not only learn the basic techniques, but also dive deeply into creating animations and transitions. In practice, ...
2 hours 9 minutes 35 seconds