Learn HTML5 and CSS3 From Scratch - Full Course

[@CodingAddict]

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

[@mackenzieowens161]

wow ty for that mate, glorious

[@rewrose2838]

First come, first appreciate

[@milanmatanovic574]

Thank you very much for this, helps quite a bit.

[@keithmonroe383]

Man you really are a coding addict. Thanks a lot!

[@germanmora9348]

legend

[@viro0os904]

To who ever see’s this comment : i know the feeling when you see an 11h long vid, but trust me you can do it! You are no different from the people who have finished this course, i am 5h in and it seems hard but do not give up, you chose this path for a reason so giving up is not a choice!

[@hamzabriguich9238]

Ty for the inspiration and i have a question how can i download the things that he downloaded on the video like images and headlines.. cuz we're watching the course on yt not udemy

[@viro0os904]

@@hamzabriguich9238 i’m not sure what you mean but if you meant where to download images from you can download them from your browser and import it to your vs code, or you can use them in your html without importing by copying its path.

[@arpitshukla3250]

Thanks for the motivation brother. 😎👍

[@alberttobijoseph566]

You are encouraging. I just started and you read my mind. Thanks

[@wiNtersPista]

It was not hard at all

[@kashyapshirodkar9013]

Some day in the future we're all gonna come back and recall this as the first video which got us started!

[@abdirahmanfille4989]

That is right

[@BioHazard-ur6ju]

True

[@indianathe3rd742]

Ha you can't imagine the relief that thought gives me, somehow I don't know why

[@indianathe3rd742]

@Conshe Tumare too soon

[@TalsonHacks]

…And remember that this epidemic is what started it all.

[@BuiltbyJay]

I know this video is long but it really helped me grasp the basics of html and css. Now I've built projects and learnt SASS. Currently learning JavaScript. Don't give up.

[@favourpopoola9819]

You were able to see what was being done? I couldn't see a thing. Is there something I can do?

[@BuiltbyJay]

@@favourpopoola9819 Well I'll try my best to answer your question. Try writing down notes and take your time. Also practice everything done in the video,just watching won't help--that's if you weren't doing that already.And also find someone who's ahead of you in programming (a mentor),to help you when you get stuck. Hope this helps😊.

[@dogonwall6680]

this video is 3 years old is it still relevent to current html version and which pathing did you took to learn webdevlopment can you tell me i want to learn as quickly and as efficiantly as possible

[@donaldsawyer2618]

Is your goal to become a software engineer?

[@dogonwall6680]

@@donaldsawyer2618 probably yes

[@CodingAddict]

I misspoke in 72) Hex - 04:44:33 Hex does not give you more color options. I was trying to make a case that it might be easier to select colors using hex since you can do shorthands (#fff) and use hexadecimal integers, so sort of having more selecting options. But It came out as more colors options for sure. My bad.

[@imd5363]

Thanks

[@AnkurKumar-ur1cj]

@FreeCodeCamp Pin this comment.

[@dinowemyss84]

Hello, I have problem with downloading live server extension and I stuck on it bcs I want to do everything like you did. It says that this extension is enabled globally, please help.

[@adrianturjak2486]

Dino Wemyss i'm having that problem too... have you done something?

[@whinytwat9383]

I was about to comment about it when I came across this. To the students: Hex and RGB give you EXACTLY the same amount of options i.e. 256 for each 'broad' shade on the color spectrum (red, green, and blue) , the only difference is that each shade is expressed differently. In RGB you have one number for each shade for a total of 256 (0-255). In the Hex you have two digits for each shade where each digit can take a value from 0-15 (0-9, then abcdef representing 10, 11..., 15), putting the total options for each shade at 256 (16*16). To summarize, you have 256 options for each primary color.

[@viccodes3671]

Took off my ad blocker because I have respect for y'all.

[@SaifulIslam-in9wl]

lmao!

[@sabatauqeer1]

:D

[@LiegeMaximo]

bruh

[@basedneeble7350]

Hitting it raw

[@dipankararora2633]

yea me too after reading the comment XD

[@nuranura3209]

day one - 57:58 day two - 1:50:00 day three - 4:01:00 day four - 6:04:34 6:30:00 day six - 7:51:00 day seven - 8:42:30 day eight 10:12:00

[@Ouba1]

much love

[@dannyagniawan3295]

you give me a big help, thanks

[@oozecloud4511]

is this really html5 and css3?

[@nuranura3209]

@@oozecloud4511 yes

[@MeBe35]

You were so close

[@anindagoswami6793]

Day1 -1:58:00 Day2 -3:10:00 Day3 - 5:25:00 Day4 - 7:00:00 Day5 - 9:06:20 Day6 - 11:30:52 it's a detailed video about HTML and CSS go for it.. best of luck.

[@riversmakris]

is it very worth it?

[@muazzumshaikh5597]

@@riversmakris yes it is worth it

[@rokrok27]

bot comment

[@discreet_boson]

Freecodecamp be like: I'm about to start this man's whole career

[@mr.marius5094]

hahaha dude that was so funny cuz its not end career :))))

