The 2023 Frontend Development Crash Course - Learn HTML & CSS
Вставка
- Опубліковано 22 лип 2024
- 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! - Навчання та стиль
If you're interested in UI/UX too, I take the same design and show you how to create it in Figma: ua-cam.com/video/QwSN4n2sjR8/v-deo.html
Congratulations sir on 1Million Subscribers Just saw it recently I have been expecting for a long time
I am interested, Sir.
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.
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.
Thanks for explaining 🎉
@@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.
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.
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.
The way you explained the HTML layout with red boxes was amazing. Thanks a lot.
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!
Wow, I'm from Brazil and I loved discovering your channel, bring more videos like this please, they are extremely helpful! thanks.
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.
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.
Hi
Amazing! Was waiting for this since you released the design one! Thanks for the amazing content! ❤️
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!
Hey mate, I dont usually comment on people's tutorials but you are amazing at teaching, and should be awarded. Thanks
This is the first modern html css video on youtube , Your a Game Chager
I appreciate if you do another html css course
THANKS
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!
Love the video!! you have a great way of explaining things with ease.. i learned alot and will be looking into your other videos
This is a nice little refresher course. I learned a couple of things. Thank you very much.
I love how you dissect the page in forming the layout. I learnt something there
This course was fanatically done, I'm not that great with the keyframes so this really did help alot
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!
You should try last year's crash course. He explains responsive coding
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.
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(' ');
}
This video made HTML CSS so easy to understand, THANK YOU
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 😎
This is great who needs to learn as a beginner or who need to get things remembered again!
this is just what i need to get started ,thank you
you made it look soooo easy, thanks!
Hey you have designed this course very nicely. Thank you bro
Excellent video, with detailed explanations and very engaging, thanks!
very nice, Im glad you changed the crashcourse from sass to plain css
This is a crash course with substance in which all levels of Developer will appreciate.
Thanks, Garry. I completed the course 🤗
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.
Big thanks! Very understandable.
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?
Happy new year!
excellent explanation. great way to show how to make figma to html without any frameworks.
As a beginner, it is very good to follow your instruction
Thanks a lot !
So grateful for this, thank you so much.
Really cool video. Appreciate the knowledge !
Good solid crash course as usual Gary. Very well done.
watched the whole thing! good job 🥰
I stopped watching randomly in the middle of the course to like and subscribe your video,and btw,thank you for your efforts !
Thanks for sharing your knowledge. It really helps me in my web development learning process.
Thank you, it’s a great video we can learn more
Thanks a lot, really loved your video.❤
Excellent, thank you very much!
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.
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.
whenever you do videos, please dissect it with that red marker. the layout becomes self explanatory. keep up the good work bro👍👍👍
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?
Very goood, greetings from Dominican Republic !!!!
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 :(
Thanks Gary. As always A solid crash course.
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.
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
Thank you so much !
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 :)
Spectacular!
Please post more of these tutorials. thanks
Thank you Sir, it really nice 👍👍👍
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!
this is gold.
can you please share your editor settings i love the look of that search at the top
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.
I'm actually stuck on 1:21:40, my right-col isn't moving to the right side on my web page
max-width and margin step do not work for me, it is not centering :C Why?
Happy NewYear 2023 Gary! what? it's just been 10 days🤣
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.
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;
}
Sir please
Needed same kind of explanation , lecture, knowledge on Html CSS Javascript with resume level project
thank you!
Thanks for the course
Wow this was cool🎉
Could you have used a button symantic element for the CTA ?
tHANK YOU SO MUCH
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
Hey
Did he cover topics such as a flexbox, grid ?
Thank you for your crash course, god bless you
Do you use the original image source file or do you use the Figma export cropped images in development?
That 62.5% font-size formula that makes rem unit so easily related to px size is a lifesaver! Thanks so much for this!
Please mention when did he say ? Time?
@@zubair3002 51:10
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".
thank u for this video!! im from brazil
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.
Thank youu !! 💌🤟
That HTML font size "rule" works too for Adobe XD designs ? Its the same Point value in Adobe and Figma?
please how do i get images you used including the svg and jpg
Im trying to do a responsive version but idk what to do with the 2nd column on mobile should i just remove it or make it a carasoul or smthing plz tell me!!
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.
have you finished it now?
@@gideonokorie4424 Oooops, good call... The answer is no. Thank you so much for bringing this up
1:07:20 Why select nav? why select header? and Why did you do that?
Thanks 🙏
Hey Gary, do you have a beginners complete course for JavaScript?
Pls how do I give this a thousand likes? Very straight to the point!!
Could you have used id for card1, card2 & card3 instead of class ?
Hi, Gary ! I have completed it but how to make it mobile responsive.
mine card align-items is not set to end. plz help
thanks
Is it possible to use illustrator for web design instead of figma
Just wanna point out that using gap with flex items seems to be having an issue on safari.
Thanks I need more like video
What theme is he using for VSC?