The 2023 Frontend Development Crash Course - Learn HTML & CSS

[@DesignCourse]

If you're interested in UI/UX too, I take the same design and show you how to create it in Figma: kzbin.info/www/bejne/h6i2f2ekZ9idiJo

[@waifufx]

Congratulations sir on 1Million Subscribers Just saw it recently I have been expecting for a long time

[@dogbahkorboi7149]

I am interested, Sir.

[@actandrepeat]

A browser's root font size is 16 px by default. When setting font-size to 62.5% in the CSS stylesheet the root font size changes to 10 px, because 16 * 62.5 / 100 = 10. 1 REM is now equal to 10 pixels which makes converting values from Figma way easier. So 45 px is now 4.5 REM as opposed to 45 / 16 = 2.8125 REM.

[@robinheyer708]

Sounds like this can really mess with accessibility if people have a larger font size set in their browser. As that works of off rem if I'm not mistaken. Figma should have an option to show the rem size, ideally. Just converting it yourself isn't so hard, either, as you demonstrated.

[@magoxxii]

Thanks for explaining 🎉

[@sameneko8979]

​@@robinheyer708 Nah. If I set my font size (in browser) to be 22. and wesite try to set it to 62.5%. Browser will read my custom font size (22px) and calculate the final font-size based on that (62.5% of 22px). The accessibility problem comes from websites that set font size to px or vh,vw because if that's the case no matter how much user zoom in / out the font size will stay the same.

[@NecaVideo]

To mitigate the problem of accessibility you can do the inverse operation on body element and set font-size: 1.6rem. But even then this can be problematic if you use some 3rd party component libraries which relies on some reasonable values for the root font-size.

[@ArindamMukherjee-it]

Thanks Gary, this helped me a lot. I am new to learning HTML and CSS and seeing you coding, inspires me learning. Thanks for helping people like us.

[@zakariaelbakkali-t2e]

Hi

[@brunon9837]

1:29:15 You can split your windows easily with the shortcuts: "Windows Key + Left Arrow Key" and "Windows Key + Right Arrow Key"

[@kjellandrew]

I really appreciate how you keep your mistakes in the video. It shows how to troubleshoot some of the silly things we do. And is encouraging that it happens to everyone.

[@jhonnatanr]

39:00 since the arrow is just for decorative purposes, I think you could've used a pseudo element in your CSS. .secondary-cta::after { content: url(' '); }

[@mdashrafulalam3469]

The way you explained the HTML layout with red boxes was amazing. Thanks a lot.

[@dunyadisivarlik]

1:07:20 Why select nav? why select header? and Why did you do that?

[@jerrycompanjen5325]

Nice! Was gonna start your course last night and was about to do your old crash course from last year... So this is great timing!

[@felipeleon6631]

You should try last year's crash course. He explains responsive coding

[@AndyMorrisArt]

You made me google just 2:40 minutes in. I had learned to write self-closing tags with a forward slash before the > character and became curious when you didn't so I just learned that it's optional in html5 but required in XHTML so now I'm curious how many coders choose to use it when writing html5?

[@dumbulovich]

Hey mate, I dont usually comment on people's tutorials but you are amazing at teaching, and should be awarded. Thanks

[@ramsanga2212]

this is just what i need to get started ,thank you

[@mehranehnejati135]

This video made HTML CSS so easy to understand, THANK YOU

[@NGAPFWEJEPANBDIS]

2:00:28 If you want to have a smooth animation on the secondary-cta:hover underline do this: .secondary-cta span { text-decoration: underline; text-decoration-color: transparent; transition: .3s; } .secondary-cta:hover span { text-decoration: underline; }

[@lalalu2923]

Danke für diese Doku. Frustriert, genervt und fassungslos bleibe ich zurück. ABER es hat mir auch gezeigt, dass ich nicht so streng mit mir sein sollte. Es geht um die Richtung, ich lebe vegetarisch, fliege nicht, kaufe häufig gebraucht, fahre hauptsächlich mit dem ÖPNV. Aber nichtsdestotrotz sollte man das Leben auch genießen, es ist deutlich, dass die Politik zum Wohl aller und der Umwelt handeln muss, ich als Privatperson kann mein Bestes geben durch ein informiertes und reflektiertes Handeln, aber dennoch sich dessen bewusst sein, wenn man sein Bestes gibt, mit den Mitteln und Möglichkeiten die zur Verfügung stehen, ist schon viel getan was in der eigenen Macht liegt als "normale Privatperson".

[@quantyquanty3724]

This is a crash course with substance in which all levels of Developer will appreciate.

[@Olaiya03]

Thank you so much for creating this crash course. It has really helped me a lot. Please do another video showing how to make it responsive to other smaller devices.

[@billyfarris4314]

Love the video!! you have a great way of explaining things with ease.. i learned alot and will be looking into your other videos

[@sethaaron510]

Still struggle to finish the tutorial of 2019... Man... time flys... Finish this crashcourse is on the top priority of my new year resolution list. Thanks for sharing this amazing and high-quality content.

[@gideonokorie4424]