[@itsmariaa18]

bruh i wish!!!!!! im gonna complete this now, i need a dif career path

[@septic7301]

ikr

[@mr.marius5094]

@@Mo-zx4ez normally the meme says: I'm about to end this men whole career. And this is the opposite 🤣🤣🤣

[@ante8146]

@@itsmariaa18 did you do it?

[@mindsetinvestors1579]

DONE! I took the regress way of learning by doing everything he was doing as I was watching the tutorial, pausing the video, and rewinding it back hundreds of times, taking 19 pages of notes and working on the project with my own inputs. What an amazing tutorial, and I couldn't be any happier with the delivery. John, you don't only have the skill and talent for coding, you also are wonderful at communicating and delivering what you know to others in a manner a child will understand. Keep up the good work, brother!

[@drgarad]

Hey Mindset, I am thinking about WATCHING this 11 hours course, and what I can do with it, have you still built it with a basic HTML website, any updates?

[@ranausamasaleem4980]

Bro can u send me the pictures of your notes.... It will really help me plz reply to that.... I will send u my fb or ig account if u want to send me pictures of ur notes

[@arthurion]

@@ranausamasaleem4980 there is no point in looking at other people's notes, otherwise the meaning disappears, you need to make your own or not do it at all

[@laertlani2826]

@@arthurion Agreed. if you're gonna look through 19 pages for something you're not clear on you might as well watch the video.

[@js8597]

Im lazy so i just make notes as comments within the html and css docs themselves explaining the code that comes before it.

[@sergeyzosim]

Whos downvoting? Its high quality FREE course. Author is sharing his knowledge for 11 hours. How come you could press that downvote button?

[@Ayntak]

Maybe they'r crying cause no project at the end.. :( I voted up for sure.

[@abrar_16m]

Probably angry teachers 😂.

[@infosec-c7g]

@@abrar_16m Probably, loooool

[@shubham4516]

How many days did you take to finish this completely? I am deciding to start now !

[@ranahrantau4517]

@@shubham4516 3 days with 1.4x speed play

[@mayankpandey2220]

Right now I'm at 10:41:21, just came here to appreciate this awesome tutorial. This was my very first experience to start with coding and I think now I feel better and will look forward to learn the other languages!❤️

[@sarthakbajaj8798]

Do you think this video is good enough to learn basics till intermediate level of html and css or it covers the advanced level of html or css too?

[@xZipperEdgex]

@@sarthakbajaj8798 I’m currently starting this video. But I do know Travesty Media has a pretty good started tutorial for HTML and CSS here on KZbin.

[@mayankpandey2220]

@@sarthakbajaj8798 Yes!, This is a great video complete it once and do one or two projects and hop on to another language!

[@sarthakbajaj8798]

@@mayankpandey2220 thanks a lot

[@kuznetsov5172]

@@sarthakbajaj8798 this will only teach you the basics, 11 hours is not long enough to "learn" http and css. there is no short cut to it but hard work.

[@navidmohammadzadeh2141]

I watched the whole course and the only thing that I can tell you guys is that this course is highly recommended and it would be one of the best tutorials you may find in this field. It is quite handy and you also enjoy the instructor since he is quite professional and has a sense of humour. Good luck to those who like to watch the whole course. It takes three days four hours daily.

[@ImShabedo]

good comment

[@hajji384]

Good review man 😘

[@МаоЦзэдун-б5с]

i finished the course but where is CSS project :D oh, well, do something by myself

[@joshboss4892]

@@МаоЦзэдун-б5с How was this course? I want to start but I don't think I can make quality porfolios like i see online

[@mandanap]

yeah it's true when you watch only, if you want to practise as well then takes much longer

[@roryJamrock]

KZbin needs to implement an "extra like" or "love" that we can express towards videos. This is great stuff man.

[@ParzivalHomage]

there is a button called 'DONATE' for that ;)

[@bing.chilling_7]

There is a option called *JOIN*

[@muhammadwaqasiqbal8243]

