Thought of you when I put this together because I know you and a few others are big Tailwind fans. Hope this is a help! And I’m hoping I don’t move too fast or too slow. Hard to get that right :)
2:23 After 2 years to uploading this video, I start this project with you. I hope not much thing have changed in this period. For each section note I will update this comment. 38:34 Until here everything worked fine! Day 2 : 53:21 Still everything is smooth. I use Next instead of vite. I also seperate parts to components. It goes well 1:25:00 FINISHED Thanks a lot! I've learned so much valuable things!
just watched full video - and i must say hands down the best video so far on youtube ❤️ with tailwind at the end of project file is bloating with too many classes project grows, you’ll inevitably find yourself repeating common utility we can also extract classes @apply
Thanks for your kind words, @Fatima! Yes, you can use @apply. I decided against using it in this tutorial because they so strongly warn against it in the Tailwind docs (tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply): 'Whatever you do, don’t use @apply just to make things look “cleaner”.…If you’re going to use @apply, use it for very small, highly reusable things like buttons and form controls - and even then only if you’re not using a framework like React where a component would be a better choice.' I'm glad to know the project was a help all the same! And thanks for the comment and suggestion.
This was the first project I "did" with responsive layouts. I always thought it was much much harder but it's actually easier than I thought it was. Thanks for this project!
@@CodinginPublic After going through your tutorial my conclusion is that for landing pages Bootstrap is still much easier to get going with the components. However, I do think tailwind is more flexible in general and can be better in the long run and from a technical appreciation perspective it's subjectively better. I especially enjoyed your tutorial because you did some non-obvious things especially with the form and the placeholders with peers.
I use a program called Raycast. It’s a Mac-only replacement for Spotlight. They’ve got a setting to toggle the system setting and I assigned it to a keyboard shortcut.
thanks, I learned a lot, but it would be nice to see more of your process. I am assuming you don't build sites automatically knowing what styles to add.
Thanks for the comment! Yes, this was more of an application of CSS using Tailwind and less of a CSS walkthrough. I have done several other tutorials breaking down the process for choosing CSS a bit more slowly. Here's one example: Responsive Navbar HTML, CSS, and JavaScript th-cam.com/video/63sxOYm9GwY/w-d-xo.html I also try to live stream fairly regularly, so that's another great way to hear my thinking out loud. Hope that helps!
hahaha 🙈 I’ve done something with Bootstrap and Tailwind each once I think, but not much :) haha. I just so prefer having my own control over everything CSS that I think I’d only ever really use Tailwind or something as low-level since it lets me control everything. But I know a lot of people love them! And I can see why!
If you see the title and see that it is created on Vue, worry not, this tutorial also helps in normal HTML, CSS and JS. Just change around a couple of the following details: 1. in the navbar JS config, ignore the is isExpanded and setAttribute lines and use the classlist toggle command. Works just fine without it. I thinks that's Vue specific, but I don't know. 2. If your system is dark mode by default, remember to add the dark:text-white , especially on text. 3. Use the extension inline-fold to make your html look clean (personal preference). 4. Happy Coding!!!
@@CodinginPublic but at the beginning of the video, you mention that you will use Vue and do the Vue setup and that can turn prole away. I am just saying incase someone scrolls to the comment section, they can see that it uses plain HTML and setting up Vue is unnecessary.
Hi, great content! Please, can you tell me what extension are you using in vscode to use different fonts in you html code? When passing ID, class, etc... Thanks!
Hmm…I don't know? I'm using a font with different ligatures, etc. You can find the link to my font setup in the description of this video if that helps.
In Vs Code I managed to put togeter a one page site and it looks and functions ok. I didn't get the same results when I uploaded to page to a real server as the CSS breaks.Not sure if it's something anyone else has issues with? Could you advise.
Hey Chris ,amazing video ,just finished watching the complete tutorial. How do I create that animation in the landing page of tailwind website itself ,where we see that the code is being written and the output is visible at the same time. I'm talking about the very first animation where in a female by name of Sarah Dayan is giving her review. How do I produce it? . Thanks again for the tutorial.
Thank you, very helpful tutorials! I have a question about the classes, how to keep them on multiple lines? My auto formatting is putting them on one line and it gets very long.
Glad you enjoyed it! Yes, if you’re using. VSCode you can turn on line wrapping. I think it’s option/alt + z; but if that’s not right you can find the command in the command palette :)
Thanks for the tutorial really helpful. Tailwind is messy but I can see the benefit. Also where do you get the images you used for landing? I'm kinda bad with graphic design but I want some for my web design learning journey.
Glad you enjoyed it! Thanks for saying something. I’m using a default feature in macOS called spaces. It’s what happens with you fully expand any window. And then I’m splitting the space with two apps.
@@CodinginPublic oh I was looking for how to make mega menu , i saw some navigation has this huge mega menu when popover or hover, do you have any video on that using twilwind?
Hello Sir i have One Question how to convert website into App and Upload on Google Play Store can You Make a Video Step by step Process can You Plzz Make A video on This Topics
You’d need to write it in React native or some kind of app that could compile to whatever the Android store accepts. And I’m not sure how to do that 😁. Sorry!
you can do it in two ways: emulate it in chrome (open up the dev tools, press ctrl/cmd + shift + p, and search for dark mode) or on your machine (search for dark mode macOS/Windows/Linux). Hope that helps! On macOS, I use Raycast (a Spotlight replacement) to switch to dark mode with a keypress.
I probably never explained it. Sorry about that :). So Vite is just a tool that helps in the dev and final build experience. It spins up a dev server and then automatically bundles your code on build, etc. You can literally open a folder and just add an html, css, and postcss file if you want to skip vite. The only difference would be you’d have to spin up your own dev server and then init a package.json in order to use postcss. Hope that helps!
@@CodinginPublic My menubar navigation button is not working i followed your steps correctly but it didn't work. Unable to solve this error from 3 days
Hey, thanks for the feedback! Sorry it wasn't a help. The hard thing with showing only mobile or only desktop is that it's a mobile-first utility framework. I suppose I could have gone and done only mobile and then gone through all the html and added all the classes I needed for desktop, but I felt like that would be more confusing since most of the time when you're developing, you're thinking through both as you structure and style it? But thanks again for letting me know your thoughts!
@@CodinginPublic im a beginner i cant even make a mobile version website n wen i see sum1 making both at the same time it gets confusing. I hope u understand 😀 thanks for the tutorials.
No worries! We’ve all been there and I can still struggle with that. Hopefully you’ll find help in other tutorials I’ve done or others have time. I often find coming back to tutorials a few months later can be a big help if I don’t find help the first time. It’s hard to find stuff that always perfectly aligns with where you’re currently at. Sometimes it’s too simple. Sometimes it’s too difficult. Hopefully some of the stuff I’ve done can be “just right” for you 😊
I’m really excited to share this with you! If you’ve been wanting to get started with Tailwind, I hope this will be a huge help! See you tomorrow!
Omg this is what I'm waiting for a long time tysm can't wait 🙂🙂
Thought of you when I put this together because I know you and a few others are big Tailwind fans. Hope this is a help! And I’m hoping I don’t move too fast or too slow. Hard to get that right :)
🙏 glad you enjoyed it. Thanks for saying something!
2:23 After 2 years to uploading this video, I start this project with you. I hope not much thing have changed in this period.
For each section note I will update this comment.
38:34 Until here everything worked fine!
Day 2 : 53:21 Still everything is smooth. I use Next instead of vite. I also seperate parts to components. It goes well
1:25:00 FINISHED
Thanks a lot! I've learned so much valuable things!
I completed this hands-on within a day and many thanks to you where I learned so many cool tips & tricks. Thanks a lot for such a valuable content 🤝
That's awesome! Thanks for the kind words!
just watched full video - and i must say hands down the best video so far on youtube ❤️ with tailwind at the end of project file is bloating with too many classes project grows, you’ll inevitably find yourself repeating common utility we can also extract classes @apply
Thanks for your kind words, @Fatima! Yes, you can use @apply. I decided against using it in this tutorial because they so strongly warn against it in the Tailwind docs (tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply): 'Whatever you do, don’t use @apply just to make things look “cleaner”.…If you’re going to use @apply, use it for very small, highly reusable things like buttons and form controls - and even then only if you’re not using a framework like React where a component would be a better choice.'
I'm glad to know the project was a help all the same! And thanks for the comment and suggestion.
Thanks man.
I am an accountant but I love coding more than my job. These tutorials are really awesome and very beneficial for newbies like me.
Awesome! Accountant and web dev soon! Glad it was a help!
which means you're actually a programmer stuck in an accountant job just by chance.
This was the first project I "did" with responsive layouts. I always thought it was much much harder but it's actually easier than I thought it was. Thanks for this project!
Great to hear! So glad the video was a help!
@@CodinginPublic Yes Thanks a lot Chris, also thanks to the emergence of Tailwind, made responsive design easier
I guess I'll combine Astro with Tailwind and use this project as a practice implementation. Thanks Chris!
They’re a great combo!!
Very cool! Thank you.
You’re welcome!
@@CodinginPublic After going through your tutorial my conclusion is that for landing pages Bootstrap is still much easier to get going with the components. However, I do think tailwind is more flexible in general and can be better in the long run and from a technical appreciation perspective it's subjectively better. I especially enjoyed your tutorial because you did some non-obvious things especially with the form and the placeholders with peers.
I think those are basically my thoughts, too. I like the flexibility, so I’ve never liked Bootstrap much. Glad you liked the tutorial!
Thanks in advance from Bangladesh! !
You’re welcome!
Thanks alot anyway coding in public is the way to learn and keep up-to-date with the latest technologies.
Glad you enjoyed the video!
Hi, I'm writing in Türkiye, a perfect tutorial. Please more tailwind practice.. thank you
So glad you enjoyed it!
Need more tutorial like this every day 🙋🏻♂️❤
🙏 so glad you enjoyed it!
Thank you so much , one of the best web development content creater on TH-cam
🙏 so glad you enjoyed it!
good video i've learned about some attributes and stuff thanks
You’re welcome!
Wow! Informative tailwind video! So detailed and also focused on accessibility. Thank you for sharing. Valuable content. Wish you all the best!
Awesome. You’re welcome!
Thanks brother for sharing such tutorial hope more tailwind css will come !
Glad you enjoyed it! I stick mostly to standard CSS, but will definitely use Tailwind in the future, too! :)
Amazing content! You are so good with explanations and details! Very informative experience!
Thanks so much for the kind comment! Glad you enjoyed it!
Thank you. I learned alot of cool things with this.
Glad it was helpful!
Much appreciated! As always the best content ❤
🙏
this was soooo helpful! thank you for putting this one together
Great! Thanks for saying something!
@@CodinginPublic how did you easily swap your system between light and dark mode for testing?
I use a program called Raycast. It’s a Mac-only replacement for Spotlight. They’ve got a setting to toggle the system setting and I assigned it to a keyboard shortcut.
thanks, I learned a lot, but it would be nice to see more of your process. I am assuming you don't build sites automatically knowing what styles to add.
Thanks for the comment! Yes, this was more of an application of CSS using Tailwind and less of a CSS walkthrough. I have done several other tutorials breaking down the process for choosing CSS a bit more slowly.
Here's one example: Responsive Navbar HTML, CSS, and JavaScript
th-cam.com/video/63sxOYm9GwY/w-d-xo.html
I also try to live stream fairly regularly, so that's another great way to hear my thinking out loud. Hope that helps!
😂 finally bit the bullet and showing css frameworks!
hahaha 🙈
I’ve done something with Bootstrap and Tailwind each once I think, but not much :) haha. I just so prefer having my own control over everything CSS that I think I’d only ever really use Tailwind or something as low-level since it lets me control everything. But I know a lot of people love them! And I can see why!
you are the bob ross of coding :)
Lol best comment ever 😂
Fascinating, Thanks man
Sure thing! Glad it was a help! Thanks for saying something!
If you see the title and see that it is created on Vue, worry not, this tutorial also helps in normal HTML, CSS and JS. Just change around a couple of the following details:
1. in the navbar JS config, ignore the is isExpanded and setAttribute lines and use the classlist toggle command. Works just fine without it. I thinks that's Vue specific, but I don't know.
2. If your system is dark mode by default, remember to add the dark:text-white , especially on text.
3. Use the extension inline-fold to make your html look clean (personal preference).
4. Happy Coding!!!
Thanks for the comment. This project just uses plain HTML, not Vue :)
@@CodinginPublic but at the beginning of the video, you mention that you will use Vue and do the Vue setup and that can turn prole away. I am just saying incase someone scrolls to the comment section, they can see that it uses plain HTML and setting up Vue is unnecessary.
Hmm. Do you mean Vite? That’s the bundler I use. I’ve actually never written Vue. I’d love to learn it though!
thank you, I love your content
Great! Thanks for saying something!
Hi, great content! Please, can you tell me what extension are you using in vscode to use different fonts in you html code? When passing ID, class, etc... Thanks!
Hmm…I don't know? I'm using a font with different ligatures, etc. You can find the link to my font setup in the description of this video if that helps.
@@CodinginPublicThanks!
In Vs Code I managed to put togeter a one page site and it looks and functions ok. I didn't get the same results when I uploaded to page to a real server as the CSS breaks.Not sure if it's something anyone else has issues with? Could you advise.
Hey Chris ,amazing video ,just finished watching the complete tutorial. How do I create that animation in the landing page of tailwind website itself ,where we see that the code is being written and the output is visible at the same time. I'm talking about the very first animation where in a female by name of Sarah Dayan is giving her review. How do I produce it? . Thanks again for the tutorial.
My guess is it's just an mp4? I haven't looked into it. But let me know if you figure it out!
Subscribed to your channel. Thank you for the tutorial.
The project setup part is not beginner friendly.
Thanks for the sub and the feedback! It's hard to hit the right level of complexity, so having feedback helps. Thanks!
Thank you, very helpful tutorials! I have a question about the classes, how to keep them on multiple lines? My auto formatting is putting them on one line and it gets very long.
Glad you enjoyed it! Yes, if you’re using. VSCode you can turn on line wrapping. I think it’s option/alt + z; but if that’s not right you can find the command in the command palette :)
@@CodinginPublic Thank you!
Great video!
I have only one question: why you use 1-cell grid for header? Why not just flex? Thank you
Grid is naturally top to bottom, so I prefer it for those layouts. You’re welcome to use flex though and change the direction. :) So just preference:)
@@CodinginPublic Ah. Ok. Thank you for the explanation. I like your way. Just thought that I missed something.
Very Nice Tutorial !!! But did anyone run into the issue where your page does not hot reload on save ??
Glad you enjoyed it! Sorry for the trouble with the hot reloading. I haven't run into that. Let me know if I can help in any other way!
@@CodinginPublic all the thanks goes to you for this amazing tutorial. Will try to find a solution to it meanwhile.
🙏
Thanks for the tutorial really helpful. Tailwind is messy but I can see the benefit. Also where do you get the images you used for landing? I'm kinda bad with graphic design but I want some for my web design learning journey.
Glad it was a help! Images are from unsplash :)
Great Vid! BTW how do you hide the macOS default "red yellow green" button on the top-left corner?
Glad you enjoyed it! Thanks for saying something. I’m using a default feature in macOS called spaces. It’s what happens with you fully expand any window. And then I’m splitting the space with two apps.
thanks man, any video on popover, hover in navigation bar with tailwind?
Not sure I understand? Are you asking if that's possible using Tailwind?
@@CodinginPublic oh I was looking for how to make mega menu , i saw some navigation has this huge mega menu when popover or hover, do you have any video on that using twilwind?
I don’t. Sorry!
I don’t. Sorry!
Hi, thanku for the video. any reason why we used grid class on the div containing h2 and p tags at 53:50 .
Just an easy way to create a stack of the two elements.
@CodinginPublic oh I see. Sure, I'm gonna use it from now on. Thank you boss
Nice , more tailwind pls , good vídeo , like ando sub
Thanks for the kind words. Glad you enjoyed it!
which folders icon plugin you have used for your vs_code...thx in advance 🙂
I use bearded icon theme icons, I think :)
can you tell me the name of "File Icon Theme" you are using?
I think it’s called Bearded Icons
Hi bro
Can you share me how to run project after clone?
thank you
Just run these two commands:
npm i
npm run dev
How u switch to dark mode?
On my system? I use Raycast (it’s a Spotlight replacement). It has built in ability to change modes.
Hello Sir i have One Question how to convert website into App and Upload on Google Play Store can You Make a Video Step by step Process can You Plzz Make A video on This Topics
You’d need to write it in React native or some kind of app that could compile to whatever the Android store accepts. And I’m not sure how to do that 😁. Sorry!
how to switch to dark mode...somebody help
you can do it in two ways: emulate it in chrome (open up the dev tools, press ctrl/cmd + shift + p, and search for dark mode) or on your machine (search for dark mode macOS/Windows/Linux). Hope that helps! On macOS, I use Raycast (a Spotlight replacement) to switch to dark mode with a keypress.
what theme are you using on vscode?
I use Monokai Pro. Did a video explaining here.
My VSCode Theme and Font Setup
th-cam.com/video/5uETTXxVj8s/w-d-xo.html
I thought you was going to do html css and js with tailwind I have no idea what vite is
I probably never explained it. Sorry about that :). So Vite is just a tool that helps in the dev and final build experience. It spins up a dev server and then automatically bundles your code on build, etc. You can literally open a folder and just add an html, css, and postcss file if you want to skip vite. The only difference would be you’d have to spin up your own dev server and then init a package.json in order to use postcss. Hope that helps!
hey, i have a problem on 40:00 the gradient bg is doesn't work, can u help me pls ?
Happy to help! What’s the problem with the gradient?
@@CodinginPublic for me it is the -z-10 that seems to put the gradient behind the body index and therefore it is not visible at all.
@@pixelriegel huh, okay. Perhaps that's the problem for Margot Dell, too?
@@CodinginPublic might be but it is still a strange thing.
If I have time I’ll look into it later
greate video, can i get your vscode theme and font name, and the icon pack?
Sure thing! th-cam.com/video/5uETTXxVj8s/w-d-xo.html
Cascadia Code font and Monokai pro for the theme. I think my icons are Bearded icons.
@@CodinginPublic thanks 😊
Where to get images in the layout?
In the github repo linked in the description.
@@CodinginPublic do you mean readme file?
The description is empty. There are links in the readme file, I tried them all, but there is no layout itself. Sorry for stupidness😔
No Worries. Here: github.com/coding-in-public/homesmart-landing-page
Under the assets folder.
@@CodinginPublic I got it, thank you
Hello Dear Friends,
Excuse me what is your Font and your Icon Pack
I'm using Palenight Operator and Bearded Icons here, I think?
hi I'm learning Tailwind in Persian language
🙌
file icon theme name?
Bearded icons :)
@@CodinginPublic thank you man. You are amazing
why vanilla, why not react
I typically stick with the most simple, knowing those who know react can easily adapt it to react. Hope that helps
Sir i need your help
Feel free to comment. If I’m able to help, I’ll let you know!
@@CodinginPublic My menubar navigation button is not working i followed your steps correctly but it didn't work. Unable to solve this error from 3 days
Can you compare your code to my finished code on GitHub? That should help you spot if you have a problem in your html.
@@CodinginPublic Hi Abhieet, check if you have linked index and main.js with .
Can you REMAKE this video for 2024???
This tutorials so confusing :( y make mobile and desktop the same time focus on 1
Hey, thanks for the feedback! Sorry it wasn't a help. The hard thing with showing only mobile or only desktop is that it's a mobile-first utility framework. I suppose I could have gone and done only mobile and then gone through all the html and added all the classes I needed for desktop, but I felt like that would be more confusing since most of the time when you're developing, you're thinking through both as you structure and style it? But thanks again for letting me know your thoughts!
@@CodinginPublic im a beginner i cant even make a mobile version website n wen i see sum1 making both at the same time it gets confusing. I hope u understand 😀 thanks for the tutorials.
No worries! We’ve all been there and I can still struggle with that. Hopefully you’ll find help in other tutorials I’ve done or others have time. I often find coming back to tutorials a few months later can be a big help if I don’t find help the first time. It’s hard to find stuff that always perfectly aligns with where you’re currently at. Sometimes it’s too simple. Sometimes it’s too difficult. Hopefully some of the stuff I’ve done can be “just right” for you 😊