Відео

Hey @Dorchwoods, thanks for the question! Using gap is a valid approach, but sometimes it's just not enough. Imagine creating a vertical rhythm inside an article component; you might want different spacing between elements within the same container. I talk more about gap vs. margin in a previous video. Check it out starting at 7:28. Let me know if this answers your question!

Thank you Soumil, so happy to hear that!

That's a perfectly valid approach; the gap solves this issue too. However, there are cases where it's not enough. For example, when creating a vertical rhythm in an article, you might want different spacing between elements inside the same container. I actually talk more about this in my previous video at 7:28. Hope this answers the question.

My pleasure! Thank you for the comment!

Thank you

Yeah! Those are logical properties. Very handy

Hey @NedumEze! Great question. I think it is easier to think like this There is a `site` block: site site__header site__main site__footer And three separate blocks: `site-header`, `site-main`, `site-footer`. The first one acts as a container, like a box that holds actual `site-header`, `site-main`, `site-footer` blocks or other elements. It's perfectly fine to set margins on `site__header`, `site__main`, `site__footer` because they aren't used on their own outside of `site`. I talk more about it in this video too: ua-cam.com/video/Quxd5iNEp-4/v-deo.html I know it may be a bit confusing at first, but this structure is very robust. It allows for easy swapping of components inside the header, main and footer while keeping spacing consistent. Let me know if this answers your question!

@@dmtrmrv Thanks @dmtrmrv. It does. I appreciate.

@NedumEze you are welcome!

Glad it was helpful!

Thank you!

Спасибо! Да, это все в планах. Я подробнее в этом видео рассказал: ua-cam.com/video/6w0TJnNvBYA/v-deo.html

@GameOver-db7wg Thank you for the question! I'd be happy to look at your code to provide more specific guidance, but here are my thoughts on creating a block vs. an element. If an element has a distinct role in your interface, it's a candidate for a block. Even if you're unsure about reuse, it's better, in my opinion, to have more blocks than fewer. This approach helps avoid the issue of complex blocks that we discussed towards the end of the video (14:22). Regarding utility classes, .visually-hidden is a great example. In my projects, I also use utility classes like h1, h2, h3 to style other text elements to visually resemble these headings. The key is consistency. Consider how consistent you can be with these classes. Are they truly atomic? Can you keep reusing them effectively? Again, I'm happy to look at your code to give a more detailed answer.

@EyeIn_The_Sky Thanks for the question! You are actually not the first one to ask. I see how this part of the video can be a bit confusing. In short, it depends, but you are right. Gap is one of the tools, another is setting the margins using rules like .container > * + * { margin-block-start: Xrem; } which adds margin to all children except the first one. I have a video about exactly that coming in the next few days, so stay tuned!

Thank you, Rick! Appreciate your kind words!

Famous words! It's a feature!™

@Deekay909 Thank you for the kind words and for taking the time to write this comment! I truly appreciate the feedback and encouragement. It's definitely a grind, but comments like yours make it all worthwhile-not the likes or the number of subscribers. I wish you all the best with learning the ropes. It takes time, but it is a rewarding vocation. If there's something specific you're struggling with, let me know! I'd be more than happy to cover it in a video.

@@dmtrmrv Now that you mentioned it, maybe you can make a quick/short video on what to focus on outside of css/js? With the amount of technology that is out there, its hard to management sometimes what to study next. Iv been working on html/css/javascript and React. From what I understand, Typescript is industry standard at this point. Do I study Typescript next or should i look into Next.js for React? Basically, what is your opinion on the libraries/frameworks to focus on that you use the most in the industry, outside of fundamentals, in order to be well rounded. Continue to get better and studying vanilla css/js will never stop, goes without staying. Thank you.

Thank you!

Hey @jelilabudu! Thanks for the comment, I'd be curious to see your solution. Do you have it in a CodePen or somewhere else?

Thank you! Great to hear!

Glad the video was helpful!

Thank you! I'm glad the videos are helpful! Yeah, I believe understanding HTML and CSS is important, it makes working with frameworks easier.

Yeah, true. I definitely made this for my younger, junior self.

Glad it was helpful! I've been guilty of this myself-no shame in that. We're all learning, and that's what's most important.