I just completed the whole video. It took me 6 days to complete it and i must say the guy in this video is an amazing teacher and fun too. If you are starting to learn HTML and CSS from the scratch this is the best video you can learn it from. Thank you for providing such a quality content and that too completely free.

[@sipintarpatrick]

the best html and css tutorial i've ever seen on youtube. thanks learning a lot from you, sir.

[@aleealee9576]

did this make you able to build a project ?

[@severinelegon7741]

I just sat through the whole video during a week period, took notes as I went and replicated the examples on studio visual code for myself. Thank you so so much, I have learned so much! I am now ready to go through my notes and practice and do some personal projects until I get completely comfortable with HTML and CSS!! Can't wait to get better and eventually learn JavaScript!! I am trying to change my career path and learn at my own pace! I hope to become a web developer and this had been my first step!

[@subiebugeye02]

Severine Legon good luck to you!! I to am doing the same.

[@maqsood.ahmad999]

best of luck form become legend.

[@umarabdulrahman1396]

Notes are really helpful.

[@TrailersYT]

How much have you learned in these 2 months?

[@Chaves8888]

Me too.

[@123imnotmomo3]

strangely I feel comfort at the fact that we are all watching this video during quarantine in order to develop new skills. lets stay motivated guys!

[@Hehehehehoho]

yup!

[@SimpleSubash]

how is it going?

[@pinkithecat9101]

annnnnnnd nothingggggggg :DDDDDDD

[@guyinternet2018]

Whatever it takes bro

[@hahavibes24]

How to make CSS switch / toggle / custom checkbox - only HTML and CSS kzbin.info/www/bejne/qZvJqGimhNeMnck

[@Molivi]

I just finished the tutorial (after 3 days), and I can say it is pretty much equivalent to my University course! Thanks for the detailed video, it had everything! I suggest x1.25 speed to save 3+ hours in the long run. have fun watching :)

[@godwinfrance2156]

where you able to access the codes ?

[@healingyourself2952]

Which university

[@VinyZikss]

3 days? Damn I spent 1 week watching it. Although I kept pausing all the time to write things down...

[@siddhartharoy5263]

It is much from than your university for sure !

[@VinyZikss]

@@igauravpandey yeah bro, it's better to go slow and understand everything than go fast and miss important stuff

[@heidyalpizar]

Two years later after you uploaded this video I find it and is still so useful! Your explanations are very clear and to the point. Thank you so much!

[@helenodoma]

Please who is the tutor in the video he is so good

[@wim874]

I've learned more with this video, than 1 year of class in university. The only thing I regret about this movie is that i didn't discover it sooner.

[@ripscru8032]

you discovered it now

[@zedhacking]

@@ripscru8032 lol

[@hahavibes24]

How to make CSS switch / toggle / custom checkbox - only HTML and CSS kzbin.info/www/bejne/qZvJqGimhNeMnck

[@harambe2185]

I learned more in 3 days than 5 years in highschool. Thank you!

[@Saad-mh8rb]

no one spends 5 years in high school

[@Peanutz4life]

@@Saad-mh8rb canadians do

[@David-rq1ok]

@@Saad-mh8rb us in south africa do

[@ph3mmy136]

@@Saad-mh8rb I spend 6

[@101-c6y]

@@Saad-mh8rb In Scotland I was in 6 years.

[@abazur7742]

omg, i'm glad i'have already been through this... Good luck to every one, who just started their journey!

[@ameya408]

is it worth

[@BeattapeFactory]

Weird flex but ok

[@conscious_competence3703]

@@ameya408 I'm on hour ten and it seems pretty worth it to me.

[@maryshchenkko]

( For me ) 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

[@kunaalbangia2379]

Thanks

[@gloemanuel]

I'm 39 years old and I'm starting now. Hope to improve and work like a developer. Wish me good luck if i'm not to late...

[@Mellow-Minded]

Good luck :D

[@gloemanuel]

Thnx @seloha 😊

[@lilmermaid5239]

you're great ! wish u best of luck

[@gloemanuel]

@@lilmermaid5239 thanx! 🙏

[@sorein_7]

I'm 37 , and i just started also ! :) Good luck !

[@shiva-fe5ke]

2 hours through this course and already very satisfied with the web I created. Thank you for being such a great teacher

[@agungakmal6715]

wow

[@twb_luis915]

Parents: you can watch one video before you go to bed

[@maheshguptha9796]

Hahaha

[@Xcceler]

That's a good one 😂

[@prashantchawla5996]

