Hi there! My name is Jeroen, a frontend developer with over a decade of professional experience building real world products. At the end of 2022 I decided it was time to finally follow I dream I've always had - start a RU-vid channel and teach more people than only my direct colleagues. And just over 6 months in, I decided to start teaching fulltime in July 2023.
I'm committed to teach you real world best practices that you can use in your day to day job. I try to stay away from hype content as much as possible too!
Besides making free content on RU-vid, I'm also working on a PRO subscription over on www.frontend.fyi, which contains paid content and courses as well! And finally I also mentor other engineers like you.
Where can I find the finished code for this? It's kind of hard to follow with all the changes, I just want to look at the classes real quick and see if there are some tricks to learn.
What is the code editor you are using here? Also please tell me about the font. It also has a few handwritten type. The color code showcase also seems a bit different. In vs code i get a small box of color before the code. But i like the way the color is shown as the background of each value.
@@frontendfyi The pleasure is mine. I am now looking into your videos and thinking which one should I steal next :p. There are so many awesome builds.
Thank you for this message. I am a CIS student and am graduating in about 6 months with no idea exactly which direction I want to go since I've had courses in a little bit of a lot of things. This is very helpful advice!
Thanks for the video Jeroen. You're a CSS Magician that lives in the bleeding edge. I saw that If we put the buttons to the bottom right (makes more sense for mobile to me) then there's an overflow problem. If the content of the menu creates an scroll bar, the close button keeps moving with the scroll position. This can be solved by making the close button fixed rather than absolute. And there's no need to play with the overflow properties as is.
Hey, i know its kind of a dumb question, but how do you implement an infinite carousel when the carousel has transitions on each element, I tried everything but it just doesn't work, mabye some day you could make a tutorial on that. Greetings from Macedonia
Utility classes indeed make a lot of sense. Even way before Tailwind was around I used to have a SCSS setup that generated a bunch of utility classes that I used on everything. So even without Tailwind it indeed still makes a lot of sense imo.
I think the best explanation of subgrid till date. There is a small issue of "gap" though. Its seems the subgrid inherits "gap" of parent. Is there a way to work around..
Thank you so much! It is indeed the intended behavior that it inherits the gap of the parent. Could you tell me more about the use case where you wouldn’t want that?
Thank you! As for the shift you probably want to add scrollbar-gutter: stable; this prevents the document from shifting when a scrollbar appears and disappears
Just curious, what plugin are you using to highlight the colors in your css file? I normally rely on the built in vscode one, but it fails to pick up the properties under the @theme.
YES! People want real things… not fake shit. But yeah, it takes a lot more time to create ofcourse. I think in the end authenticity will win though ❤️ As long as the real people have enough energy to keep going for long enough. And messages like this for sure help me to keep going! Thank you so much!
great, very practical, can we have a video how you setup ur project, like colors font sizes layout settings, before you start converting , and If we can have complete project video pixel perfect figma to HTML CSS, from start to end that would be great,
Hey just recreated this, thanks for the great walktrough. But i noticed that its not working in firefox. To fix this we can simply set the track-item width to `var(--track-width)`.
I ran a 100k+ line project, and throughout it's lifetime it gathered around 70 global classes. I see very little benefit of using tailwind. Tho I can imagine someone being convinced it is better than plain old CSS. It is definitely more inviting with all those promises. For me, the single problem CSS had that it took a lot of typing to get to some encapsulation. Since the dawn of preprocessors that has been solved. Now we have pollution of the global scope with the illusion of reusability. Just like the other 50 CSS libraries that came before it.
The thing is though that you don’t repeat full classes, you do repeat styling lines without those classes though. Eg display: flex, margin-top: 2rem, etc. That is what tailwind reuses, not full classes. And those are definitely repeated multiple times in a 100k lines project. I even think that if you have 100k lines of css and you would switch to tailwind, you might end up with perhaps only using 10k lines.
@@frontendfyi Overall project size, not just css. I don't like using a lot of properties so the css is quite light. Specifically flex and margin-top did not repeat that often. But I understand what you mean. I see no difference between attaching 5 classes to a div and 5 css properties. Tho' more realistically TW is like a 5 to 4 ratio. Programatically what you are doing with TW is five = 5 and use five where 5 is needed. Then you have to take into consideration the learning curve. That can cost a couple of thousand worth of developer time per developer already familiar with CSS and a preprocessor. My major point is that nobody will talk about TW in 5 years time and I don't want to build something that lasts only 5 years. Statistically I should be right on this. It will be around, sure, but nobody will touch it. Can be scraped from a project? Yeah .. but that's even more developer time. Am I using it? Yeas.. I am here, aren't I? I am not the only one who makes technical decisions and it is hard to argue with a change to pad the linkedIn profile.
@szeredaiakos I totally agree with you that tailwind will be gone in the future. Might be a few years, might a bit longer. It’s definitely not here to stay forever. I’ve tried to work with tailwind for a few years, and constantly gave up because I hated it and thought css was better in many ways. After trying it for the nth time it finally clicked and I now enjoy it very much. Not trying to convince you to liking it, just letting you know that I was on “the other side” too, and could never imagine that I was going to like it. Yet here I am 😂 The only thing I still want to touch on is the learning curve. It’s definitely there. But don’t forget the learning curve people go through when onboarding your vanilla css project. Despite it being just css, it’s still a form of architecture someone setup, and you still need to learn that when onboarding the project. And the downside is that there’s probably way less examples and documentation to use your own architecture than there is for Tailwind. Again not saying vanilla is bad, but the onboarding of custom projects is definitely a learning curve we sometimes tend to overlook. I really have to make a video about why I like tailwind css one day.. haha. Thanks for staying so kind in your comments by the way. Really appreciate that.
@@szeredaiakos > My major point is that nobody will talk about TW in 5 years time and I don't want to build something that lasts only 5 years. 1. Where did you got that timespan from? Tailwind has already 5 years of existence and people <still talk about it>, and they <talk more and more too> 2. Are you seriously saying that a technollogy will just vanish out of existence? Because this is just not how things work. People still use the original AngularJS in 2024, they still make projects with it, and people are still selling solutions for it nowadays. Cobol is more than 60 years old and we are still dependant on it, even when it is hard to find people making solutions with it anymore. I still maintain codebases writen in .NET Framework years after Microsoft made something much better. Tech just don't move that fast neither to get a grip on new things nor to let them die, once you have a project in a technollogy it is much, much, much harder for it to die. When you have thousands of projects, it will stay alive. So I really don't understand you here.
Jeroen! Awesome stuff! At minute (0:15) here on this video can you show us how to build a section / dashboard layout like this (expandable layouts by animating CSS Grid layouts)
Great idea! That animation is actually built in a slightly different way than I show in this video with the carousel, but you should be able to get quite close by applying the technique I used in this video too. I made a basic example for you here: codesandbox.io/p/sandbox/vigorous-frog-s46ml5 Let me know if that helps!
It's your fault man.. I'm learning tailwind at a moment now, and I'm planning to go back to vanilla.. By the way thanks for the effort.. The best css tutorial video ever.. 1 sub worth .. Thanks..
