Modern HTML & CSS From The Beginning Course

24h 21m 52s
English
Paid
November 8, 2024

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.

More
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 Modern HTML & CSS From The Beginning Course

Join premium to watch
Go to premium
# Title Duration
1 Welcome To The Course 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

Similar courses to Modern HTML & CSS From The Beginning Course

The Ultimate HTML5 & CSS3 Series: Part 3
The Ultimate HTML5 & CSS3 Series: Part 1
HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid
Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!udemy

Duration 12 hours 13 minutes 30 seconds
Tailwind UI (Application UI + Marketing)
50 Projects In 50 Days - HTML, CSS & JavaScript
Page Transitions

Page Transitionssuperhi.com

Duration 4 hours 10 minutes 33 seconds
10 Mega Responsive Websites with HTML, CSS, and JavaScript