have you finished it now?

[@sethaaron510]

@@gideonokorie4424 Oooops, good call... The answer is no. Thank you so much for bringing this up

[@LucianoPinheiro78]

On linux and Windows, if you bring the window (by its header) to the corner of screen, it will spans to half of the screen. I think we can do it on mac also. That's how people can make windows side-by-side.

[@_g4m3r_]

That 62.5% font-size formula that makes rem unit so easily related to px size is a lifesaver! Thanks so much for this!

[@zubair3002]

Please mention when did he say ? Time?

[@_g4m3r_]

@@zubair3002 51:10

[@Ceinsight]

10:48 correction internal css :D! thanks so much for making this awesome tutorial, i've done your other one yesterday. love your tutorials great explanation!

[@SantiagoJanoski]

you made it look soooo easy, thanks!

[@magoxxii]

Last year i watch your last crash course and now i watched this one and everything make so much more sense. Thanks for keeping doing this videos!

[@shamaliroshan]

This is great who needs to learn as a beginner or who need to get things remembered again!

[@code.design]

You speak about semantics, more than a few times, but do not code a hero button as a but rather an . Care to elaborate why?

[@islandhaze]

My Question too! Felt confused here.

[@MyBaBB]

This is a nice little refresher course. I learned a couple of things. Thank you very much.

[@AndyMorrisArt]

When I added display: flex; my logo disappeared. I even uploaded my svg file to my wp site (after learning how to do that) and inserting the url in src= which works but not when I add display: flex; oddly my arrow is there. I'm planning to assign classes to the logo and to the menu and then put those divs where I want them. I don't know how else to do it at this point.

[@MuratKarakus-to4tr]

Just finished it and goddamn, what a course, lots to unpack but great starting point, I followed every single step, yeah I will play with the code and add it to my portfolio, I goddamns deserved it! thank you sir for your hard work

[@aryansaxenacs]

Hey Did he cover topics such as a flexbox, grid ?

[@shreddymcgnar8776]

my dude, you are good at teaching, chronologically formatting your knowledge-drop already impressed me, as this is counter intuitive to most ppl, and im a very mechanical learner in general. Which brings me to my point. Do you have any books yet? I know one guy with two thumbs that would free download the shit out of it P.S. dont forget to use pictures, as A wise man once said, a picture is worth a thousand words. Just think of all the paperback publishing money you will save.

[@kcwitch1]

I love how you dissect the page in forming the layout. I learnt something there

[@cyanbeam]

Thank you for taking the time to do this crash course. You've explained things so well boosted my competence with web design. I'm excited to make many more.

[@AbhishekGupta-ej3vw]

Hey you have designed this course very nicely. Thank you bro

[@choccooco]

tysm for frying your voice to teach us doing this amazing design :)

[@marckrug]

THX

[@basharat4693]

AMAZING! The best video on HTML and CSS. Showing how to tackle a project step by step. Beginners get overwhelmed by bare bones (HTML) when they see its result. As a beginner who felt overwhelmed by this, I benefited so much from this. I'll implement this and clone a portfolio after exams and see how I do. Thank you so much. Need more of these videos where project is tackled like this.

[@andrewo.9412]

I really like Brad Travesy's Udemy HTML and CSS course. It's like 15 bucks and really helps make you comfortable before adding JS and such.

[@sagarghare9829]

Thanks, Garry. I completed the course 🤗

[@StormeSpace]

This is the first modern html css video on youtube , Your a Game Chager I appreciate if you do another html css course THANKS

[@shiuandai0426]

As a beginner, it is very good to follow your instruction

[@henrythomas7112]

Great video! Some key points were highlighted that I hadn't heard anyone else discuss. Thank you!

[@sto2779]

excellent explanation. great way to show how to make figma to html without any frameworks.

[@unknowned1113]

Do you use the original image source file or do you use the Figma export cropped images in development?

[@joshuanwokoye]

Pls how do I give this a thousand likes? Very straight to the point!!

[@giftmukupe1]

So grateful for this, thank you so much.

[@lonleybeer]

This course was fanatically done, I'm not that great with the keyframes so this really did help alot

[@cr4wz]

Wow, I'm from Brazil and I loved discovering your channel, bring more videos like this please, they are extremely helpful! thanks.

[@syndg]

Amazing! Was waiting for this since you released the design one! Thanks for the amazing content! ❤️

[@Speedy4you10]

Happy new year!

[@Thankgoodness77]

Thank you, it’s a great video we can learn more

[@Chorcai]

Fantastic crash course, it really showed you a bit of everything for you to look into more, however my only nit pick would be the wrong image was used for the products! Looking forward to more of your videos for 2023!

[@photoinshot1355]

Excellent video, with detailed explanations and very engaging, thanks!

[@maximood-tired]

very nice, Im glad you changed the crashcourse from sass to plain css

[@maxenheimer5336]

this is gold.

[@fitnesslifehack]

Big thanks! Very understandable.

[@hirealgore]

Really cool video. Appreciate the knowledge !

[@UnezeWisdom]

