Autoplay
Autocomplete
Previous Lesson
Complete and Continue
HTML and CSS Complete Course with Hands-on Portfolio Project
Welcome Course
Built a Real-World Website with HTML and CSS (2:08)
General Terms (9:43)
How the Website Works? (2:48)
What Is IDE? (8:30)
First Webpage (11:01)
HTML Fundamentals
About the Section (0:37)
What is HTML? (2:22)
HTML Document Structure (9:22)
Text Element (11:48)
Lists (5:59)
Images (7:24)
Hyperlinks (7:44)
Container Elements (10:56)
What is Semantic HTML? (3:39)
Creating Tables with HTML (7:17)
Colspan & Rowspan (6:19)
Working With Form Elements (15:16)
Checkbox (6:23)
Input type; Radio & File (7:00)
Select & Option (6:05)
New Visual Studio Code Extensions (3:12)
Challenge (4:00)
Let’s Make the Challenges (16:21)
Challenge Solutions Continue (10:00)
Quiz
CSS Fundamentals
About the Section (1:34)
What is CSS (3:16)
Styling Methods-Inline, Internal and External (13:17)
Let’s Do Some Styling (18:46)
Combining Selectors (7:00)
Style Operation With Class and Id Assignment (15:19)
Order of Priority in CSS (9:41)
Working with Colors (7:48)
Working with Colors on Code (9:40)
Using Border in CSS (7:55)
Pseudo-Class in CSS (12:49)
Styling Hyperlinks With Pseudo-Class (9:38)
Crome DevTools (12:50)
Important Advices for CSS (13:11)
Challenge 1 (26:52)
Box Model (3:49)
Margin & Padding (15:54)
Let’s Start Using Margin & Padding (21:36)
Dimensioning with CSS (16:53)
Let’s Centre Our Page (8:07)
Challenge 2 (15:32)
Types of Boxes (16:50)
Element Positioning with CSS (15:32)
Use of Fixed and Sticky (11:28)
Creating Shadow in CSS (10:30)
Challenge 3 (21:15)
Quiz
Layout on Webpage
About the Section (0:43)
3 Ways to Create Layout on Web Pages (5:15)
Float (18:24)
Flexbox (12:26)
Flexbox Overview (5:17)
Let’s Keep Using Flexbox (13:35)
Flex-Wrap (8:25)
Adding Flexbox to Our Project (11:35)
Adding Flexbox to Our Project - 2 (17:03)
Let’s Change the Page Layout with Flexbox (8:26)
Introduction to CSS Grid (12:52)
What Is CSS Grid? (4:44)
Let’s Continue Examining CSS Grid Features (10:43)
Other Grid Features (9:12)
Quiz
Media Query and CSS Animations
Section Overview (1:33)
Media Query and CSS Animations Code Samples (3:37)
Responsive Menu Making With Media Query (8:42)
CSS Animations (13:38)
Making a Slider Menu With Transform (9:26)
Keyframes (4:11)
Animation Examples With Keyframes (17:16)
Quiz
Portfolio Website
Let’s Start Creating the Sections (9:21)
Portfolio Website (4:49)
Let’s Start With Header Creation (18:26)
Home Section (14:37)
About Section (5:44)
Services Section (8:26)
Portfolio Section (12:17)
Contact Section & Footer (15:38)
Responsive Page Design (16:21)
Media Query and CSS Animations Code Samples
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock