VehiclesFashionRecipesBlogsHuntTravelsSportFunHandmadeITEducation
Mini-Games
x

x
zakruti.com » IT - Software » freeCodeCamp.org
Learn HTML5 and CSS3 From Scratch - Full Course

Learn HTML5 and CSS3 From Scratch - Full Course

FBTwitterReddit

video description

Rating: 4.0; Vote: 1
HTML and CSS are essential skills to have for a career in web development. In this course we will cover both languages from the scratch and by the end of the course you will be creating your own projects. (0:00) Intro (2:47) What is HTML (5:11) Google Chrome and Visual Studio Code (6:02) Download Google Chrome (8:11) Download Visual Studio Code (13:58) Create A Project (16:09) First Webpage (20:35) Visual Code Settings (22:48) Download Live Server Extension (26:59) Basic HTML Document Structure (29:05) Implementing Basic Document Structure (34:50) Word Wrap and Emmet (40:24) Heading Elements (44:33) Paragraph Elements (47:50) White Space Collapsing (49:22) Lorem Ipsum Dummy Text (51:17) Images (57:15) Multiple Path Options (1:00:06) External Images (1:02:43) Nice Images (1:05:49) Width and Height Attribute (1:08:40) Crop Images (1:12:07) Proper Path (01:15:37) Comments And Line Breaks (01:19:47) External Links (01:23:32) Internal Links (01:25:53) Links Within Page (01:30:10) Empty Links (01:32:39) Sup And Sub Elements (01:34:39) Strong And Em Elements (01:37:02) Special Characters In Html (01:38:58) Unordered Lists (01:41:25) Ordered Lists (01:42:18) Nested Lists (01:43:57) Table Element (01:46:10) Forms - Input And Submit Elements (01:58:12) Forms - Textarea - Radio - Checkbox (02:09:40) Prettier And Code Formatter (02:14:56) Keyboard Shortcuts (02:26:06) External Resources - Head Element (02:30:15) Html Project Intro (02:32:16) Project Setup (02:35:17) Download Images (02:39:02) Logo, Heading, Navigation (02:42:51) Home Page Completed (02:54:30) About Page (02:58:09) Numbers Page (03:04:14) Contact Page (03:09:11) Resource Files (03:09:42) Text Editor Setup (03:16:03) Css Intro (03:17:35) Workspace Setup (03:20:22) Inline Css (03:23:40) Course Resources (03:25:01) Internal Css (03:28:00) External Css (03:39:40) Power Struggle (03:44:17) Basic Css Syntax (03:52:27) Element Selectors (03:55:15) Grouping Selectors (03:57:27) Id Selectors (04:02:09) Class Selectors (04:06:17) Id And Class Selector Summary (04:08:30) Div And Span Elements (04:16:44) CSS Inheritance (04:20:08) More Info On Inheritance (04:22:30) Last Rule, Specificity, Universal Selector (04:27:33) Colors Intro (04:28:13) Color And Background-Color Properties (04:32:33) Color Names (04:33:30) Rgb (04:37:46) Rgba (04:44:33) Hex (04:50:58) Vs-Code Color Options (04:52:57) External Resources (04:55:39) Units Intro (04:56:18) Pixels, Font-Size, Width, Height (05:02:13) Percent Values (05:05:44) Em Values (05:11:42) Rem Values (05:14:41) VH And VW (05:19:14) Default Browser Syles (05:29:07) Calc Function (05:33:38) Typography Intro (05:34:07) Font-Family (05:36:47) Font-Stack Generic Fonts (05:39:23) Google Fonts (05:46:00) Font-Weight Font-Style (05:53:30) Text-Align And Text-Indent (05:56:52) More Text Properties (06:04:31) Box-Model Intro (06:04:53) Padding (06:13:28) Margin (06:19:01) Border (06:23:57) Border-Radius, Negative Margin (06:27:24) Outline Property (06:34:58) Display Property Intro (06:35:19) Display Property (06:43:26) Basic Horizontal Centering (06:48:11) Mobile Navbar Example (06:58:29) Box-Sizing Border-Box (07:06:46) Display Inline-Block (07:09:29) Display:none, Opacity, Visibility (07:16:20) Background-Image Intro (07:16:43) Background Images Setup (07:19:43) Background-Image-Property (07:27:45) Background-Repeat (07:34:07) Background-Size (07:36:58) Background-Position (07:41:18) Background-Attachment (07:47:04) Linear-Gradients (07:56:49) Background Image Shortcuts Combined (08:06:56) Linear-Gradient Colorzilla (08:11:08) Float Position Intro (08:11:47) Float Property (08:19:18) Float Property Column Layout Example (08:25:59) Position Static (08:30:44) Position Relative (08:33:18) Position Absolute (08:38:42) Position Fixed (08:42:30) Media Quries (08:57:07) Z-Index (09:06:04) ::Before And ::After Pseudo Elements (09:27:14) Css Selectors Intro (09:28:26) Basic Selectors (09:31:07) Descendant Child Selectors (09:35:50) First Line And First Letter (09:36:56) :Hover Pseudo-Class Selector (09:40:03) Link Pseudo-Class Selectors (09:44:36) Root Preudo-Class Selectors (09:51:01) Transform,Transition,And Animations (09:52:17) Transform:transition() (09:58:52) Transform:scale() (10:01:20) Transform:rotate() (10:04:47) Transform:skew() (10:06:31) Transition Property (10:09:13) Multiple Transition (10:11:11) Transition Delay (10:16:36) Transition-Timing Function (10:25:51) Animation (10:35:51) Animation-Fill-Mode (10:40:53) Last Module Intro (10:41:32) Css Variables (10:56:19) Font-Awesome Icons (11:07:55) Text-Shadow Box-Shadow (11:14:44) Browser Prefixes (11:19:23) Semantic Tags (11:24:11) Emmet Workflow Course from John Smilga. https://www.youtube.com/codingaddict John's course on Udemy: https://www.udemy.com/in-depth-html-css-course-build-responsive-websites/?couponCode=ONLYTEN
Date: 2022-03-14

