Build a Website with Tailwind CSS | Project Tutorial
Vložit
- čas přidán 2. 07. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Build a website with Tailwind CSS in this Tailwind CSS project tutorial. You will learn how Tailwind CSS applies media query breakpoints, light & dark mode, and various CSS styles with class names.
🚀 Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: bit.ly/WebDevMaster
- The Complete Web Designer: bit.ly/CompWebDesign
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 All Resources for this Tailwind CSS Course: github.com/gitdagray/tailwind...
🔗 Playlist for this Tailwind CSS Course: bit.ly/3BKYrzg
Build a Website with Tailwind CSS | Project Tutorial
(00:00) Intro
(00:05) Welcome
(00:15) Project Preview
(02:33) Project Setup
(10:21) Starting the Website
(12:48) header and nav styles
(22:16) Hero section
(30:34) horizontal rule
(31:17) Rockets section
(44:13) Scroll settings
📚 Suggested Pre-requisites for this Tailwind CSS course:
🔗HTML for Beginners full course: • HTML Full Course for B...
🔗CSS for Beginners full course: • CSS Full Course for Be...
📚 Tutorial References:
🔗 Tailwind CSS: tailwindcss.com/
🔗 Prettier: www.npmjs.com/package/prettier
🔗 Automatic Class Sorting with Prettier: tailwindcss.com/blog/automati...
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Node.js: nodejs.org/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 Tailwind CSS Intellisense VS Code Extension: marketplace.visualstudio.com/...
🔗 Inline Fold VS Code Extension: marketplace.visualstudio.com/...
Was this tutorial on building a website with Tailwind CSS helpful? If so, please share. Let me know your thoughts in the comments.
#tailwind #css #website
In this Tailwind CSS lesson, we will begin building a project which will help us learn many of the Tailwind CSS class names as well as how to apply media queries for both sizes and light & dark modes. You will see how Tailwind CSS Intellisense helps us easily see the actual CSS style rules that are applied, and how quickly we can add Tailwind classes to HTML once you become familiar with them. If you are just getting started with CSS, I recommend going to my CSS for Beginners course here: czcams.com/video/n4R2E7O-Ngo/video.html
What should I start with when starting tailwind css for 1st time. Coz it's bouncing over my head , coz these classes are not clicking in my head.
@@Sky-yy go to lesson 1 in this series.
You are a great help, Dave. Thank you for so many things you’ve taught me.
Thank you, Dave, for such content and to think of it all for free, it's amazing..been working on BS for some time but now jumping onto Tailwind, and omg I just landed on your channel, thanks mill pal🤝🤝, you have earned a Subscriber
I'm glad I chanced upon your channel Dave. I just started my internship and was new to tailwind. Your videos and detailed explanation has given me a level of confidence that I am so glad I came across your video. Thank you for sharing your knowledge with us.
An awesome way of learning Tailwind CSS. Thank you Dave for such effort ❤
Glad you enjoyed it!
Awesome as always!! every word has value. Thanks, Dave, for sharing 👍
Thank you so much for this, it helped me. Love how you explain every small detail unlike other people.
Glad it was helpful!
Thank you for this amazing tutorial, I have learned so much already
Awesome!!! This is exactly the kind of project I was looking for. TQVM Dave. It is much appreciated 👍👍
Glad to help!
Amazing content and project.
I cant wait for more of tailwindcss series!
Thank you! Coming right up!
This was a fun project and it really helped me understand Tailwind CSS. Thanks so much Dave, you made me a better frontend dev today.
Glad it helped!
Estou a gostar dessa serie, mais uma aula incrível.
i was waiting for this video . thanks
Welcome!
Thank you Dave for this amazing content
You're welcome!
43:59 I was also bangin my head over that issue! ...this video is helpful!
Thank you for this series!
You're welcome!
Beautiful project! Thanks, Dave!
God bless!
Abraço!
You're very welcome!
Hey Dave, thank you for all the content sir, I love learning from you! 🔥
Can I ask for a favour and ask if you could make a tutorial on using Express and Tailwind and creating a project or even just showing a video on how to set things up?
Thank you!
Cool project loved it!! ❤
Thank you!
Your content is just amazed! Learnt many things from you and will continue learning from you Sir💖❤
Thank you!
Thank man! Subbed and liked!
Welcome aboard! 💯🚀
Thank you, Dave
You're welcome!
Awesome tutorial thank you
You're welcome, Sona!
Hello Dave, as I really enjoy your tutorials I would love to see a tailwindcss react tutorial :) Thanks for your work!
Thanks for the request!
Amazing lecture as always
Many thanks!
thank u bro❤
Hi. Very nice and well explained tutorial, thanks. I have noticed that you added classes: w-2/3 sm:w-5/6. But tailwind is mobile first, right? Shouldn't it be vice versa? w-5/6, md:w-2/3? It is on
I think either way would work.
Great!
Thanks! 💯
Amazing content.
Much appreciated!
Hey Dave, can you cover how would you do a really complex navigation menu on mobile (University website kinda with very nested menus) with tailwind?I can't find anything related to it. Thanks!
Great request! 💯
awesome tut just using my custom css also waiting for next tut
Thank you!
My Life Best Teacher Thanks
You're welcome!
Wow very useful
Glad to hear that!
Thank you
Welcome!
Hi Dave, I am new to this and I have a noob question to ask, I tried to follow your video step by step and when I tried to install the prettier-plugin-tailwindcss to vscode, i can install it but it doesn’t show up on the package.json file, i have to manually add “devDependencies”: { “prettier-plugin-tailwindcss”: “^0.3.0”} to the json file manually, may I know why does this happen and am I doing it right by adding it myself? Thank you.
After creating the script for prettier, am I supposed to do npm run prettier? Because the extention does not seem to be working for me.
You are the best
Thanks!
At 9:30, how do we make it so that prettier formats other files as well, for instance all js files?
Actually it's the intellisense extention that does not seem to be working, after installing is there any setting to change or anything to enable it? I hover over and I am not seeing the css,
Looks better than Bootstrap so far at least to me,
Tailwind docs are extremely helpful as vanilla css properties are mentioned for each class,
I don't remember if I mentioned this before, but we can test dark/light mode using Chrome dev tool/Styles/The little paint brush icon.
Thanks Dave and have a nice weekend 🚀
Great tip, Ahmad! You have a great weekend, too! 💯🚀
🔥
If you add the content of the element and then add classes one by one, it will be easy to understand
So basically u need to remember the class or can find it on the tailwind website?
Dave i want to ask.
Will you make a turtorials how to add a payments to websites?
I coundnt find any good turtorial on youtube.
Good request! There are many different 3rd party APIs for this. I'm sure some do not cover these details due to sensitive financial info, but I'll look into it.
Hi Dave. I followed your instructions but i'm getting this error: Unknown at rule @tailwindcss(unknownAtRules)
Is it cuz my version of tailwind is different from yours or any other reason? Can you provide me a fix? I really would love to follow you here. Thank you
Hey Dave keep the good work the channel is growing strong,will you be doing clones so that we get real world experience
Thanks
Maybe sometime - clones do not interest me as much, but I do see their usefulness. I'm glad you have liked my content so far!
How do you calculate the correct size to use when building a project, should I just play around figures till I get the one I like or is there a specific mathematics for that ?
It is more experimenting. The more you do it, the better your estimates will become.
Hello Dave, thank you for this usefull video
! I have a question at 33:00 you're selecting words using CTRL+D and replacing and it seems to be case sensitive can you tell me please how you did this ?
The VS Code extension "multiple cursor case preserve". It's great!
@@DaveGrayTeachesCode Thank you Dave !
Awesome! What kind of computer you use? Do you prefer Windows?
I use Windows most often.
Is your browser zoomed in? everything looks much narrower on my version.
Great tutorial BTW, thanks
Edit, I just switched my max widths to 5xl and it looks good, so I learned something extra :)
I may have zoomed in. Glad you learned something extra!
Hello, Thank you for your lesson.
I regret that I didn't know about your chanel earlier. Found it by infinite scroll react video.
By the way, on 33:00 you press Ctrl+D and change rockets to testimonials.
Why inside h2 tag it becomes capitalized and inside id - lowercased?
You're welcome! Ah yes - you are asking about Ctrl+D and to preserve the case, you need to install the extension "Multi Cursor Case Preserve" - it's great!
Thank you!
I'm not quite sure where I went wrong since applying styles to the body element in Acme Rocket doesn't change anything. However when I apply the same styles to the h1 element it does change but not to the body. Kindly share some thoughts. Thanks.
I can only guess about your code. My source code is available at the course resources link in the description and is provided by chapter. Please compare your code to mine to look for differences.
@Dave the dark:bg-black doesn't seem to work. Still getting a white background. My code is identical to yours.
Are you using Linux and Chrome? There is a known issue some have discussed about Chrome.
@@DaveGrayTeachesCode I am on Mac with M2 CPU running Ventura 13.3 using Chrome Version 112.0.5615.137 (Official Build) (arm64)
great
Thanks!
when ever i put in npx tailwindcss init it says The term 'npx' is not recognized as the name of a cmdlet, function, script file, or
operable program. Check the spelling of the name, or if a path was included, verify that
the path is correct and try again.
At line:1 char:1
+ npx
+ ~~~
+ CategoryInfo : ObjectNotFound: (npx:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
do u know how to fix this?
A couple of solutions are posted in the answer of this post: github.com/facebook/create-react-app/issues/9735
@@DaveGrayTeachesCode thank you
How many parts are there in this series?
I never truly know. I just go where the content leads. This will not be a long series though. It is just for introducing Tailwind CSS and creating some familiarity with classes and settings.
World best👍
Thank you for the kind words!
26:44
button: sm:hidden
nav: hidden sm:block
can you explain please
?
I thought I did, but here you go: tailwindcss.com/docs/hover-focus-and-other-states#media-and-feature-queries
Sir, not working.
Check your spelling "black"
😮💨
@@utinthein7274 your operating system preference must now be set to a dark theme to see a black background and white text.
Ofcourse Sir, i forgot on off theme🥰
Excellent, very instructive. But it seems that intuitively doing this will be long time coming ..... this stuff doesn't come naturally to me
It can take time.
It's a dislike from my side.
I think it would be an improvement if you add the html elements first and then start adding the css classes.
This way i can see what each tailwind css class does.
Hi Dave, I was trying to download the course files from the git repo as zip files but I got warnings from my anti virus saying that the files have Trojan " Trojan:Script/Wacatac.H!ml " classified as Severe!
but cloning the repo was fine had no issue 🤷♂
Strange - seems your anti-virus doesn't like any type of script files. Just learning code here! I recommend git clone as well.
@@DaveGrayTeachesCode
My anti virus is just windows defender actually and you are right I tried downloading completely different repo and same thing happened but as I said cloning the repos works fine, thank you for all your awesome content ❤️