i am doing this in windows and my settings arent working properly they do not come with the left hand tab full of suggestions like his does , did you perhaps have the same problem could you tell me what i am doing wrong

[@KA-cm3nv]

I wish I watched this when I was in high school. Now I’m trying to get out of my shitty job at 30 lol

[@hovasg1085]

put you to sleep real quick 😂

[@ogbonnayachikwado1079]

Guys, this dude deserves an award in this field, just finished the video and I'm super excited about the massive knowledge I got from this incredible video...1milion thumbs up to you

[@SilvaOnTube]

I have to agree. I have seen his courses on Udemy for quite some time but had elected to buy others. His KZbin channel is amazing!

[@valentinaiyamu]

Hello please I couldn't access video resources, can you help?

[@SilvaOnTube]

@@valentinaiyamu I posted a comment "for clarity's sake." The jump at about the 43:07 time mark is to a course he has on Udemy. Only if you have bought the course can you download the resources to which he refers. It's harder, but you can pause and take notes.

[@glgunblade]

I like how he teaches it to us like we're dummies, and I mean that in a good way. Far too often too many instructors never explain the whys and use too much technical jargon quickly blowing throw a explanation. Sure this way it can be a bit slow depending on how much you already know but at least you know down to the fine details WHY you should be using something in laymans terms and actually understand it and absorb it into your brain. There really isn't enough of that.

[@zippytyro]

That's startling that y'all are putting so much work. Lots of love from India.

[@alphabetadministrator]

This is a divine html and CSS tutorial. I sincerely appreciate it!

[@prnjl-6175]

The Amount of joy after completing this course can't be expressed, Trust the process, get it done. Future self will thankyou.

[@Pepe-jw7xw]

Some people were so overwhelmed with his hardwork that they cried and accidentally *disliked* his video .....

[@thegodfatheram]

😂😂😂😂

[@dkatro548]

This is the best course, you're not just learn about HTML + CSS, you also learn about the work environtment! Good job John, thanks!

[@tamjidibnakabir4856]

Any group for improvement of coding!?i wanna join

[@sachin__ak]

Holy grail of HTML and CSS!🔥perfect starting tutorial for a web dev.

[@dexterluna1436]

Day 1: 1:39:21 Day 2: 2:43:29 Day 3: 4:23:27 Day 4: 6:44:17 Day 5: 7:09:25 Day 6: 10:06:31 Day 7: 11:30:52 Done! Thank you very much!

[@KTones]

Who ever create this video, you will go straight to heaven.

[@immanuelallan2940]

haha funny

[@umidabdurahmonov9919]

InshaAllah

[@briandsouza7854]

@@immanuelallan2940 😂

[@wmartin047]

AMEN!!

[@FunFacts_3121]

llol

[@cerealbawxtv]

Just over an hour in. Loving it so far! I actually feel very confident that I'll learn and become very good at this whole coding thing. You're an amazing teacher. You make things very clear and easy to understand for a complete beginner like myself. Thank you so much!

[@SachinSingh-vy7pm]

kzbin.info/www/bejne/bGjYmYN7a6mBj7c

[@hahavibes24]

How to make CSS switch / toggle / custom checkbox - only HTML and CSS kzbin.info/www/bejne/qZvJqGimhNeMnck

[@rookieprogrammer1767]

How did things go 9 months later?

[@Ilovedoingthingsthatidontknow]

if u there plz help me out with the little thing waiting for reply

[@cerealbawxtv]

@@rookieprogrammer1767 I fell off track a bit with my studying but I have a basic understanding of HTML and CSS at this point. Currently getting into JavaScript now and hopefully I could land a job as a developer early in the new year haha

[@shalinisrivastava9840]

This is my first comment on any youtube video. I dont comment but hardwork of John Smilga really compelled me to do so. His video is really awesome, the only video one needs to watch.Really thanks John...for providing such wonderful course for free. I really appreciate your effort. Love you John .

[@1GhanaBa]

I have spent about a month and some weeks on this and I must say it's worth it... For the first time I am going to build my own project am happy, God bless the instructor

[@Nox2468]

Just finished the whole course. Wanted to say a huge thank you to author for coming up with such amazing lessons! Cheers from UA!

[@Ilovedoingthingsthatidontknow]

u there ? if yes then plz help me out with a little thing ..........waiting for reply

[@subhuman7695]

11 HOOUURSSS ??? WOOOWWW 😱 This is awesome... I hope this summarizes everything on these two markup languages 😊 Good luck Beginners.... 👍🏼

[@aerdon0856]