Glad to hear that! You are welcome!

You are most welcome!

@bls512, thanks! I'm glad you found the CodePen useful. Good question! I honestly think Utopia is just a tool (a great one though). What's important when using it on larger projects is ensuring the team is on the same page about how to use it. And generally, for large projects, clear communication with your team is crucial. This includes having straightforward guidelines, clear commit messages, PR descriptions, good documentation, and keeping everyone updated.

Hey @gaming_with_raza7867, thanks for your question! Honestly, there’s no easy answer to this, but I’ll try to respond to the best of my knowledge. In short, it’s a journey-there’s always something new to learn, especially in Front-end development. I also struggle with responsiveness sometimes, particularly with complex components or unclear guidelines. What usually helps is working your way from mobile up. Build your projects as if desktop doesn’t exist, then add layers of styles for larger viewports. Use implicit grids and clamp to avoid relying too heavily on media queries. In general, learn typography. The web is mostly text, and knowing how to represent textual information well can help a lot. Try to approach every project as a system rather than a one-off thing, and you’ll improve over time. Trust the process. Hope this helps!

Thank you : ) I swear it does! Well, most of the times.

Glad you enjoyed it!

My pleasure! Glad you found it helpful!

Hi @MissEAG! Thanks for your kind words and for watching the videos! You're right; I don't use separate files to store variables in my demos and stick to vanilla CSS rather than Sass. My main goal is to focus on a specific topic or pattern that can be applied across various contexts-CSS, Sass, CSS-in-JS, and so on-rather than on the tooling itself. In real-life projects, it often depends on the project, but I would likely put variables into a separate file, which is generally considered a best practice. Regarding Sass, I stopped using it a few years ago as CSS began to rapidly evolve. We now have features like variables, nesting, and other enhancements, so I personally don't see the need for Sass since it adds another tool and dependency. I prefer to keep my projects as dependency-free as possible (but with as many as necessary). However, I understand some engineers still use Sass, and if it works well for the project and the team, that's perfectly fine. Perhaps a CSS vs. Sass video is something to consider for the future.

@alexmacol228 Thank you, Alex! Welcome aboard, glad you are enjoying the videos!

Thank you! Glad to hear the explanation was easy to understand!

Well, that was genuinely how I felt when I first started learning CSS, lol!

@@dmtrmrv so true, i still get surprised with how some styles work, even after im 100% sure its correct 😅 then, i find my own idiotic mistake 😁

Hey @onelook1870, thanks for your comment! I'm not sure I fully understand the question. The video doesn't cover that, but I'll happily look at your code if you happen to have it on CodePen or Github.

Form input field doesn't inherit font family set to body. We have to set again. body { font-family: "Poppins", sans-serif; } We have to set it again for form fields.

@@onelook1870 That seems to be right, but let's wait for Dmitry confirmation. Thanks for the input (no pun intended). 🙂

@vertigoz Not sure I fully understand the question 🤔

@@dmtrmrv I was thinking regarding zoom, when you zoom it all scales up. ps- I tried this on codepen: html{font-size:16px;} h1{font-size:2rem;} h1.test{font-size:32px} one p, one h1, and one h1.test they all scale up if I choose to zoom, if I change font-size they remain the same

@vertigoz Oh I see, so zoom feature works a bit differently. It just scales everything. These changes also do not always carry over between the sites. Font size, on the other hand only affects the font size and those changes are global to all sites you open in the same browser. Does that answer your question?

@@dmtrmrv Yes, thanks! :)

Maybe we can propose 1bbs (one big banana scale) for those really large elements.

Thank you! 🙌

Hey James @jamesreagan4179! Happy to see you here! Glad you are enjoying the videos, hope we get to catch up at the next Universe. not sure why UA-cam hasn't showed me this comment :((

Coming very soon!

Thank you! Glad it was helpful!

Thank you for the kind words! 😊

Hey @jonasgpayer, do you have a CodePen or something like that I can look at?

Thank you! I'm glad to hear you enjoy the videos. React is a lot of fun-I really like it!

Thanks for your comment! Yes, those are great topics and not very straightforward. I'll definitely cover them!