hey Jeroen, hope you're doing good. I really love what you're building in this great channel, it's like a goldmine ❤😆. May i ask you to rebuild the carousels, and thank you for your time and your humility.
Hey, great content. Would you mind making a video or providing information on how you setup VSCode (extensions, etc.) like you have? Thanks, great video!
Thank you for providing valuable content to learn Tailwind CSS and kickstart a project with it. By the way, could you share which browser you use for tab switching in your videos?
You are so good at this man, i am trying to get good at framer motion and you are my inspo, but there isnt't enough material to learn from and the docs are trash
Thank you so much for your kind words! ❤️ Make sure to also check out my course if you’re looking for even more content! It’s still early stages (first modules out now), but it will explain many of the basic topics as well as have many many real world examples to learn from.
Just keep going! Improve one percent each day, and a year from now you’ve already improved a LOT. I’m doing this for well over 10 years now. Take your time ❤️
I wish 🙏 you could have shown us how to do that using next.js SSR components. I think many of us are trying to find solutions to framer and or gsap in next.js. Please think about it ♥️✌️
As with framer and nextjs app dir there’s not much more you have to do than adding use client to every component that uses framer motion. Anything specific you’re struggling with most?
@@frontendfyi Thank you! I was more talking about server components and for example applying scroll animation throughout the application e.g the application page and not just a section? Is that possible ? Thank you, again.
You can't do JavaScript animations on the server. In NextJs everything is SSR expect for the components that works on client will need "use client" specified in the file otherwise it will throw an error in runtime or build time
I think you've strong foundation with css and framermotion but u are overthinking every step in this project. You should use tailwind grid 12 column, a little bit of flex inside each grid column to organize each component and after that framer motion, and that's all it doesnt necessary so many tags nor react-use, with grid+flex you don't need something else. Anyway, I' ve subscribed it was a good tutorial in overall. Regards from Argentina.
Thanks for your comment! Would love to see how you would approach some parts! On one hand I might agree with you a bit. Perhaps in a little bit overusing custom grids indeed! So thanks again for this feedback 🙏
Good question! We kind of have 2 header rows now: The row with the logo, and then the second row with the 'apple tv+' text. They are two separate divs, because only the second element should become sticky. So therefore each row has a specific height, but the distance from the top should actually be 2 times that height because there's 2 of these elements underneath each other. Let me know if that makes sense!
It's more of a habit than anything else. Tailwind's container class is actually really good and does in essence the same thing. Same could go for Bootstrap. Only benefit could be if you want to add more defaults to that component, then you can easily add it to that component too and can see at a single glance what are all the things the container adds. Hope his helps!
i have one question , whenever i use sticky position along with locomotive scroll and scroll peed of -0.8 it does not remains sticky anymore pls help anyone
Would definitely work! Although Matt Perry also advises to use Framer Motion if you use react, Motion One in any other case. You could also use Scroll Driven Animations, you could get quite far with that too I think!
A Motion one video from time to time for those of us that Don’t use React would be amazing, yes I saw that, that was slowing down on MO but still there something nice about MO, I don’t care about a few KB more, it’s something else, anyway thank u for the response
Great stuff! Should do more of these 👌
Amazing!!! appreciate your efforts for teaching us!!
Fantastic work. Thanks for putting all the effort into creating this.
Thank you so much! Also thank you for becoming a pro member, really appreciate it! 🙏
Your are the best, thank you very much❤
Finally! I was looking forward to this one, since the last time we talked on discord. More tailwind content coming?😋
Definitely more tailwind content coming soon! I have something veeeery interesting cooking 🤩
hey Jeroen, hope you're doing good.
I really love what you're building in this great channel, it's like a goldmine ❤😆.
May i ask you to rebuild the carousels, and thank you for your time and your humility.
Bro let's go 🔥teach us everything you know!
This was a joy to watch, thank you.
Glad you liked it! Thanks for sharing it with me!
Deserves way more subs
Thanks!! It’s only a matter of time till people realize 🔥
100%@@frontendfyi
Hey, love your work😍😍. What font do you use in VsCode
Hey, great content. Would you mind making a video or providing information on how you setup VSCode (extensions, etc.) like you have? Thanks, great video!
Great idea! Will definitely write that down in my list, thanks!
Thank you. You deserve more likes and subscribes.
Thank you!! They will for sure come, I just keep going!
awesome!
Thank you so much for such stellar content, Jeroen!
Thank you so much for your kind words!! Really appreciate it ❤️
It’s my best decision to subscribe to your channel to learn advance frontend dev, thank you ❤
So kind!!! Thank you so much, really appreciate it!
Thank you.
Thank YOU! 😁
Bring it on 🎉
Lets gooo!! Thanks for tuning in!
Hey! May i know what extension do you use to visualize the hex codes?
Lovely content thanks. Love the theme of your code editor please can I know the name?
Thank you!!
The theme is called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
Amazing work! Thank you very much. btw, what font do you use in VSC for this one?
The theme is called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
And the font is called Recursive Mono Casual Static
Nice vidro
Thank you for providing valuable content to learn Tailwind CSS and kickstart a project with it. By the way, could you share which browser you use for tab switching in your videos?
It's called Arc:
arc.net/gift/7611d3fc
thank you!@@frontendfyi
You are so good at this man, i am trying to get good at framer motion and you are my inspo, but there isnt't enough material to learn from and the docs are trash
Thank you so much for your kind words! ❤️
Make sure to also check out my course if you’re looking for even more content! It’s still early stages (first modules out now), but it will explain many of the basic topics as well as have many many real world examples to learn from.
@@frontendfyi thanks very much for the reply, I hope I get as good as you one day 🦾
Just keep going! Improve one percent each day, and a year from now you’ve already improved a LOT. I’m doing this for well over 10 years now. Take your time ❤️
I wish 🙏 you could have shown us how to do that using next.js SSR components. I think many of us are trying to find solutions to framer and or gsap in next.js. Please think about it ♥️✌️
As with framer and nextjs app dir there’s not much more you have to do than adding use client to every component that uses framer motion. Anything specific you’re struggling with most?
@@frontendfyi Thank you! I was more talking about server components and for example applying scroll animation throughout the application e.g the application page and not just a section? Is that possible ? Thank you, again.
You can't do JavaScript animations on the server. In NextJs everything is SSR expect for the components that works on client will need "use client" specified in the file otherwise it will throw an error in runtime or build time
@@ilan117 use template.js in root folder everything lies in it. For more see next js documentation.
I think you've strong foundation with css and framermotion but u are overthinking every step in this project. You should use tailwind grid 12 column, a little bit of flex inside each grid column to organize each component and after that framer motion, and that's all it doesnt necessary so many tags nor react-use, with grid+flex you don't need something else. Anyway, I' ve subscribed it was a good tutorial in overall. Regards from Argentina.
Thanks for your comment! Would love to see how you would approach some parts!
On one hand I might agree with you a bit. Perhaps in a little bit overusing custom grids indeed! So thanks again for this feedback 🙏
just to confirm, do we still need to install prettier and ESlint? or just tailwind and react alone are enough?
hi, I really suck at CSS. any recommendations?
Can you kindly explain the hero height variable and why is is multiplied by 2? I didn't get that
Good question! We kind of have 2 header rows now: The row with the logo, and then the second row with the 'apple tv+' text. They are two separate divs, because only the second element should become sticky. So therefore each row has a specific height, but the distance from the top should actually be 2 times that height because there's 2 of these elements underneath each other. Let me know if that makes sense!
Can anyone explain why he use a container component and not just a container class?
I come from bootstrap
It's more of a habit than anything else. Tailwind's container class is actually really good and does in essence the same thing. Same could go for Bootstrap. Only benefit could be if you want to add more defaults to that component, then you can easily add it to that component too and can see at a single glance what are all the things the container adds.
Hope his helps!
Could you tell me the name of this browser you use?
It's called Arc! Really nice browser indeed!
i have one question , whenever i use sticky position along with locomotive scroll and scroll peed of -0.8 it does not remains sticky anymore pls help anyone
Are you using overflow: hidden on any of its parents perhaps? It 'breaks' position sticky. Overflow: clip does work though!
no i am not ,However sticky is working as long as i am not giving data-scroll-speed to the parent section @@frontendfyi
Wonder if all this is possible with just motion one
Would definitely work! Although Matt Perry also advises to use Framer Motion if you use react, Motion One in any other case.
You could also use Scroll Driven Animations, you could get quite far with that too I think!
A Motion one video from time to time for those of us that Don’t use React would be amazing, yes I saw that, that was slowing down on MO but still there something nice about MO, I don’t care about a few KB more, it’s something else, anyway thank u for the response
❤❤
❤️❤️
Hello, my friends 🎉
Hello friend! 🎉 Hope you’re having a good day!
what doea Usps stands for.....?
It stands for “unique selling points”. It’s a term often used to describe the best features of a product.
@@frontendfyi thanks, and nice video
🎉😮
Is that an emoji representation of the first frame of this video? 😉
Font name please