Done! I started on June 7 and finished on August 9. The total days I studied through this course was 19 days. All the gaps are days wherein I tried and applied what I've learned by developing a website for my father's business. Now, I'm not sure I have EVERYTHING he just said on the top of my head, but I kept a note through which I could refer to PLUS all the resources he recommended. Thanks so much! What I've heard is that Javascript should be next after this. I've also been told to go for PHP. I plan to attain "fluency" in web development, then move on to C++ or Python or whatever. Still not sure, but I'll worry about software development when I get there. In any case, if people wouldn't mind, give this comment a like so I could--and everyone else--keep track of those who have finished the course. Comment your journey and your destination :D my ultimate goal is to be a game developer!

[@succubus3907]

Oh yeah that's also my goal, but I did on reverse I've spend the last months learning python until I was fluent with the basic concepts and OOP and now I'm diving into web development. And your route is pretty good, once you finish JS which will take a bit more time you are set to start being a webdev. Hope you have a good career and keep going as far as you can ;3

[@owoukoekanem6366]

Please where do I get he project he said we’d do at the end of the course Just finished the course

[@alicejoy1277]

Ouu 10 Mons ago Am in an hour This is really fun Computer science is the future

[@daviti_u]

I have just finished this 11 and half hour HTML/CSS course!

[@carloschu7127]

Tesla is laughing in the form of Front End.

[@mohamedsawaed3834]

I am now at the time - 6:16:42 - until now it's amazing, very well detailed, it's all in point good job!

[@rajjariwala2605]

Great way to appreciate!

[@flatbreadsub]

I watched this alkl in one day.... quarantine is the best thing that has happened for people that want to learn online. School allows me to be free for longer which lets me pursue my own passions that I wasn't able to do with school before quarantine.

[@ahmedabubakar7972]

This guy is really good. I love how he breaks down everything without assuming the learner knows anything. This is exactly how a tutorial should be. 8 billion thumbs up for John

[@gozieprince9530]

This is really a great course full with packages

[@SaPa-yv1pp]

❤

[@thepriestofvaranasi]

36:30 2:09:42 3:16:04 4:37:46 5:56:52 - Text properties 6:35:04 - Display properties 7:37:00 - Background position 8:29:22 - Positioning 9:27:28 - CSS selectors 10:16:47 - transition (transition timing function) 10:57:23 - Font awesome

[@ihiechindimele255]

Addicted to this tutorial. I thought I knew stuff about html but 2 hours into this video has humbled me. Thanks so much to the tutor. By the way I am just starting out in programming and this is just perfect for me now

[@ibraheembusari6867]

Same here

[@josephfavour2515]

How is it going 😊

[@gennie01]

I'm only 2hrs in but learned so much already! Thanks a lot for your generosity in sharing your knowledge. Good thing I started out with your course as it is easy to follow.

[@tamjidibnakabir4856]

Any group for improvement of coding!?i wanna join

[@Pack_Watcher14]

Im at 69:55:09

[@kajetonasa6613]

The voice of this guy feels so sincere :)

[@farahsarwar-e7-lhr667]

Finally completed 🙌 Thanks for the course. Now I am going to do some projects using html and css.

[@fatimafarhan5956]

Hello, will you please be kind enough to tell me how effective and helpful this course was for you.

[@altashakhan3349]

Guide me also

[@motherbruha]

@@fatimafarhan5956 I would like to know as well please

[@yasssh7835]

having finished till 7 hrs , I can tell you this is a beast course

[@Ahmet-vb6nf]

Are u alive ?

[@Bkkboyyz]

At 37:40, Emmet autocomplete is not on by default. If you've just installed VSC, you need to head over to "settings">search for emmet>scroll down and click>trigger expansion on tab :)

[@GodricThe]

Thank you

[@Sawta]

2:09:40 For anyone having problems with Prettier: Settings -> Format -> Default Formatter -> "Prettier - Code Formatter" 2:20:25 To select an entire line in Windows: Ctrl+L, not I.

[@himel8425]

thanks man

[@jjacklt]

2 hours in, as a complete beginner, this is extremely helpful and interesting so far. Have also seen one from Programming with Mosh and I find both great, but this one even more comprehensible with more explanations. Keep up the great work, looking forward to watch till the end. PS: I can also recommend playing it on 1.25x speed, however I'm the type of person that has to hit the backwards button a lot.

[@nfh0849]

How's it going so far? I'm looking for a place to start learning html and css (and javascipt) for a project of mine. Do you think it's worth investing time into this video? Thanks.

[@jjacklt]

