The 2023 Frontend Development Crash Course

No video

The 2023 Frontend Development Crash Course - Learn HTML & CSS

Рет қаралды 216,630

Күн бұрын

bit.ly/3GGV7Y6 👈 Take my Interactive CSS Course. Use "UI2023" for 23% Off!
-- Today, I'm going to show you exactly how to take the UI design we created in the 2023 UI/UX design crash course video ( • The UI/UX Crash Course... ) and make it a working reality in the browser with HTML and CSS. You're going to learn about the fundamentals of HTML and CSS, in order to create websites and layouts.
Codepen demo:
codepen.io/designcourse/pen/E...
Project files:
coursetro.s3.amazonaws.com/st...
Figma design document:
www.figma.com/community/file/...
A few of the things you will learn in this video:
- Basic HTML & CSS Anatomy
- Structuring HTML
- CSS Flexbox & the CSS Grid
- CSS Transitions & Animations
- And much more..
0:00 - Intro
0:38 - HTML & CSS Anatomy
5:49 - The Code Editor
7:47 - Getting Started with HTML
12:51 - HTML Navbar
28:45 - HTML Hero Section
50:16 - CSS Font Size 62.5%
54:32 - CSS Navbar
1:20:18 - CSS Hero (Left Column)
1:40:20 - CSS Hero (Right Column)
1:54:30 - CSS Animations
2:08:40 - Final Thoughts
Let's get started!
#frontend #html #css
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Пікірлер: 173

@DesignCourse Жыл бұрын

If you're interested in UI/UX too, I take the same design and show you how to create it in Figma: kzfaq.info/get/bejne/h92DgZefl9nOgmw.html

@waifufx Жыл бұрын

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

@dogbahkorboi7149 6 ай бұрын

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 10 ай бұрын

@@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 9 ай бұрын

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.

@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.

@brunon9837 Жыл бұрын

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

@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.

@user-ky2oc7ij6n Жыл бұрын

@syndg Жыл бұрын

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

@billyfarris4314 8 ай бұрын

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

@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

@mdashrafulalam3469 9 ай бұрын

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

@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.

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

@cr4wz Жыл бұрын

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

@dumbulovich 11 ай бұрын

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

@henrythomas7112 Жыл бұрын

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

@MyBaBB 4 ай бұрын

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

@ramsanga2212 9 ай бұрын

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

@SantiagoJanoski Жыл бұрын

you made it look soooo easy, thanks!

@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 😎

@Olaiya03 8 ай бұрын

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.

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

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

@kcwitch1 Жыл бұрын

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

@mehranehnejati135 9 ай бұрын

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

@AbhishekGupta-ej3vw Жыл бұрын

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

@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

@AgahanCeylan 9 ай бұрын

Thanks a lot !

@lonleybeer Жыл бұрын

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

@photoinshot1355 Жыл бұрын

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

@Speedy4you10 Жыл бұрын

Happy new year!

@shamaliroshan Жыл бұрын

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

@fitnesslifehack Жыл бұрын

Big thanks! Very understandable.

@hirealgore Жыл бұрын

Really cool video. Appreciate the knowledge !

@maximood-tired Жыл бұрын

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

@oguching Жыл бұрын

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

@giftmukupe1 Жыл бұрын

So grateful for this, thank you so much.

@i-ush6349 Жыл бұрын

Thanks a lot, really loved your video.❤

@TheNerdyPlayer Жыл бұрын

watched the whole thing! good job 🥰

@quantyquanty3724 Жыл бұрын

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

@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.

@peterl0815 Жыл бұрын

Host the your fonts by yourself. This is better for privacy and it's better to serve it by yourself because different blocking add-ons have less problems with that approach. Besides you show google the middle finger by that. At least it's more reliant if google goes offline or is not reachable . The video is solid work.

@shiuandai0426 Жыл бұрын

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

@Thankgoodness77 Жыл бұрын

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

@hassaneoutouaya Жыл бұрын

Thank you so much !

@sagarghare9829 Жыл бұрын

Thanks, Garry. I completed the course 🤗

@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?

@karolinecruz3391 9 ай бұрын

Excellent, thank you very much!

@webinno Жыл бұрын

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

@sto2779 10 ай бұрын

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

@thiliniliyanaarachchi8073 Жыл бұрын

Thanks Gary. As always A solid crash course.

@jhonnatanr 9 ай бұрын

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(' '); }

@Oyiboforex Жыл бұрын

Thank you Sir, it really nice 👍👍👍

@ertar0 Жыл бұрын

thank you!

@diegovalencr Жыл бұрын

Spectacular!

@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 :)

@user-tn4ro8ey9r 4 ай бұрын

tHANK YOU SO MUCH

@codewithdahir 4 ай бұрын

Wow this was cool🎉

@ashandimantha6538 Жыл бұрын

Thank youu !! 💌🤟

@hiteshsuthar1097 Жыл бұрын

Thanks 🙏

@user-yq5qm6tt1u 4 ай бұрын

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

@returnMarcco Жыл бұрын

Thanks for the course

@maxenheimer5336 8 ай бұрын

this is gold.

@Mahsa_2 Жыл бұрын

Please post more of these tutorials. thanks

@MACH_SDQ Жыл бұрын

Very goood, greetings from Dominican Republic !!!!

@1stHelloWorld Жыл бұрын

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

@LucianoPinheiro78 9 ай бұрын

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.

@AndyMorrisArt 9 ай бұрын

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?

@jasur.salikhov Жыл бұрын

Thank you for your crash course, god bless you

@AnasNarudin-nc2ii 8 ай бұрын

thanks

@_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

@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 :(

@webunriddled Жыл бұрын

Happy NewYear 2023 Gary! what? it's just been 10 days🤣

@yoshizaki5083 Жыл бұрын

thank u for this video!! im from brazil

@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

@surajshresthasri 5 ай бұрын

amazing...

@MuratKarakus-to4tr 11 ай бұрын

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

@AryanCS01 11 ай бұрын

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

@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".

@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.

@BeefCurd Жыл бұрын

This is amazing

@NickiLP98 Жыл бұрын

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; }

@arshad1781 Жыл бұрын

Thanks I need more like video

@vinaypatil8009 Жыл бұрын

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

@unknowned1113 9 ай бұрын

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

@StefanoVidmar Жыл бұрын

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

@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.

@joshuanwokoye Жыл бұрын

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

@AndyMorrisArt 9 ай бұрын

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.

@hinaallauddin8256 Жыл бұрын

Just Awaome!

@marckrug Жыл бұрын

THX

@anggafebrian2279 Жыл бұрын

This is wonderfull Skill

@shawnremedios7195 Жыл бұрын

Hey Gary, do you have a beginners complete course for JavaScript?

@RickoDeSea Жыл бұрын

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

@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

@outpost31737 Жыл бұрын

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

@klvsv Жыл бұрын

Thanks for a great crash course! Question: would you consider taking this layout and show how to make it mobile friendly?

@user-yi3rq7jk2r Жыл бұрын

amazing

@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?

@Britney.J Жыл бұрын

Super helpful. I haven't done any front-end coding projects for a few years, and this was a good refresher. Also loved learning the Emmet abbreviations. So slick!

@TalonOfficialCanada Жыл бұрын

Oh man, the Emmet abbreviations helped so much! made things so much faster - I could almost keep up with him in VSC just listening because of it - not quite that fast yet though lol