Comments and reviews: 7


1)What is HTML - 2:47
2)Google Chrome and Visual Studio Code - 5:11
3)Download Google Chrome - 6:02
4)Download Visual Studio Code - 8:11
5)Create A Project - 13:58
6)First Webpage - 16:09
7)Visual Code Settings - 20:35
8)Download Live Server Extension - 22:48
9)Basic HTML Document Structure - 26:59
10)Implementing Basic Document Structure - 29:05
11)Word Wrap and Emmet - 34:50
12)Heading Elements - 40:24
13) Paragraph Elements - 44:33
14)White Space Collapsing - 47:50
15)Lorem Ipsum Dummy Text - 49:22
16)Images - 51:17
17)Multiple Path Options - 57:15
18)External Images - 1:00:06
19)Nice Images - 1:02:43
20)Width and Height Attribute - 1:05:49
21)Crop Images - 1:08:40
22)Proper Path-1:12:07
23) Comments And Line Breaks - 01:15:37
24) External Links - 01:19:47
25) Internal Links - 01:23:32
26) Links Within Page - 01:25:53
27) Empty Links - 01:30:10
28) Sup And Sub Elements - 01:32:39
29) Strong And Em Elements - 01:34:39
30) Special Characters In Html - 01:37:02
31) Unordered Lists - 01:38:58
32) Ordered Lists - 01:41:25
33) Nested Lists - 01:42:18
34) Table Element - 01:43:57
35) Forms - Input And Submit Elements - 01:46:10
36) Forms - Textarea - Radio - Checkbox - 01:58:12
37) Prettier And Code Formatter - 02:09:40
38) Keyboard Shortcuts - 02:14:56
39) External Resources - Head Element - 02:26:06
40) Html Project Intro - 02:30:15
41) Project Setup - 02:32:16
42) Download Images - 02:35:17
43) Logo, Heading, Navigation - 02:39:02
44) Home Page Completed - 02:42:51
45) About Page - 02:54:30
46) Numbers Page - 02:58:09
47) Contact Page - 03:04:14
48) Resource Files - 03:09:11
49) Text Editor Setup - 03:09:42
50) Css Intro - 03:16:03
51) Workspace Setup - 03:17:35
52) Inline Css - 03:20:22
53) Course Resources - 03:23:40
54) Internal Css - 03:25:01
55) External Css - 03:28:00
56) Power Struggle - 03:39:40
57) Basic Css Syntax - 03:44:17
58) Element Selectors - 03:52:27
59) Grouping Selectors - 03:55:15
60) Id Selectors - 03:57:27
61) Class Selectors - 04:02:09
62) Id And Class Selector Summary - 04:06:17
63) Div And Span Elements - 04:08:30
64) CSS Inheritance - 04:16:44
65) More Info On Inheritance - 04:20:08
66) Last Rule, Specificity, Universal Selector - 04:22:30
67) Colors Intro - 04:27:33
68) Color And Background-Color Properties - 04:28:13
69) Color Names - 04:32:33
70) Rgb - 04:33:30
71) Rgba - 04:37:46
72) Hex - 04:44:33
73) Vs-Code Color Options - 04:50:58
74) External Resources - 04:52:57
75) Units Intro - 04:55:39
76) Pixels, Font-Size, Width, Height - 04:56:18
77) Percent Values - 05:02:13
78) Em Values - 05:05:44
79) Rem Values - 05:11:42
80) VH And VW - 05:14:41
81) Default Browser Syles - 05:19:14
82) Calc Function - 05:29:07
83) Typography Intro - 05:33:38
84) Font-Family - 05:34:07
85) Font-Stack Generic Fonts - 05:36:47
86) Google Fonts - 05:39:23
87) Font-Weight Font-Style - 05:46:00
88) Text-Align And Text-Indent - 05:53:30
89) More Text Properties - 05:56:52
90) Box-Model Intro - 06:04:31
91) Padding - 06:04:53
92) Margin - 06:13:28
93) Border - 06:19:01
94) Border-Radius, Negative Margin - 06:23:57
95) Outline Property - 06:27:24
96) Display Property Intro - 06:34:58
97) Display Property - 06:35:19
98) Basic Horizontal Centering - 06:43:26
99) Mobile Navbar Example - 06:48:11
100) Box-Sizing Border-Box - 06:58:29
101) Display Inline-Block - 07:06:46
102) Display:none, Opacity, Visibility - 07:09:29
103) Background-Image Intro - 07:16:20
104) Background Images Setup - 07:16:43
105) Background-Image-Property - 07:19:43
106) Background-Repeat - 07:27:45
107) Background-Size - 07:34:07
108) Background-Position - 07:36:58
109) Background-Attachment - 07:41:18
110) Linear-Gradients - 07:47:04
111) Background Image Shortcuts Combined - 07:56:49
112) Linear-Gradient Colorzilla - 08:06:56
113) Float Position Intro - 08:11:08
114) Float Property - 08:11:47
115) Float Property Column Layout Example - 08:19:18
116) Position Static - 08:25:59
117) Position Relative - 08:30:44
118) Position Absolute - 08:33:18
119) Position Fixed - 08:38:42
120) Media Quries - 08:42:30
121) Z-Index - 08:57:07
122) ::Before And ::After Pseudo Elements - 09:06:04
123) Css Selectors Intro - 09:27:14
124) Basic Selectors - 09:28:26
125) Descendant Child Selectors - 09:31:07
126) First Line And First Letter - 09:35:50
127) :Hover Pseudo-Class Selector - 09:36:56
128) Link Pseudo-Class Selectors - 09:40:03
129) :Root Preudo-Class Selectors - 09:44:36
130) Transform,Transition,And Animations - 09:51:01
131) Transform:transition() - 09:52:17
132) Transform:scale() - 09:58:52
133) Transform:rotate() - 10:01:20
134) Transform:skew() - 10:04:47
135) Transition Property - 10:06:31
136) Multiple Transition - 10:09:13
137) Transition Delay - 10:11:11
138) Transition-Timing Function - 10:16:36
139) Animation - 10:25:51
140) Animation-Fill-Mode - 10:35:51
141) Last Module Intro - 10:40:53
142) Css Variables - 10:41:32
143) Font-Awesome Icons - 10:56:19
144) Text-Shadow Box-Shadow - 11:07:55
145) Browser Prefixes - 11:14:44
146) Semantic Tags - 11:19:23
147) Emmet Workflow - 11:24:11