@@nfh0849 It's definitely worth it! It worked so well that I actually build my own website!

[@nfh0849]

@@jjacklt Cool! Guess I'll give it a try

[@sportsupdate1462]

@@nfh0849 How's it going so far?? Have you completed??

[@AndrewDzula]

Probably condensed an entire semester into one video, absolute king

[@tamjidibnakabir4856]

Any group for improvement of coding!?i wanna join

[@hahavibes24]

How to make CSS switch / toggle / custom checkbox - only HTML and CSS kzbin.info/www/bejne/qZvJqGimhNeMnck

[@nivmittal]

One of the best free HTML and CSS tutorial I ever saw. Everything is crystal clear and no hiding at all and very well done. Thanks for posting it, it was very helpful and I look forward to seeing your other courses.

[@tamjidibnakabir4856]

Any group for improvement of coding!?i wanna join

[@modemvedasree8294]

Will this tutorial covers both html and css from scratch to advance level or it's only for beginners?

[@nivmittal]

@@modemvedasree8294 This tutorial is intermediate level, I watched this multiple times to understand this.

[@modemvedasree8294]

@@nivmittal okay thank you

[@brunoavelar4003]

The passion in your voice is surreal.

[@codingschool1496]

i swear to God the best so far i have come acrossed. i saw 11 hours long i said jeezzz why . but you the best lecturer so far i wish i could buy you a coffee

[@aravindsanjeev4150]

This like the 4th long tutorial I am watching from this channel. So far I have been watching Python, Django, React tuts. But I never really learned HTML and CSS in their complete form other than the basics that was needed to learn other tuts. Actually, thanks for this tutorial!

[@joshuasampson2092]

Okay so, I'm coming to see this. A new programmer, wish me luck guys. I hope this is resourceful.

[@reihanpermana8409]

good luck!

[@lazymay7654]

gl my homie

[@yakhyobekmamadaliyev6315]

Me too good to both of us 🙂

[@momo1643]

goodluck to all of us !!

[@kangjavves6259]

day 1= 52:09 day 2= 1:33:14 day 3= 2:17:35 day 4= 3:16:06 day 5= 4:16:50 day 6= 5:19:28 day 7= 6:04:46 day 8= 6:35:12 day 9= 6:56:39 day 10= 7:57:31

[@mute0000]

il bro si è stancato

[@CuriousMinds-V1]

day one - 1:05:50 day two - 1:58:24 day three - 3:20:18 - 3:28:10 day four - 4:22:38 - 4:27:41 day five - 5:57:10 day six - 8:40:03 day seven - 9:25:20 day eight - 10:16:40 day nine - finished

[@eisaahmed5323]

I completed the course in 10 days One day I will come back over here and realize that this was where I started up

[@venkateshvenky2880]

How was the experience bro... Can u make webpages NOW ?

[@eisaahmed5323]

@@venkateshvenky2880 yeah I have got into html and css pretty much I am giving it some practice and within a week I am thinking to move on to javascript Best of luck to you too!

[@venkateshvenky2880]

@@eisaahmed5323 thank u

[@atanaspeltekov3381]

I completed it in two days with 6 hours of sleep and three meals. I had three months to make the IT project but procrastinated until the last 4 days

[@mbotidemuwak2671]

I just started! Hopefully I'll complete it.

[@jawad_youtube]

Thanks to all the teachers who have been providing us this kinda free education with quality content.💖

[@glennevans2525]

I appreciate your teaching style and humor. Makes the course enjoyable.

[@hahavibes24]

How to make CSS switch / toggle / custom checkbox - only HTML and CSS kzbin.info/www/bejne/qZvJqGimhNeMnck

[@EnglishGeekWahoo]

Some shake their asses and make their livings outtaf social media, others like this good man are shaking their heads for the best of others, you deserve like, share and subscribe, you’re making your living teaching and spreading knowledge, cheers bro

[@camilaandreanietomoya5879]

Hello everyone! 👋🏻 I'm super excited, I just finished this video, but I can say that totally is worth it. To be honest I started to program like 2 years ago, starting with HTML and CSS. At that time, I learned pretty basic stuff, and I didn't learn HTML and CSS more deeply. Then I realized that I gotta master my skills, and I just took this course. It's really impressive, I learned new things, and I understand some things that I was confused about. Now, I can say that I am confident with HTML and CSS, and I can't wait to get on with it, practice and make cool projects. Thanks, Professor, you're my lifesaver... 🤗

[@franklinmayoyo]

