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

HTML 5 Canvas

HTML 5 Canvas

Sources: udemy
HTML Canvas is used to draw graphics and animations directly on a web page using JavaScript. Canvas is the most talked about HTML5 feature that allows web devel
3 hours 19 minutes 28 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 Responsive Web Design Bootcamp

The Responsive Web Design Bootcamp

Sources: kevin powell
It gives you a deep understanding of CSS and responsive design while keeping you fully engaged along the way. You'll learn to build four different layouts: a blog, a landing pag...
17 hours 36 minutes 12 seconds
The HTML & CSS Bootcamp 2023 Edition

The HTML & CSS Bootcamp 2023 Edition

Sources: udemy
This course will teach you everything you need to know about HTML, CSS, and web design to build your own stunning websites from scratch. Instead of just watching me code, you’ll...
37 hours 18 minutes 8 seconds
Web Developer Bootcamp with Flask and Python in 2022

Web Developer Bootcamp with Flask and Python in 2022

Sources: udemy
Welcome to the Web Developer Bootcamp with Flask and Python! In this course, you'll learn how to build and deploy dynamic websites using Python, Flask, MongoDB,
19 hours 57 minutes 43 seconds