HTML & CSS Tutorial

Products I Use:

Disclosure: This video is not sponsored. Some links above are affiliate links, and l may earn a small commission from any purchases at no additional cost to you. Thank you for supporting my channel!

Setup 00:00
Course Structure 02:13
Html 04:28
Chrome And Vs-Code Intro 07:14
Install Google Chrome 08:02
Install VS-Code 11:12
VS-Code Overview 13:01
Create A Project 17:10
First Webpage 19:34
Basic HTML Document Structure 24:22
Implement Page Structure 26:56
Live Server Extension 30:15
Word Wrap And Emmet 36:13
Headings 43:32
Paragraphs 47:41
White Space Collapsing 49:33
Lorem Ipsum 50:57
Image Basics 54:11
Multiple Images 58:00
External Images 1:02:21
Nice Images 1:05:46
Width And Height 1:09:49
Crop Images 1:13:10
Comments And Line Breaks 1:16:10
External Links 1:21:54
Internal Links 1:27:09
Same Page Links 1:31:43
Empty Links And Images As Links 1:38:06
Sup And Sub Elements 1:42:03
Strong And Em Elements 1:44:35
Special Characters 1:47:34
Unordered Lists 1:50:57
Ordered Lists 1:54:54
Nested Lists 1:55:58
Table Element 1:57:42
Forms - Input Elements And Submit Elements 2:00:34
Forms - Textarea, Radio,Checkboxes, Select 2:14:10
Prettier Code Formatter 2:25:46
Keyboard Shortcuts 2:30:53
Head Element And External Resources 2:41:08
Css Tutorial Intro 2:45:57
Workspace Setup 2:47:26
Text Editor Setup 2:50:46
Inline CSS 2:56:34
Internal CSS 3:00:40
External Css 3:03:03
Power Struggle 3:13:00
CSS Syntax 3:17:57
Element Selectors 3:25:32
Grouping Selectors 3:28:11
ID Selectors 3:30:13
Class Selectors 3:34:54
ID And Class Selector Summary 3:39:36
Div And Span Elements 3:41:29
Inheritance In CSS 3:49:28
Inheritance More Info 3:55:02
Last Rule, Specificity And Universal Selector 3:57:52
Colors Intro 4:07:32
Color And Background-Color Properties 4:07:59
Color Names 4:12:15
RGB 4:15:02
RGBA 4:21:29
HEX Values 4:31:14
VS-Code Color Options 4:37:23
External Resources For Colors 4:40:13
Units Intro 4:42:05
Pixels, Font-Size, Width, Height 4:42:34
Percent Units 4:48:17
EM Units 4:53:14
Rem Units 4:58:59
VH And VW Units 5:02:00
Default Browser Styles And Chrome Developer Tools 5:08:17
Calc Functions 5:20:21
Min-Height, Max-Height 5:27:21
Typography Intro 5:37:52
Font-Family 5:38:14
Font-Stack And Generic Fonts 5:40:51
Google Fonts 5:43:47
Font-Weight And Font-Style 5:50:36
Text-Align And Text-Indent 5:57:44
More Text Properties 6:00:44
Box-Model Intro 6:12:02
Padding 6:12:18
Margin 6:21:51
Border 6:28:40
Border-Radius And Negative Margin 6:35:09
Outline Property 6:39:48
Display Property Intro 6:49:00
Display Property 6:49:16
Basic Horizontal Centering 6:56:56
Mobile Navbar Example 7:01:13
Box-Sizing, Border-Box 7:13:59
Display Inline-Block 7:21:28
Display:none, Opacity, Visibility 7:25:01
Background Images Intro 7:33:36
Setup 7:34:26
Background-Images Basics 7:37:15
Background-Repeat 7:41:49
Background-Size 7:49:13
Background-Position 7:52:30
Background-Attachment 7:57:03
Linear Gradients 8:03:33
Background Image Overlay 8:16:27
Colorzilla 8:26:53
Float, Positions, Media Queries, Z-Index Intro 8:30:30
Float Property 8:31:10
Float Property Layout Example 8:36:42
Position Static 8:43:57
Position Relative 8:47:33
Position Absolute 8:51:12
Position Fixed 8:56:52
Position Sticky 9:00:58
Media Queries 9:05:43
z-index 9:22:19
::Before And ::After Basics 9:31:09
::after and ::before Example 9:38:52
Selectors Intro 9:54:41
Basic Selectors 9:55:33
Descendant And Child Selectors 9:58:35
First-Line And First-Letter Selectors 10:03:16
:hover Pseudo Class Selector 10:04:22
Link Pseudo Class Selectors 10:08:09
:Root Pseudo-Class Selector 10:12:42
Transition and Animation Intro 10:18:36
Transform:transition() 10:19:46
Transform:scale() 10:26:01
Transform:rotate() 10:28:39
Transform:skew() 10:32:23
Transition Property 10:34:15
Multiple Transitions 10:37:43
Transition - Delay, Shorthand, All Properties 10:40:05
Transition-Timing-Function 10:45:20
Animation 10:55:15