Finally After a week of several pauses and replays, I finally, wrap this up. much love to the tutor and the channel for providing this information for free. I used to leave ads to play as I stretch and dehydrate

[@goodzergood2507]

What it took me 5 months to finish this

[@franklinmayoyo]

@@goodzergood2507 I understand maybe you had other commitments...am idle all week that is why....am currently learning javascript on his channel (coding Addict)... then I combine it with HTML and CSS.

[@goodzergood2507]

@@franklinmayoyo next thing I have to learn is JavaScript

[@franklinmayoyo]

@@goodzergood2507 sure... you should. I recommend you go for his JavaScript course (JavaScript Fundamentals) here on his KZbin channel (coding addict).... freecodecamp have two courses on the same from different tutors but they don't explain everything from the start (not good for absolute beginners)

[@elpeeda42]

@@franklinmayoyo Thanks for the suggestion. I was trying to find a javascript tutorial but i didn't know this same tutor has he's own channel. Thanks :)

[@thareeshprabakaran]

I've done it 7 hours, and I already feel much confident about me mastering HTML and CSS. This tutor is an absolute legend.

[@ankitasood8589]

i have done 5.30 hours keep going

[@maxmaxwell4211]

Hi, can ask if i can follow this tutorial with windows 10 or i need a mac

[@maxmaxwell4211]

@@ankitasood8589 Hi, can ask if i can follow this tutorial with windows 10 or i need a mac

[@ankitasood8589]

@@maxmaxwell4211 You can follow this tutorial .It doesn't matter whether you have windows or mac.Just keep going.All the best

[@maxmaxwell4211]

@@ankitasood8589 Thank you

[@Dankschon]

5:30 am alright Imma change my life

[@chriznotbrown]

I'm with you bro. ✊✊✊✊

[@mythl.l.l9397]

I'm too

[@GSERVERSMC]

Did your life change yet

[@ezzo5358]

7:39 AM here and having an exam tomorrow

[@juanmatapatpinoy]

Been there done that. 😆

[@sabolp1796]

I love how he says '' please dont freak out we gonna cover that later " he's just amazing teacher

[@alfonso_ima]

Day 1 - 49:29 - Other stuff came around, will come back by the evening to finish. Day 2 - 4:04:00 - I can do this, I'm sure! 💪 Day 3 - 5:35:49 - Need to continue… Day 4 - 8:18:41 - Good improvements, but needed to study and put to practice. Day 5 - 8:56:19 …

[@diamondbros6446]

I cannot thank you enough for this tutorial, it has always been my dream to be a website developer and thanks to you that dream came true!

[@hahavibes24]

How to make CSS switch / toggle / custom checkbox - only HTML and CSS kzbin.info/www/bejne/qZvJqGimhNeMnck

[@shaniceganas1687]

Just finish doing the course it was amazing and I learnt so much more in this course than in any other course I have tried.

[@marcinb7223]

i just finished course :) a week of hard work, I feel I've learned a lot. Thanks man! I appreciate it

[@tarekflici4617]

is it worth watching dude?

[@conscious_competence3703]

I'm on hour ten right now. I still need to go over some things but that's just because it's a lot of info. He does a great job explaining though.

[@stacydevries4241]

this is what is called a very good video with who we can call as an excellent teacher, john smilga.

[@jiauyjiauy3777]

I can't believe I finally finished this course! Thanks!

[@dokeyokey1977]

wait now u know how to work with html and css?

[@naufal5678]

Me at 3 A.M : One last video before bed

[@abhishek-hb1vg]

i haven't started the course yet how good is the material in this course????

[@WavePlayz]

@@abhishek-hb1vg pretty good as i have decent skills about this i can say its incredibly worth to watch its awesome u should support

[@lgiorgos1]

@@abhishek-hb1vg great information. Difficult to find it for free.

[@ravisingh-hb8bo]

@@abhishek-hb1vg its awesome...you got aaddicted to it..i just completed it

[@NewJerseyTico]

:D

[@Jaycode4578]

Thank you for this wonderful video. It's almost three years now, but I can tell you this is one of the best video out there. You are amazing!

[@axelef2344]

I got finished in some 3 weeks. I appreciate so much the fact it's free for me so I did this course earnestly and thoroughly. TY very much!

[@PrimeFreedom2008]

You are such a great teacher as you did not let any simple thing without explanation this is really recommended for the absolute beginners for sure. thank you

[@thriftytutorials]

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.

[@supMgaKaJobless]

Good for you

[@so_l6441]

I‘m done too! But there is no project in the Video where we work with the learned CSS right? The „Coffee Junkie“ - Site never gets Styling

