Tailwind CSS From Scratch

This is a fun project-based course to learn how to create awesome layouts using the Tailwind CSS framework and get comfortable using utility classes over something like Bootstrap, which uses component-based classes. Let's take a look at the outline for this course...

️ The Sandbox

I don't want to jump right into the projects, though you certainly could if you want. So the first two sections, we will be working in a coding sandbox. In every new video in these sections, we will have a new file to experiment with and learn all about a certain aspect of Tailwind. For example, we will have pages/videos for colors, typography, spacing, flex classes, and much more. This allows us to essential touch on all parts of Tailwind in a specific order, rather than just jumping right into projects.

️ Mini-Projects

Next, we will take what we learn in the sandbox environment and use it to create some small projects. These are things that will take 10 - 20 minutes to create and we will do it all in one video per project. The mini-projects include

Email Subscribe Card
Pricing Grids
Product Modal
Image Gallery
Login Modal

I may even add more mini-projects later. These will help you get your feet wet by creating something.

️ Website Projects

Next, we will start to work on larger landing-page websites. This will really put what you learned to the test. There will be 6 different websites. They are all very modern and clean-looking. We partnered with Frontend Mentor for the designs. Some projects will have a bit of javaScript for things like hamburger menus, tabs, and some validation. Let's take a look at the projects.

Clipboard Website - Simple software product landing page. Focusing mostly on flexbox and alignment. Some background images, etc.

Loopstudios - VR company website with cool images, responsive mobile menu with some JavaScript, gradient overlay effects.

Shortly - Website for a link shortening tool. We will have a nice-looking responsive menu and add a little JavaScript for some form validation and working with the DOM.

Testimonial Grid - A project where we focus on using Tailwind's grid classes.

Fylo - Product page with a light/dark mode feature. We will add some JavaScript to save the color mode to local storage. We will also have a dynamic tab component for the FAQ.

Bookmark - Bookmark manager extension landing page. This website will have some dynamic background images, a hamburger menu and some tabs that will use JavaScript.

What's inside

Learning objectives

Learn to create and edit layouts super fast
Learn the tailwind utility classes using a code sandbox
Build 5 mini-projects and 6 website projects

Learn how to set up a dev environment using the tailwind cli
Configure your styles to create custom layouts

Learn to create and edit layouts super fast
Learn the tailwind utility classes using a code sandbox
Build 5 mini-projects and 6 website projects
Learn how to set up a dev environment using the tailwind cli
Configure your styles to create custom layouts

Syllabus

Introduction

Course Outline & Projects

Project Links

What Is Tailwind CSS?

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Offers a strong balance between foundational theory and practical application

Incorporates projects into the coursework to reinforce learning

Provides a comprehensive overview of Tailwind CSS, including fundamentals and advanced techniques

Leverages industry-standard tools and frameworks

Instructor has a proven track record in web development

Course is designed for intermediate learners with some prior CSS experience

Reviews summary

Project-based tailwind css for modern web development

According to learners, this course is an exceptionally effective resource for mastering Tailwind CSS, praised for its highly practical, project-based learning structure. Students consistently highlight the instructor's clear and engaging teaching style, which makes understanding utility-first CSS concepts accessible, even for those starting 'from scratch' with Tailwind. The curriculum's progression from a dedicated sandbox environment to diverse mini and full website projects is frequently cited as a major strength, allowing for immediate application of skills and building confidence. While the course provides a solid foundation and is widely considered up-to-date and relevant for professional use, some learners note the pace can be fast if you lack prior HTML/CSS knowledge, and that JavaScript coverage is minimal, focusing primarily on Tailwind itself.

Primarily focuses on Tailwind CSS, with minimal JavaScript integration.

"While it covers some JS, it's clearly a CSS-focused course, which is what I wanted."

"Don't expect a deep dive into JavaScript; it's mainly for dynamic UI elements."

"Sometimes I wished there was more coverage on integrating Tailwind with frameworks like React, but that might be beyond the scope of a 'from scratch' course."

Effectively teaches the utility-first philosophy of Tailwind.

"This course genuinely shifted my perspective to a utility-first mindset in CSS."

"I now feel much more comfortable using utility classes over traditional component-based frameworks."

"It clearly demonstrates the power and speed of building layouts with Tailwind's utility classes."

Provides a solid foundation, ideal for those new to Tailwind CSS.

"As someone new to Tailwind, this course gave me an excellent starting point and confidence."

"It really does start 'from scratch' as advertised, which was perfect for me."

"The sandbox is great for understanding fundamentals, and the projects are diverse and exciting."

"Loved this course! It demystified Tailwind CSS for me."

Instructor's explanations are clear, engaging, and easy to follow.

"The instructor explains concepts very well, making complex ideas easy to grasp."

"I found the teaching style incredibly engaging and the pace was just right for learning."

"His explanations were very clear, allowing me to understand Tailwind's utility classes quickly."

"The instructor's voice is easy to listen to, and he breaks down complex topics into digestible chunks."

Master Tailwind CSS through practical, real-world website builds.

"The project-based learning really solidified my understanding of Tailwind CSS."

"I loved building real-world projects like the Bookmark Manager and Fylo site."

"The hands-on coding and projects are the strongest part of the course for me, very practical."

"The combination of theory in the sandbox and then immediate practical application in projects is outstanding."

Pacing can be fast; prior HTML/CSS knowledge is recommended.

"Some parts felt a little fast-paced, especially if you're not already familiar with basic HTML/CSS layouts..."

"Sometimes the instructor codes a bit quickly without enough pauses, which can be hard to follow..."

"It assumes a pretty good understanding of HTML/CSS already."

"I think it's better for those with some prior web development experience, rather than absolute coding novices."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Tailwind CSS From Scratch | Learn By Building Projects with these activities:

