We’ll be approaching this like a real project. So at the beginning of the next video, I will also work on a few small improvement left overs from this first video. I noticed for example that when adjusting your window size from desktop to mobile you briefly see the animation occur - we should fix that! And we should still add a scroll lock to the page when the navigation is opened, so you can only scroll the navigation and not the full page at the same time. I hope you’re just as excited for the next video as I am 🙏🔥
@synthesis44
Жыл бұрын
This video is for the people who wants the best practices and proper way of coding in Next JS. Well done!
@kokhant7068
Жыл бұрын
This channel is so underrated, I can’t even find this kind of tutorial in paid classes
@frontendfyi
Жыл бұрын
Such a huge compliment. Thank you so much ❤️ I am thinking about making more of these series, some probably need to be paid to make this sustainable at all, since they take a lot of time to make. But to also make it accessible to all I’m thinking about making one lifetime payment for frontend.fyi, which gives you access to all videos I will produce in the future. Makes it also easier to expense it on your learning budget I think.
@adrianlineweaver4725
Жыл бұрын
Just found your channel and wow! Seeing the thought process and how you do it is a way better way of learning than a tutorial structure that leaves you wondering why. Love your style so far keep it up!
@frontendfyi
Жыл бұрын
Thank you so much for your kind words! Really appreciate it!
@ExileEditing
Жыл бұрын
Your channel is going to take off eventually. I really appreciate you trying to tackle this as a real project. I'm pretty new to Next and React in general so it's great that you're showing a more professional approach. I'm sick of videos that just spam countless amounts of divs and the project is just very lazy with little to no components. If they do use components they're usually useless. Thanks for the time and effort you're putting into these videos. As my first big project with Next I'm attempting to make a bug tracker. Nothing too crazy with it but it's still a pretty big project for how little experience I have with it. But yeah watching you approach this like a real project is going to help me structure my projects bettter. One thing though and I typically I don't complain about this but I think you go a little too fast at some points. When you have prettier auto-sorting tailwind and you dont wrap lines it gets very confusing especially when you cut the video. Also sometimes you cut part of the video when you made changes but you don't explain them or say that you made changes.
@kapott_
Жыл бұрын
Agree, love seeing the professional approach - being the person "looking over your shoulder" whilst he creates this feels much more "this is how it's done by a professional" then any tutorial out there. This channel will be huge!
@frontendfyi
Жыл бұрын
🥹 - you guys are way too kind! 🙏 Thank you so much! @Exile Thanks for your feedback! Please keep it coming! I do agree with your points, noticed some of them myself as well. Will try to improve them in the next video again. Please let me know if you think they’ve improved next time! 😁 About the line wrapping; do you think that would improve the readability? Or should I perhaps disable to auto sorter? With line wrapping I sometimes have the feeling that people get confused as to why text is on the next line, which actually isn’t. Would love to hear your opinion about it.
@ExileEditing
Жыл бұрын
@@frontendfyi honestly I'm not sure what the best approach is. Typically you want code and editor side-by-side but I've seen a decent amount of content creators have their editor full screen and then they tab out to the browser. Which means when I have my editor and the video open side-by-side the text doesn't get too small to read. Or maybe some of them are recording whatever browser is in focus? I'm not too sure. I personally wouldn't mind line wrapping as I use it myself even though I can see how it might be annoying for others. I think if you're going to keep the auto sort you may need to just slow down before saving/sorting or enable line wrapping so we can see where it goes.
@frontendfyi
Жыл бұрын
Thanks a lot for your sharing your opinion! I will give this another thought as well. Very much appreciated.
@zaabimahdi
7 ай бұрын
Video published in 2022, but still the best frontend tutorial ever seen on youtube !
@frontendfyi
7 ай бұрын
Soooo kind 🙏 Wanna make more of these! If you have any idea for a rebuild, let me know!
@tough_year
Жыл бұрын
What extension you use that colors the rgba value background in VSCode? The default I have puts a square in front of the color code - [ ]rgba(1,1,1,1) .
@lazminutes
Жыл бұрын
I really enjoyed it. Please keep making more content like Rebuilding with tailwind. 🥺
@frontendfyi
Жыл бұрын
Thanks a lot! Definitely will make more videos 😁
@divmode2059
6 ай бұрын
Do you happen to go over creating the filtering system inside linear? Love how they did it.
@lorisyanis
7 ай бұрын
I've been searching for this kind of high-quality content for a while! Thank you so much for giving us this!
@frontendfyi
7 ай бұрын
Thank you so much!! You’ll be in for a treat with my upcoming video then! Just recorded 4,5 hours worth of content for a single rebuild 🔥
@lorisyanis
6 ай бұрын
@@frontendfyi Amazing! Looking forward to watching it!
@mashrukul
Жыл бұрын
Thanks to the algorithm, I stumbled across this channel. Wait till few months, this channel's gonna blow up. Glad to be among the 500 subs.
@nyashachiroro2531
Жыл бұрын
I know right 😂😂😂 This is golden. The tutorial is so good.
@frontendfyi
Жыл бұрын
Thank you so much both 🙏
@mrbanana6969
Жыл бұрын
Great tutorial and very well explained - just have a quick question: when we remove the extends block in the taliwind config (meaning we only use the theme as set in said config), how come some of tailwind's classes remain and some don't? For example mx-auto remains but text-white is removed? Hope this makes sense
@frontendfyi
Жыл бұрын
Thanks a lot 🥰 As for the question; when removing extend you're actually only removing classes that are based on things like sizes, colors, font-sizes, etc. These sizes trickle down in for example margin. But since 'auto' isn't a size that you specify manually, these stay and can still be used.
@JoshLearningFrontend
6 ай бұрын
Would you be able to share the Vs Code theme and font you used in this video, I really like it
@frontendfyi
6 ай бұрын
It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme The font is called Recursive Mono Casual Static
@manuarora
Жыл бұрын
Can't thank you enough! 👑
@FrontendSquad
Жыл бұрын
Thanks for great content, What's your theme?
@frontendfyi
Жыл бұрын
Thanks! I use Cobalt2 by Wes Bos: marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2
@pb8655
Жыл бұрын
Noon question sorry 42:39 how did you grab the hamburger icon so quickly
@frontendfyi
Жыл бұрын
Not a noob question at all! There was definitely a small cut that I did in that part of the video. So it actually took a bit longer. But what you can do is inspect the SVG element, make sure the right element is selected in the element inspector, and than press cmd + c / ctrl + c, and it copies the full source of the icon. Hope that helps!
@pb8655
Жыл бұрын
@@frontendfyi aah ok that makes sense! I thought there was some fancy keyboard shortcut that I was unaware of. Appreciate you responding btw, earned a sub! 🙌🏽
@Phonosheet
Жыл бұрын
Excellent tutorial on so many levels! I was wondering about the extensions you use in VSCode. I have been following the video with PHPStorm but the level of autocompeltion / auto-import is astounding. Any insights would be greatly appreciated ^_^
@frontendfyi
Жыл бұрын
Haha amazing to hear. I would definitely give VSCode a try! The main things autocompleting on my end are the following plugins I think; - Using TypeScript in general gives you a lot of autocompletion - Tailwind CSS plugin - Using Prettier for formatting, sorting, etc - And last but not least Github Copilot for aaaalll the smart auto completions. Definitely check this one out.
@iUmerFarooq
Жыл бұрын
Amazing channel I found. Want to see this series complete and fully functional website 😃 Thank you :) Love from Pakistan ❤️
@frontendfyi
Жыл бұрын
Thanks for your kind words! Love from the Netherlands ❤️
@juancruzsilva913
Жыл бұрын
Excelent video! I was wondering why the wrapper div added at 1:03:00 was needed? why div with the logo and links wasnt expanding 100% height?
@frontendfyi
Жыл бұрын
Thanks for the compliment! And great question! The reason I do this is because the wrapper (the Container component) is flexbox. By default the children of that flexbox parent aren't stretched full height if these children are ALSO flexbox (which is the case for that left column). By wrapping the column inside a display block div, it will actually stretch full length, and the flexbox div inside will also expand the full height. Hopefully that's helpful!
@MDEM-nw4qy
Жыл бұрын
Hello! I've been following your tutorial since this morning. I learned a lot of things. thank you a lot. please for the next tutorial. can you explain the important things or the decisions you take more in details. sometimes it's hard to understand why you're doing this or that. and please can you zoom a little or increese the font of vscode. but sincerely I am happy to have discovered your channel.
@frontendfyi
Жыл бұрын
Thank you so much! And absolutely, will do my best to take this into account. For the font size I found that the next zoom level would actually be just too big, having the lines cut off a lot earlier. I’ll experiment a bit more with it though 🙏 Thanks for sharing your feedback! Also please let me know if you have any specific examples you think I could have explained better. Helps me as well!
@dinhkhanh
Жыл бұрын
deserve more view!
@bibblebabl
Жыл бұрын
Thanks for the video! It's interesting to see. If you are wondering what can be improved: in my opinion, it would be great if the urll bar could be seen, because it is not always clear which one is open now: localhost or the original website ☺. I would make it not a separate screen at all and do alt+tab or just show the address bar.
@frontendfyi
Жыл бұрын
Thanks for the suggestion! Luckily Arc updated the browser last week, so in part 2 you see a very clear blue bar at the top of the page indicating localhost. Hopefully that helps 😁
@ryomensukuna9513
Жыл бұрын
😘🔥
@ReadyDesignerOne
Жыл бұрын
Great tutorial, keep up the great work
@WellDMLT
9 ай бұрын
My favorite channel dev ever! 🥳
@tolluset
Жыл бұрын
What is the name of sidebar extensions on browser that you use to change tabs.
@frontendfyi
Жыл бұрын
The browser is called Arc by thebrowser.company/
@Ivan-wm6gm
Жыл бұрын
Thanks for making this quality content, I've seen a lot of rebuilding website videos but only a few of them produce real world best practices like yours. Kudos for sharing your knowledge
@frontendfyi
Жыл бұрын
Thanks a lot! Really appreciate your kind words 🙏 They motivate me to keep going with this!! Part 2 coming very soon!
@AM-nm6ts
Жыл бұрын
thank you for this great content :) thank you so much, I am really happy so see such quality of tutorial on youtube.
@frontendfyi
Жыл бұрын
Thanks a lot for your kind words 🙏
@dennisaarts7924
Жыл бұрын
Great content and great explanation of the choices you made. I have one question though. In start of the video you stopped extending tailwind and create your own properties. Why use tailwind at all and not , for example, use Sass to create your variables etc?
@frontendfyi
Жыл бұрын
Good question! Actually Tailwind also provides all of the utility classes, which in SCSS I'd all have to create from scratch. So even though I'm not extending tailwinds default theme, that doesn't mean that it's not generating all of the spacing, width, height, border, shadows, etc etc classes anymore.
@dennisaarts7924
Жыл бұрын
@@frontendfyi Ah, makes sense! I misunderstood the overwriting Tailwind part then. I assumed when overwriting tailwind, you overwrite everything. But you overwrite only the things in the config file. Thank you for your answer!
@AM-nm6ts
Жыл бұрын
Please if you want and when you have time, could you make a short video about classnames package. it bugged my brain. thanks a lot
@frontendfyi
Жыл бұрын
Is the first part in the Usage chapter of their readme of any help? Any specific things you find confusing? github.com/JedWatson/classnames
@AM-nm6ts
Жыл бұрын
@@frontendfyi thanks a lot
@sreekar_s
Жыл бұрын
Awesome video. It's rare to see videos of this quality. Especially maintainable code. Kudos to you sir
@frontendfyi
Жыл бұрын
Thank YOU for your kind works 🙏
@joelundso
Жыл бұрын
Hey Jeroen, first of all: awesome content! 🚀 I'm using this code-along project to get acquainted with a bunch of things that are almost completely new to me (React, NextJS, Tailwind). This is so much more effective than reading docs or watching theoretical tutorials 🙏 Quick question: I noticed you have a couple of plugins installed or applied special formatting, like auto-suggesting code or having the color box in front of hex codes. Could you tell me what these are or which plugins you recommend we install for making our lives easier while coding along? Thanks! Greetings from Germany Joel
@frontendfyi
Жыл бұрын
Hey Joel! Thanks a lot for your complements 🙏 I think it might be a great idea to create a page where I can list all the tools I use actually! For now I've listed the most important tools here; * Prettier (auto formatting) * Prettier Tailwind plugin (install via npm, not a browser extension) * Github Copilot (auto suggestion with AI) * Color Highlight vscode extension * Finally using TypeScript also makes your editor a lot smarter, so it can suggest a lot more. These are the most important tools. I'll also start adding a page to the frontend.fyi website soon where I list them and also explain a bit more about them :) Thanks for that suggestion!
@joelundso
Жыл бұрын
@@frontendfyi Hey Jeroen, thank you so much for the list! Will make sure to check out your website :) Btw, I'm using this course to rebuild the website of my startup from the ground up. Would love to see more courses like these that maybe even dive into advanced stuff (how to set up a blog library + blog post pages, making sure the whole website follows technical SEO best practices, or even setting up the website to be multilingual). Would also be more than happy to pay for something like this :) Thought I just leave this feedback here - have a great day!
@frontendfyi
Жыл бұрын
Hey Joel! Thank you so much for these great suggestions! Super valuable! I will absolutely use this as inspiration! I’ll soon be updating the frontend.fyi website even more, adding a pro section with paid videos. Your idea could definitely be one of the series! I’ve decided to go for a one time purchase lifetime access, instead of a subscription model. Hope it’s something that fits your needs! Soon more on my website 😁
@ricardomoreira1556
Жыл бұрын
Sir, your content is pure gold. Please keep it going! You're not only technically awesome, you're great @ teaching!
@frontendfyi
Жыл бұрын
Thank you so much 🙏
@TheMindfulCraftsman
Жыл бұрын
high quality video! looking forward to your upcoming projects. thanks a lot!
@frontendfyi
Жыл бұрын
Thank you so much! 🙏
@mahdiandalib186
4 күн бұрын
thx man, you are the best
@frontendfyi
4 күн бұрын
Thank you 🙏
@djameleddine1247
Жыл бұрын
Hello! first thank you a lot for the great content and I am really happy to find someone who teach only frontend. I learned a lot, THANK YOU❤❤ I have 2 questions please :why you didn't create a component for desktop navbar and another for mobile sidebar? For me it's more readable that way. 2- when I click on the icon my sidebar is displayed. but at the same time I can scroll. the content of the page behind the sidbar. in my opinion I have to create a context to distribute the state of the sidebar (if open or closed) to the header.tsx and then to main which is in layout.tsx. and then i create a condition in layout if it is open i i add a class like height: 100vh; overflow-y:hidden; is the right thing to do please thanks again
@frontendfyi
Жыл бұрын
Thank you so much @djamel! As for your questions: 1. I agree that having 2 menu's for both desktop and mobile can be better for readability. However, most of the times that also means that these elements are both at the same in the DOM as well. And that is actually something that's really bad for SEO. Google doesn't like duplicate content, and especially not if it's full of links (which your main navigation is). So this could negatively impact your SEO ranking. That's the main reason I always do my very best to only have one navigation. 2. Very good point! In part 2 I actually fixed exactly this issue 😁 I do this by setting a className on the HTML node indeed, which does not require to have context. Definitely check out that video! kzitem.info/news/bejne/s2uG0IKZgpZyrYo
@djameleddine1247
Жыл бұрын
@@frontendfyi what I can say! THANK YOU SO MUCH, THANK YOU for your time and answer . بارك الله فيك شكرا
@frontendfyi
Жыл бұрын
Glad it was of help 🙏
@j0rin
Жыл бұрын
this channel is amazing
@OleksandrPanteli
Жыл бұрын
great content. keep it up!
@LinearApp
Жыл бұрын
👏
@frontendfyi
Жыл бұрын
Thank you so much for commenting 🥹
@qinkanglu8280
Жыл бұрын
Great video! May I ask what vscode plugin do you use for all those autocomplete?
@frontendfyi
Жыл бұрын
It is the default recommended tailwind extension for vscode. More here: tailwindcss.com/docs/editor-setup
@sreekar_s
Жыл бұрын
I think person is asking about copilot?
@frontendfyi
Жыл бұрын
Ooooh! That could very well be indeed! github.com/features/copilot
@0xmigue
Жыл бұрын
YOU ARE THE GOAT
@frontendfyi
Жыл бұрын
YOU GOAT’A BE KIDDING ME ❤️🙏
@bromgens9938
Жыл бұрын
Great video! Awesome channel! 💪
@frontendfyi
Жыл бұрын
Thanks 🥰
@melchiorfu
Жыл бұрын
Amazing!
@anandhukraju9382
Жыл бұрын
This is gonna be crazy!
@frontendfyi
Жыл бұрын
Thanks - it will 🔥
@fahmi2978
Жыл бұрын
This is top tier channel
@frontendfyi
Жыл бұрын
Thank you so much for saying that 🥰
@nyashachiroro2531
Жыл бұрын
This is a great channel.
@frontendfyi
Жыл бұрын
Thanks a lot! 🙏
@mahmoudali-id5dx
Жыл бұрын
That was awesome .
@frontendfyi
Жыл бұрын
Thank you so much! There’s also a part 2 already waiting for you 🔥
@kapott_
Жыл бұрын
Nice! Love this step-by-step!
@venomweed
Жыл бұрын
Why does he dress like Steve jobs?
@frontendfyi
Жыл бұрын
😂😂😂
@jeflopodev
Жыл бұрын
@@frontendfyiYou could also feature the mind blown gif and do a HQ version haha media.tenor.com/n37K-33vd0QAAAAC/mind-blown.gif
Пікірлер: 101