If you're interested in UI/UX too, I take the same design and show you how to create it in Figma: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QwSN4n2sjR8.html
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.
@@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.
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.
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.
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(' '); }
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.
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".
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?
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.
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!
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.
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; }
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.
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.
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.
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
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 😎
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!
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.
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.
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!
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
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 :)
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 :(
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
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 >.
@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.
So can I ask for help here in comments? Huh? I cant copy arrow in firgma as SVG. I have only option of CSS. And last but not least thank you for this. It is first thing I used to study and I feel like i found a fricking gem. Thank you.
