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

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!

Nothing wrong with that! It's a mistake not to use AI these days as long as one understands what they are doing.

Glad you liked it!

That’s another great example! I really like that we have this option now to delegate tasks like that to AI.

I agree; it's definitely not a silver bullet for solving all web engineering problems at the moment. Maybe we'll reach a point where AI will do most of our jobs, but we aren't there yet.

I used ChatGPT (GPT 4) for this.

@@dmtrmrv Thanks❤❤

Thank you! I got the same headache while browsing through the files. It's so cool that we can offload some boring tasks to AI these days.

I found that it works really well when you ask it to do something small in scope, but the quality of the responses decreases if the request is more complicated. Overall, though, it's a great assistant for certain tasks, just like Copilot.

@@dmtrmrv yes, the free version I use produces some bizarre responses if you ask too much. Best to do it in steps, refining the result until you get what you want.

My pleasure!

Thank you! I'm happy to hear that because that's one of my goals with this channel. Keeping the videos informative and short.

Welcome aboard!

I like that!

You are welcome! Thank you for your comment!

Thank you! Glad you are here!

Thank you for pointing it out. Here's the CodePen I used in the video: codepen.io/dmtrmrv/pen/xxBPowg

@@dmtrmrv Thank you for sharing the source code. I recently watched all of your CSS videos, and they were very helpful. I have many questions about CSS that I couldn't find proper answers to. Would you consider making videos addressing those questions? If yes, I will share my questions here in the chat.

Absolutely! I’d love to hear your question. I’ll be happy to create videos on the subjects you have in mind, provided I have enough knowledge in those areas. You can also DM me in Twitter or LinkedIn if that’s more convenient for you.

Thank you! Yes! What kind of topic do you have in mind?

@@dmtrmrv Thank you for responding! It may sound a bit broad, but the topic(s) i suggest is called "CSS at-rules", from @starting-style to @font-face and @media. I couldn't find any comprehensive content on this, and in my opinion, that would be great series

Thank you!

Thank you for the suggestion! That might be in the plans, but I'm not certain yet. There are so many grid and flex videos out there... Which aspect of Grid and Flexbox feels confusing to you? Knowing this could help me identify the right approach for grid and flexbox tutorials. Thanks again!

Thank you. Glad you found the video helpful!

Thank you. Glad you liked it!

True, adjusting the base font size in this way does change the default font size for everything within the body. However, it doesn't address compatibility issues. Consider a scenario where we might use a package that includes the following: .dialog__content { font-size: 1rem; } The developers of this package assume that the default font size is 16px, but in our project, it's set to 10px. This discrepancy could lead to various problems. Not the end of the world, but something that could be avoided.

@anneyo5627 That's a great question. Ideally the spacing is created with properties like "gap" or by using the "lobotomized owl" technique. Check out the CodePen: codepen.io/dmtrmrv/pen/vYMEGpx?editors=1100 You can find examples of both: .grid { gap: var(--step-1); } .content-flow > * + * { margin-block-start: var(--step-1); } If that's not enough, we can always use margins on elements, because they aren't reused on their own. ".button" in the same CodePen is a good example. Look at the ".button__icon" element: .button__icon { margin-inline-start: var(--step--5); } All this allows us to reuse components in different contexts without any spacing overrides. Let me know if this answers the question!

Thank you so much! This was helpfull. First time i've heard of the 'lobotomized owl', interesting!

@@anneyo5627 You are welcome! You can read more about it here: alistapart.com/article/axiomatic-css-and-lobotomized-owls/ The article is 10 years old, but it's still relevant. "gap" was not around at the time, but it's still not a full replacement.

That's a valid option and there is nothing wrong with using it. The margin technique could be useful in cases where you can't or don't want to use flex-grow.

Thank you @AJ-vy4yu! Curious what did you do differently?

@@dmtrmrv I created elements of elements and blocks with too many elements, to name a few. I had really long-ass class names😆

Thank you!