Hey, a quick suggestion, please explain each step you're doing briefly, so that if some beginner is seeing this, they'll fully take advantage of video, like explain tailwindcss classes, what each does, rest each and everything is super amazing with your video
This is awesome and you really cornered the market with a quick tutorial that is not just ripped off from Next, or having some subscription service tied to it. Just practical knowledge😀
This is .... I am short of words to express how AMAZING!!! You made this look sooooooo easy! THANK YOU. I subscribed! please do more videos like this. Your channel will definitely grow.
You're brilliant Hosna! I think you're innately gifted at teaching I think. I really liked how you broke down everything and how you structured your explanations. Sending love and duas from the UK.
New sub! This is great content! Thank you for the tutorial. I’m about to graduate from my coding bootcamp and have been messing around with multiple frameworks for my portfolio and I really like next js. Tailwind is a huge plus! Have a great day!
The guide was decent overall. Luckily I had previous experience with Next JS cause it got confusing with lack of explanation on some things. Keep it up - you provide great content!
Great tutorial Honsa! Thank you so so much for the help. I had a little Vercel deployment issue so just sharing that for me it worked with "@types/react": "18.2.25", in package.json both dependencies and devDependencies. Then npm install and deploy. FYI - Vercel deployment error: Overload 1 of 2, '(props: LinkProps | Readonly): Link', gave the following error. Type 'Element' is not assignable to type 'ReactNode'. Overload 2 of 2, '(props: LinkProps, context: any): Link', gave the following error. Type 'Element' is not assignable to type 'ReactNode'.
Hi @brendanmilton5025, thanks for sharing that. Yeah, since I created that portfolio Vercel and Next.js has gotten a lot of updates 😅 I created this branch to hopefully solve the issue with updates, github.com/hqasmei/tailwindcss-and-nextjs-portfolio/tree/next14-portfolio.
Thank you so much Hosna for making this really simple video on NextJs and tailwind css, I can't emphasize more on how easy and smooth journey you made with your video for people like me who are new to coding which clearly shows your mastery over the subject. I usually don't comment much on YT videos but after watching your complete video I felt that atleast I should thank you for helping me who are new to coding. once a again a big thank you for your efforts and video. Love and respect from India.
Great Video Hosna! I'm not sure if it's just me, but I'd really appreciate if you can record in 1080p or higher, since the texts seem a bit blurry for me and i'm having a hard time following along. Keep up the good work!
Amazing video was trying to find a tutorial of add dark mode and light mode using tailwind and finally found it. I have a question though you are using use client in the main page isn't that causing any problems when trying to use server components?
I started this project 9 months ago, and I'm picking it back up this week. I previously got all the way to having a cloned version (with rough new design) setup on Vercel and able to be deployed. Now I just need to reacclimate myself to the whole project and then finish up design and content. Any things to keep in mind, anything that has been updated or needs to be updated? Thanks!
In Next.js 13, a component becomes a Client Component when using the "use client" directive at the top of the file (before any imports). Here’s the documentation that explains it beta.nextjs.org/docs/rendering/server-and-client-components
You need to explain why your project structure is different with the standart of Next JS 13. I use the standart framework and it doesn't have `app` project structure. Are there any particular reason why you create that `app` folder?
Hi @giovankabisano2266, the app directory is currently experimental in Next.js 13. I made the video because there aren't many videos using this directory yet. Here is more information if you would like to know more about it. I'm still learning about it as well. beta.nextjs.org/docs/app-directory-roadmap
Thanks for your tutorial. In your project, you use react-scroll lib to move between sections. I have an additional page on my site. If I at this page(site/catalog) and want to move for example to the main page (site#about) the link react-scroll doesn't work. is it possible to fix it? thanks for your answer.
This is a great tutorial, thank you so much! How would you recommend adding an extra page for a project that is not deployed elsewhere? So instead of linking to the external project, I'd like to link to a new page within my portfolio, that contains some information about the project. I have added a file within the pages directory, which seems to work with routing, but the Tailwind CSS is not applying to it...
Hola tenia una pregunta relacionada con el header. El ancho es de full width y me gustaria que ocupase por ejemplo la mitad como el resto de contenedores de la pagina porque a mi no me gusta que ocupe todo el ancho de la pàgina. estoy peleando y no logro arreglarlo, un saludo
Lo siento por la respuesta tardía. No vi tu comentario. Puedes ajustar el div con max-w-xl o algo así si no quieres llenar todo el encabezado. Si aún necesitas ayuda, puedes enviarme un mensaje en Discord.
Great video ma'am. I had a query that when i have trying to take my home proj .. and all to right side then they are not getting placed. Can you please tell how should I solve this as i am using the same code of your.?
Hi @@shoaib7542 , I believe this person was referencing a different video. I explain how to add the env variables there. ruclips.net/video/8jsfYyGccJU/видео.htmlsi=doedzGNfxK52VeZk&t=859 Let me know if you're still stuck. You can message me on Discord
Which portion specifically? doing bg-black and bg-white in the classNames? If that doesn't work try replacing it with bg-black with (bg-gray-900) and bg-white with (bg-gray-50). Let me know if that works.
@@hqasmei nope, it is like my default bg color is black. I even copy your code but still having the same problem. I just changed the color of the text to white when it isn’t on dark mode
Why this channel got only 650 sub , it deserves more.
Great tutorial! It was great to quickly have a portfolio tutorial especially as someone who is not new to JS/React (but new to Next) - thank you!
Happy to hear!
Hosna your amazing, this is my first ever watch of one of your videos and I thought it was amazing!
Thank you, I appreciate it ☺
Hey, a quick suggestion, please explain each step you're doing briefly, so that if some beginner is seeing this, they'll fully take advantage of video, like explain tailwindcss classes, what each does, rest each and everything is super amazing with your video
This video is a big recommendation for anyone that’s learning tailwind css. You’re amazing Hosna❤
Dang, you're on fire lately with these tutorials! Great work!
Thanks Hassan 😁!
This is awesome and you really cornered the market with a quick tutorial that is not just ripped off from Next, or having some subscription service tied to it. Just practical knowledge😀
This is .... I am short of words to express how AMAZING!!! You made this look sooooooo easy! THANK YOU. I subscribed! please do more videos like this. Your channel will definitely grow.
Very smart and knowledgeable!
I like your teaching style, very organized.
You're brilliant Hosna! I think you're innately gifted at teaching I think. I really liked how you broke down everything and how you structured your explanations.
Sending love and duas from the UK.
New sub! This is great content! Thank you for the tutorial. I’m about to graduate from my coding bootcamp and have been messing around with multiple frameworks for my portfolio and I really like next js. Tailwind is a huge plus! Have a great day!
This channel is a wild fire 🔥
The guide was decent overall.
Luckily I had previous experience with Next JS cause it got confusing with lack of explanation on some things.
Keep it up - you provide great content!
Great tutorial Honsa! Thank you so so much for the help.
I had a little Vercel deployment issue so just sharing that for me it worked with "@types/react": "18.2.25", in package.json both dependencies and devDependencies. Then npm install and deploy.
FYI - Vercel deployment error:
Overload 1 of 2, '(props: LinkProps | Readonly): Link', gave the following error.
Type 'Element' is not assignable to type 'ReactNode'.
Overload 2 of 2, '(props: LinkProps, context: any): Link', gave the following error.
Type 'Element' is not assignable to type 'ReactNode'.
Hi @brendanmilton5025, thanks for sharing that. Yeah, since I created that portfolio Vercel and Next.js has gotten a lot of updates 😅
I created this branch to hopefully solve the issue with updates, github.com/hqasmei/tailwindcss-and-nextjs-portfolio/tree/next14-portfolio.
Best of the best pliz give us more!!!!!!!!!!!
New sub! This is great content! Thank you for the tutorial
Thank you so much Hosna for making this really simple video on NextJs and tailwind css, I can't emphasize more on how easy and smooth journey you made with your video for people like me who are new to coding which clearly shows your mastery over the subject. I usually don't comment much on YT videos but after watching your complete video I felt that atleast I should thank you for helping me who are new to coding.
once a again a big thank you for your efforts and video.
Love and respect from India.
Thank you for those kind word. Glad it was helpful :)
Great videos, and amazing content.
Thank you for sharing your knowledge
Thank you for the great work for sharing!
Also thanks for the turtorial have learnt bag loads so thank yo.
Hey Hasna, I’m planning to add a blog nav item that opens in a new page when clicked. Could you help me with how to handle this?
Great Video Hosna! I'm not sure if it's just me, but I'd really appreciate if you can record in 1080p or higher, since the texts seem a bit blurry for me and i'm having a hard time following along. Keep up the good work!
Yes, will make sure the quality is better in future videos.
this looks like a nice project so I did SUB and liked for u so ill follow this project soon thank u
Nice video!
It would be great if you could cover nextjs dynamic navigation.
You got it! Coming soon
Thank you Hosna!
could you explain how to use metadata inside layout in next.j13? because it doesn't work with 'use client'
Amazing video was trying to find a tutorial of add dark mode and light mode using tailwind and finally found it. I have a question though you are using use client in the main page isn't that causing any problems when trying to use server components?
It does give some problems, in terms of late loading latency, but looking into using SWR way.
thanks this is great
I started this project 9 months ago, and I'm picking it back up this week. I previously got all the way to having a cloned version (with rough new design) setup on Vercel and able to be deployed. Now I just need to reacclimate myself to the whole project and then finish up design and content. Any things to keep in mind, anything that has been updated or needs to be updated? Thanks!
Good tutorial so far. But can you please explain what is the purpose of "use client" line of code on the top of the HeroSection component?
In Next.js 13, a component becomes a Client Component when using the "use client" directive at the top of the file (before any imports).
Here’s the documentation that explains it beta.nextjs.org/docs/rendering/server-and-client-components
great content
Hi, nice work! I wonder how to solve useTheme() => theme=undefined. Causing relaod page to brake theme. Thanks!
You need to explain why your project structure is different with the standart of Next JS 13. I use the standart framework and it doesn't have `app` project structure. Are there any particular reason why you create that `app` folder?
Hi @giovankabisano2266, the app directory is currently experimental in Next.js 13.
I made the video because there aren't many videos using this directory yet. Here is more information if you would like to know more about it. I'm still learning about it as well.
beta.nextjs.org/docs/app-directory-roadmap
thankssssssssssssss!
Thanks for your tutorial. In your project, you use react-scroll lib to move between sections. I have an additional page on my site. If I at this page(site/catalog) and want to move for example to the main page (site#about) the link react-scroll doesn't work. is it possible to fix it? thanks for your answer.
Hi Andriy, just got your email. Just sent you a response there.
This is a great tutorial, thank you so much!
How would you recommend adding an extra page for a project that is not deployed elsewhere?
So instead of linking to the external project, I'd like to link to a new page within my portfolio, that contains some information about the project.
I have added a file within the pages directory, which seems to work with routing, but the Tailwind CSS is not applying to it...
For routing within Next.js you can use Link. nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating
Hola tenia una pregunta relacionada con el header. El ancho es de full width y me gustaria que ocupase por ejemplo la mitad como el resto de contenedores de la pagina porque a mi no me gusta que ocupe todo el ancho de la pàgina. estoy peleando y no logro arreglarlo, un saludo
Lo siento por la respuesta tardía. No vi tu comentario. Puedes ajustar el div con max-w-xl o algo así si no quieres llenar todo el encabezado. Si aún necesitas ayuda, puedes enviarme un mensaje en Discord.
Great video ma'am.
I had a query that when i have trying to take my home proj .. and all to right side then they are not getting placed.
Can you please tell how should I solve this as i am using the same code of your.?
Do you have your source code available?
@@hqasmei yes ma'am.
I am not getting what I am missing while doing.
It will be great if you guide me ma'am. I am make the proj by following your video tutorial.
@@yashbarot3709 Can't really help you without seeing your code, if you can share it through github link
@@hqasmei Query resolved ma'am.
How to handle "warning: Extra attributes from the server: class,style" with ThemeProvider?
"suppressHydrationWarning" in layout html tag does the trick for now.
I created in the same way and on local host it is working perfectly but when I deployed it on vercel it is not generating any quotes.
Hey, Mohsin. Did you remember to add the environmental variables in Vercel?
Yeah I didn't set that
@@hqasmeisame 😢 issue is also arise with me please help me out and in video there no mention any environment variables mentioned?
Hi @@shoaib7542 , I believe this person was referencing a different video. I explain how to add the env variables there. ruclips.net/video/8jsfYyGccJU/видео.htmlsi=doedzGNfxK52VeZk&t=859
Let me know if you're still stuck. You can message me on Discord
why is it not cloning?
Does anybody else is having problem of the navbar with a bg of black the whole time?
Which portion specifically? doing bg-black and bg-white in the classNames? If that doesn't work try replacing it with bg-black with (bg-gray-900) and bg-white with (bg-gray-50). Let me know if that works.
@@hqasmei nope, it is like my default bg color is black. I even copy your code but still having the same problem. I just changed the color of the text to white when it isn’t on dark mode
@@hqasmei anyways it is still an amazing navbar
@@hqasmei never mind, I think I fixed
@@Gikkou Hi Jose, i met the same problem, how did you fix it?
Wanna build a project together?
love your content but hate your way of explaining stuff, need more context than a lot of copy pasting. Anyway thanks!
fu
thanks hosna
404: NOT_FOUND
Code: NOT_FOUND
ID: bom1::ftntn-1690288657537-124964ea4b80
I am getting the above error maam What to do now?