Review flexbox concepts

Show steps

Brush up on flexbox principles to enhance your understanding of layout techniques in Tailwind CSS.

Browse courses on Flexbox

Show steps

Revisit basic flexbox properties (justify-content, align-items)
Explore flexbox layout options (row, column, wrap)

Connect with experienced Tailwind CSS developers

Show steps

Seek guidance from experienced Tailwind CSS developers to gain insights, advice, and support throughout your learning journey.

Show steps

Identify potential mentors through online platforms and communities
Reach out and introduce yourself
Establish a mentorship relationship and schedule regular meetings

Solve Tailwind CSS challenges

Show steps

Challenge yourself by solving Tailwind CSS exercises to improve your proficiency in using utility classes and understanding their impact on layout.

Show steps

Locate online resources or platforms with Tailwind CSS challenges
Attempt to solve the challenges independently
Review solutions or consult with peers to learn from mistakes

Five other activities

Expand to see all activities and additional details

Show all eight activities

Complete Tailwind UI tutorial

Show steps

Follow a guided tutorial to build a UI project using Tailwind UI components, solidifying your understanding of Tailwind's practical implementation.

Show steps

Locate the Tailwind UI tutorial
Walk through the tutorial steps
Build the UI project using Tailwind UI components

Participate in a Tailwind CSS code review session

Show steps

Engage with peers in reviewing Tailwind CSS code, providing and receiving feedback to enhance your understanding of best practices and common pitfalls.

Show steps

Find a peer group or online community focused on Tailwind CSS
Share your Tailwind CSS code for review and feedback
Provide constructive feedback to other participants

Contribute to the Tailwind CSS community

Show steps

Deepen your understanding of Tailwind CSS by contributing to open-source projects, reporting issues, and providing solutions to enhance the framework's functionality.

Show steps

Identify areas within the Tailwind CSS community where you can contribute
Research and understand the project guidelines and contribution process
Create or address issues, suggest improvements, or contribute code

Design and build a personal portfolio website

Show steps

Create a portfolio website using Tailwind CSS to showcase your skills and projects, demonstrating your proficiency in applying Tailwind's utility classes.

Show steps

Plan the structure and design of your portfolio website
Implement the layout using Tailwind CSS utility classes
Populate the website with your projects and relevant content

Write a blog post on Tailwind CSS best practices

Show steps

Share your knowledge by writing a blog post about Tailwind CSS best practices to reinforce your understanding and contribute to the community's resources.

Show steps

Research and gather information on Tailwind CSS best practices
Organize your thoughts and outline the blog post
Write and edit the blog post
Publish and promote your blog post

Career center

Learners who complete Tailwind CSS From Scratch | Learn By Building Projects will develop knowledge and skills that may be useful to these careers:

Front-End Developer

Front-end developers translate designs and user stories into code that renders an interface displayed on the client side. This course will teach you the basic syntax of CSS and HTML, along with APIs and Javascript. This course is a great starting point if you are seeking to become a front-end developer.

See salaries and explore the career path for Front-End Developer

Web Developer

Web developers take a broader approach and handle both the front-end and back-end development of websites and applications. This course can help you get started with CSS and HTML, which are essential for front-end development.

See salaries and explore the career path for Web Developer

Software Engineer

Software engineers research, design, develop, test, and deploy software systems. If you wish to become a software engineer, this course can help you learn HTML, CSS, JavaScript, and other web development fundamentals.

See salaries and explore the career path for Software Engineer

Web Designer

Web designers create the look and feel of a website. This course will provide you with a good foundation for building your web design skills, especially if you have no prior knowledge.

See salaries and explore the career path for Web Designer

Graphic Designer

Graphic designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course focuses on color theory, typography, and other design concepts used by graphic designers.

See salaries and explore the career path for Graphic Designer

UI/UX Designer

UI/UX designers focus on the user experience (UX) and user interface (UI) of a website or application. This course can provide you with a good foundation in layout and design, which are essential for UI/UX designers.

See salaries and explore the career path for UI/UX Designer

Art Director

Art directors oversee the visual style and concepts of a variety of media, including websites and applications. This course can provide you with a good foundation in design principles, which are essential for art directors.

See salaries and explore the career path for Art Director

Product Designer

Product designers research, design, and develop products. This course can provide you with a good foundation in layout and design, which are important for product designers.

See salaries and explore the career path for Product Designer

Creative Director

Creative directors oversee the creative vision of a variety of media, including websites and applications. This course can provide you with a good foundation in design principles, which are essential for creative directors.

See salaries and explore the career path for Creative Director

Technical Writer

Technical writers create instruction manuals, articles, presentations, training materials, and other forms of documentation to help users understand technical products or services. This course may be helpful if you want to learn how to create documentation for software or websites.

See salaries and explore the career path for Technical Writer

Instructional Designer

Instructional designers create and develop educational programs and materials. This course may be helpful if you want to learn how to create online courses or other educational materials.

See salaries and explore the career path for Instructional Designer

E-Learning Developer

E-learning developers create and develop online courses and other educational materials. This course may be helpful if you want to learn how to create online courses or other educational materials.

See salaries and explore the career path for E-Learning Developer

Content Developer

Content developers create and develop content for websites, online courses, and other digital media. This course may be helpful if you want to learn how to create content for websites or other digital media.

See salaries and explore the career path for Content Developer

Social Media Manager

Social media managers create and manage social media content for businesses and organizations. This course may be helpful if you want to learn how to create social media content.

See salaries and explore the career path for Social Media Manager

Marketing Manager

Marketing managers plan and execute marketing campaigns for businesses and organizations. This course may be helpful if you want to learn how to create marketing campaigns.

See salaries and explore the career path for Marketing Manager