reply

Out of the many HTML+CSS tutorials I've watched, this has been BY FAR the most in-depth tutorial, while also allowing for easy comprehension. It's astonishing to me that this is free.
11 hours is nothing in the grand scheme of things. I put the course on 1.25x speed and finished it within a 2 day span. My level of understanding of HTML and CSS is now 100x what it used to be when I was trying other courses out. I'm going to hone my skills and develop some simple webpages now, and hopefully move onto some Javascript courses.
Very grateful to you sir, for the wonderful experience.

reply

Hello to whomsoever,
Just wanted to let you know it's been a month since I'm learning this.. doing night shift jobs & learning is not easy but I'm not gonna give up.. I'm finding the teaching really helpful & wish to make a career in frontend web development.. currently - 9:30.05.. point is.. if I can do this then sure you can.. consistency is the key
All the best!!

reply

THANK YOU VERY MUCH . I just finished your course and it's amazing, everything is well explained. At first I didn't think I could finish it (11 hours :D) but I'm glad I pushed myself every day.
reply

Just Finished this video ,Worth Wathcing now I will head towards advanced CSS and some projects then Javascript and react . thank you so much sir for such a premium content
reply

6.48 hours into the video, I love what I am learning. Amazing video. I am just really tired of all the note taking and learning. Thanks for the quality content though
reply

The worst html and ccs tutorial that I've seen ever -
don't start from here, the only thing that you will achieve by warching this tutorial is confusing.

reply
Add a review, comment






Other channel videos