I'm actually stuck on 1:21:40, my right-col isn't moving to the right side on my web page

[@rgirotto]

Hi Gary! thanks for another incredible amazing tutorial! I was wondering why you didn't use sass in this 2023 tutorial like in previous years?

[@returnMarcco]

Thanks for the course

[@i-ush6349]

Thanks a lot, really loved your video.❤

[@bbubbeee]

What theme is he using for VSC?

[@TheNerdyPlayer]

watched the whole thing! good job 🥰

[@TalonOfficialCanada]

always love watching your videos. I always learn something new and understand a bit more every time I watch them. By far the best crash courses I've found. This one is a bit more for someone who has already dipped their toes in the coding waters I feel, but it was really nice to be able to watch this and really not be confused at any time during the course. I must be learning something 😎

[@ncpl.]

max-width and margin step do not work for me, it is not centering :C Why?

[@hassaneoutouaya]

Thank you so much !

[@1stHelloWorld]

I stopped watching randomly in the middle of the course to like and subscribe your video,and btw,thank you for your efforts !

[@thiliniliyanaarachchi8073]

Thanks Gary. As always A solid crash course.

[@MACH_SDQ]

Very goood, greetings from Dominican Republic !!!!

[@salifuyahaya-k3e]

whenever you do videos, please dissect it with that red marker. the layout becomes self explanatory. keep up the good work bro👍👍👍

[@agusiamniam]

43:41 what if the text copies without formating the 'strong' wrap? I got just plain text

[@anamay3872]

Just add tag manually

[@jasur.salikhov]

Thank you for your crash course, god bless you

[@benjiehakim5925]

Very helpful but I had an issue my poppins font couldn’t load after I pasted it in my vs code unfortunately,not matter how much I tried to refresh it

[@RickoDeSea]

Could you have used a button symantic element for the CTA ?

[@Mahsa_2]

Please post more of these tutorials. thanks

[@webinno]

Thanks for sharing your knowledge. It really helps me in my web development learning process.

[@silvanfloor]

Hi Gary, Thanks for your video! It brought me up to speed a lot! Question: is there a clever solution to get those 3 images on the right clickable to a next page? If i try to make them so, the grid breaks :(

[@StefanoVidmar]

can you please share your editor settings i love the look of that search at the top

[@AnasNarudin-nc2ii]

thanks

[@Hallucinogendk]

Pseudo-elements should be written with "::" and not just ":", which is reserved for pseudo-classes. Double colons for pseudo-elements were introduced in CSS3, but single colons for pseudo-elements still work for compatibility reasons, so the Internet doesn't break.

[@vinaypatil8009]

Sir please Needed same kind of explanation , lecture, knowledge on Html CSS Javascript with resume level project

[@Oyiboforex]

Thank you Sir, it really nice 👍👍👍

[@oguching]

Good solid crash course as usual Gary. Very well done.

[@eagleeyegaming4979]

Can anyone please tell me why the styles are not making a change in the website? I have double-checked it and it still is the same thing!

[@diegovalencr]

Spectacular!

[@codewithdahir]

Wow this was cool🎉

[@ertar0]

thank you!

[@kimfranciscorros5959]

Just wanna point out that using gap with flex items seems to be having an issue on safari.

[@ashandimantha6538]

Thank youu !! 💌🤟

[@tobiojo7096]

please how do i get images you used including the svg and jpg

[@RickoDeSea]

Could you have used id for card1, card2 & card3 instead of class ?

[@WendySiriane]

tHANK YOU SO MUCH

[@TerenceKearns]

I really thought figma would be able to support useful html/css which could have been used as a starting point. What do you think of bootstrap studio?

[@SafdarAliShah_TimeTraveler]

I'm having problems with the grid it shows all three pictures in a single column, I'm using the same css copied from files provided in the description.

[@dinbandhusharma4568]

I really like your video. The best this is for me to your explanation your explanation is awesome like you explain each detail, thank for this free course :)

[@hiteshsuthar1097]

Thanks 🙏

[@lil_uji_goated]

Is it possible to use illustrator for web design instead of figma

[@outpost31737]

Don't forget if you have uneven columns on your flex items make sure they are set to 100% width.

[@pujanprajapati182]

mine card align-items is not set to end. plz help

[@Baguiocitytouristspot]

the style is not change for me, what happen😪

[@huntergaming6837]

Sir plz make more projects on frontend development, since I am from India and your course is too expensive for me to purchase, plzz share more knowledge on YT or on udemy

[@Erwin_t]

Hey Gary! I remember I followed the 2022 frontend crash course and boy!! That was epic, following your work for over a year now and I always learn new things with from your content. Do you stricly do HTML, CSS & JS or do you also do React JS? Curious >.

[@nehemynet]

​@qslqkhqn In this case, the base font size has been reduced to 62.5% of the default size. (16px = default 100% font size) So when you use rem units, it will be based on 10px (1rem = 10px), instead of 1 rem = 16 pixels. 62.5% of 16px browser font size is 10px. This allows for more consistent and predictable font-sizing across different browsers, since it eliminates the need to account for different default font sizes.