MFS201: Front-end Development with Tailwind CSS and Headless UI

Chapter 1 Coming soon

Introduction to the Course

We introduce Tailwind CSS, a utility-first CSS framework, and Headless UI, a set of unstyled UI components. We learn why CSS-as-an-API is convenient for rapid front-end development and how to set up Tailwind CSS and Headless UI. We also elaborate a hands-on project demonstrating how to use these tools for large-scale projects.

Lessons

Coming Soon
Overview of the course
Setting up Tailwind CSS and Headless UI
Introduction to Tailwind CSS
Introduction to Headless UI
Build your portfolio: The hands-on project to learn Tailwind CSS and Headless UI

Chapter 2 Coming soon

Customizing Layout with Tailwind CSS

Designing layout — especially for different screens — is key in CSS development. We learn how to use Tailwind CSS for layout development using CSS methodologies such as flexbox and grid utilities. We also discuss spacing and sizing elements using Tailwind CSS.

Lessons

Coming Soon
Responsive design in Tailwind CSS
Box model in Tailwind CSS
Flexbox utilities in Tailwind CSS
Grid utilities in Tailwind CSS
Spacing and sizing utilities in Tailwind CSS

Chapter 3 Coming soon

Customizing Visual in Tailwind CSS

Similar to layout, designing the visual is another important aspect for CSS development. In this chapter, we learn how to customize text-specific, background, and transform-specific properties.

Lessons

Coming Soon
Font utilities in Tailwind CSS
Text utilities in Tailwind CSS
Background utilities in Tailwind CSS
Transform and transition utilities in Tailwind CSS

Chapter 4 Coming soon

What's New in Tailwind CSS

In this chapter, we discuss new additions to Tailwind CSS. These range from new additions to the development tooling (e.g. Just-in-time mode) to modern CSS properties (e.g. blend modes).

Lessons

Coming Soon
New in Tailwind CSS 2.1+
Box decoration break
Blending colors in CSS
CSS filters

Chapter 5 Coming soon

Best Practices in Tailwind CSS

Writing efficient Tailwind CSS takes practice. In this chapter, we discuss how to manage and order classes in Tailwind. We also discuss how to extend Tailwind CSS for custom design and properties.

Lessons

Coming Soon
Managing classes in Tailwind CSS
Ordering classes in Tailwind CSS
Customizing and extending Tailwind CSS

Chapter 6 Coming soon

Building Components with Headless UI

In this chapter, we detail how to set up Headless UI. We also discuss how to build and style components with Headless UI.

Lessons

Coming Soon
Introduction to Headless UI
Headless UI components
Styling the components

Chapter 7 Coming soon

The Design and Planning: Hands-on Building a Portfolio

In this chapter, we start the hands-on project to build a portfolio with Tailwind CSS and Headless UI. We set up the development process and the unstyled markup.

Lessons

Coming Soon
Introduction and setting up the project
The prototype for the portfolio project

Chapter 8 Coming soon

Designing the Header and About Page: Hands-on Building a Portfolio

In this chapter, we continue the hands-on project. We finish designing the layout and visuals for the header and the about page of the portfolio.

Lessons

Coming Soon
Designing the header for the portfolio project
Designing the about page for the portfolio project

Chapter 9 Coming soon

Designing the Projects and Contacts Page: Hands-on Building a Portfolio

In this chapter, we finish designing the projects and the contacts page of the portfolio.

Lessons

Coming Soon
Designing the projects page for the portfolio project
Designing the contacts page for the portfolio project

Chapter 10 Coming soon

Conclusion and Next Steps

Finally, we conclude MFS201 by recounting what we learned in each chapter.

Lessons

Coming Soon
Concluding MFS201