[paulowiredu]

I remember learning html and css three years ago, this was the channel i used to learn. Now i am coming back, i have spent almost a week looking for this channel. I am glad i finally found it. :)

[CodingAddict]

Hello Everyone,
This is a third/latest version of my HTML/CSS Tutorial
More real world examples as well as better video and audio.
Source Code : www.johnsmilga.com

[infohub]

Channels like this should have above 2M subscribers. So educative with so much attention to details. Thanks a lot John. I'll always be grateful to you for your time and effort in making these videos.

[gitakp]

seriously addicted to learn from you, finishing up this one and headed to Javascript, thank you so much John for creating these tutorials and specially making these available for free. May karma be /w you my friend.

[juanvitor]

John, I guess you're the best teacher out there for these web tools, I can't actually express how much you helped me. I wish that people around me could watch your content as well but the language barrier is real... If you could add subtitles, the range of people that you affect and therefore change their lives would increase substantially. Wish you the best, great content, you're a gift.

[emmanueljoseph]

This guy is really underrated, I have taken several courses online by different tutors and I can tell you that John is by far the best tutor I ever come across. He teaches in such a way that you will understand everything step by step.
John thank you very much.

[SamimKhan-ovlo]

Best course of CSS, I buy your course in Udemy after watching this, you are the best instructor.

[leticiaespino]

Thank you kindly for spending a few minutes explaning the file path, I was having problems linking pictures and files. I encourage anybody who wants to learn web developing to take this great comprehensive course.

[aliemarah]

Your tutorials are far way the best of all the tutorials i have watched on youtube. Thanks a lot!!!

[ericboss]

You are the best
I am very glad that I found you!

[NickyDekker]

Easily one of the best, if not the best teacher on YouTube!

[ritviksapra]

I am trying to learn these skills and get a good package job. I was always afraid of software development but I'm finally being brave and learning it. I didn't have money to buy courses that my friends did...I felt really bad and very scared how am I supposed to scale all this subject. And then I found your channel....and I really got hope. When I get a job at Google or Microsoft, I will find you and say thank you a 1000 times! I am really so glad for this content! I wish you so much success!!

[arshaan]

I just found treasure. I am from India, and it is very hard to find good mentor and this guy has a tutorial on every full stack topic. Wow.

[sujalsamai]

Thank you so much!!
Your way of explaining things is so entertaining that understanding every single thing seems so easy!!

[leticiaespino]

Thanks John, one hour in and I found such great content, everything is well explain and clear.

[mahadabdurahman]

This tutorial is amazing. I just completed the whole course. Thank you, John, for such an amazing course. Your teaching is very explanatory and i would like to take more courses from your page and udemy. Thank you, a million times.

[hafidhaljufaily]

My friend you are underrated. You should be high up there with the best online instructors. Your teaching style and methods are just perfect and I learned a lot from you that it took me months to learn otherwise. Keep it up. I hope you will have react native tutorials too (project based)

[abdullahbinmamun]

you know what? you are the best. you the best teacher john. i wish i could meet you in person. you have the ability to hold the concentration of listeners and viewers. 💕

[olowojuniafolabi]

You are the best instructor I've ever seen, keep it up.

[MajdyCalisthenics]

in my opinion youre the best on YT... and i think it would be more useful if you active the subtitle to your video! big love