The 2023 Frontend Development Crash Course - Learn HTML & CSS
216,027
Published 2023-01-05
-- 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 for 2023 - Lea... ) 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/ExpNjxQ
Project files:
coursetro.s3.amazonaws.com/stuff/fauxica.zip
Figma design document:
www.figma.com/community/file/1192839712389547623
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: fb.com/logodesigner
Coursetro FB: fb.com/coursetro
Coursetro's Twitter: twitter.com/designcoursecom
Join my Discord! discord.gg/a27CKAF
^-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
All Comments (21)
-
If you're interested in UI/UX too, I take the same design and show you how to create it in Figma: https://youtu.be/QwSN4n2sjR8
-
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.
-
1:29:15 You can split your windows easily with the shortcuts: "Windows Key + Left Arrow Key" and "Windows Key + Right Arrow Key"
-
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.
-
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!
-
Amazing! Was waiting for this since you released the design one! Thanks for the amazing content! ❤️
-
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.
-
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.
-
The way you explained the HTML layout with red boxes was amazing. Thanks a lot.
-
Wow, I'm from Brazil and I loved discovering your channel, bring more videos like this please, they are extremely helpful! thanks.
-
Hey mate, I dont usually comment on people's tutorials but you are amazing at teaching, and should be awarded. Thanks
-
Love the video!! you have a great way of explaining things with ease.. i learned alot and will be looking into your other videos
-
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!
-
Great video! Some key points were highlighted that I hadn't heard anyone else discuss. Thank you!
-
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!
-
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!
-
This course was fanatically done, I'm not that great with the keyframes so this really did help alot
-
This is the first modern html css video on youtube , Your a Game Chager I appreciate if you do another html css course THANKS
-
this is just what i need to get started ,thank you
-
I love how you dissect the page in forming the layout. I learnt something there
