Web Dev Roadmap for Beginners (Free!): https://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: https://bit.ly/WebDevMaster
โ The Complete Web Designer: https://bit.ly/CompWebDesign
โ Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
๐ฉ Subscribe โ https://bit.ly/3nGHmNn
๐ฌ Course Updates โ https://courses.davegray.codes/
โ Questions โ Please post them to my Discord โ https://discord.gg/neKghyefqh
โ Buy Me A Coffee โ https://www.buymeacoffee.com/davegray
๐ Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
๐ All Resources for this Tailwind CSS Course: https://github.com/gitdagray/tailwind-css-course
๐ Playlist for this Tailwind CSS Course: https://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: https://youtu.be/mJgBOIoGihA
๐CSS for Beginners full course: https://youtu.be/n4R2E7O-Ngo
๐ Tutorial References:
๐ Tailwind CSS: https://tailwindcss.com/
๐ Prettier: https://www.npmjs.com/package/prettier
๐ Automatic Class Sorting with Prettier: https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
โ Web Dev Tools:
๐ Chrome Browser: https://www.google.com/chrome/
๐ Node.js: https://nodejs.org/
๐ Visual Studio Code (VS Code): https://code.visualstudio.com/
๐ Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
๐ Tailwind CSS Intellisense VS Code Extension: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
๐ Inline Fold VS Code Extension: https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold
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