[@thriftytutorials]

@@so_l6441 Nope :( but you can look for John Smilga's tutorials on KZbin and keep learning :)

[@so_l6441]

@@thriftytutorials Yeah I did that! I‘m currently learning JavaScript with one of John Smilga‘s Videos! Did you continue learning to code after you finished the course a month ago? How far are you with coding? I really wanna learn it but I feel like I‘m not really good at this whole thing 😅

[@nolajeason6265]

And my college has collected over 30k from me so far...when this free video is 1 million times better than my college...

[@willywrld]

The most simplified html css course on youtube. Thank a lot.

[@juanjozo1000]

Excelent tutorial! Just a quick note for 3:41:28. The style of h1 doesn't get overwritten by the internal style element in the html file because it is "stronger", but because of the order in which instructions are passed (first the external css file source is assigned, and then the internal style element gets declared). For instance, if one were to put the internal style element before the assignment of the external css file, then the external css settings would take over (since they are the last to be executed).

[@rawanBairouti]

Thank you for writing this comment! This is quite important to know.

[@ferozalimeghani2561]

Your long tutorial is just what I needed to learn html and css from scratch. Thanks for the hard work of creating such a lengthy tutorial. Also it has much to learn for new users of visual source code text editor and chrome developer tools.

[@ishaan2477]

Finally I did it... it took me 3 days and if you are getting bored just push till 8 hour mark from that point stuff gets really interesting and i'd also recommend making short notes

[@codingforfreecertification6840]

Try this link to attend the test

[@rivaldocaga6249]

Day 1 : 1:05:54 Day 2 : 1:33:26 Day 3 : 2:09:58 Day 4&5 (finished project) : 3:16:07 Day 6 : 3:50:00 Day 7 : 4:27:35 Day 8 : 4:55:54 Day 9 : 5:29:16 Day 10 : 5:46:14 Day 11 : 6:04:41 Day 12 : 6:27:11 Day 13-17 : 8:56:43

[@Cascadia2011]

Wow, only 2 hrs so far and I've learned so much!!! Thank you

[@ojussinghal2501]

I reccomend watching the first 4 and a half hours (4:28:00) and then implementing a project, and just google searching whatever you require in your project. And then maybe later continuing the the marathon video xD.

[@tamjidibnakabir4856]

Any group for improvement of coding!?i wanna join

[@hahavibes24]

How to make CSS switch / toggle / custom checkbox - only HTML and CSS kzbin.info/www/bejne/qZvJqGimhNeMnck

[@rtnjo6936]

thank you, sir! I'm so tired of embedded programming, now web programming feels like reading a relaxing novel)

[@shashankdex335]

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!!

[@moderndaypoet2518]

This is so awsome! For free too! I'm a single dad now but still wa t to find time to learn. Just curiosity a d would like to get my son into coding one day. So once I find time in a normal schedule, I'll definitely JOIN for the $4.99 a month! You guys are awsome!

[@robdevore6193]

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.

[@olalekanadam6888]

using 2x myself

[@MaNiMaBaLLa]

An 11 and a half hour tut on HTML and CSS? Holy..

[@AngelusChevalier]

11 hrs what the fudge...ok ok lets get rdy :D

[@DaSnipy]

In Depth ! :D

[@dattebenforcer]

Hey guys, you can speed the video up if you want it to be quicker.

[@Moonpie1025]

i was looking for some extra CSS tut and dang this happens two days later

[@manuellabor2759]

LMAO 😂....I JUST realized that, 2-hours in

[@wasnatehere]

Anyone considering watching this, absolutely do! I finished it after about 5 days and am now onto making my first site. Now, coming back to reference is like visiting an old friend. John, thank you so much for your hard work!!

[@tris756]

I started watching the KZbin course and after like 40 minutes bought in on Udemy. The price isn't high, for me it was 12 bucks, but it's worth the money, a lot of important knowledge gathered in one course. Good job John!

[@hahavibes24]

How to make CSS switch / toggle / custom checkbox - only HTML and CSS kzbin.info/www/bejne/qZvJqGimhNeMnck

[@faatimabah]

Monday 27/06/22 I started my 12 Weeks journey to become Web developer starting with this video, I will be learning to code for 4h everyday for 3months and hopefully by then, I would be a confident web dev... I am documenting my journey on my youtube channel. Good Luck everyone👍🏽 we can do it.

[@saintsupp4513]

where i can find out that resourse file

[@CamaguNcoso]

@@faatimabah it is 2024. How is your progress this year