3.1 - Tailwind

The Tailwind CSS Framework

In this part of the course, we'll explore pre-made CSS frameworks to jumpstart our CSS development.

Activity 1

3.1 - Activity 1 - CDNs

Key Terms:

libraries and frameworks - Other people's code, which is intended to be "added on" to your project, for pre-made solutions to common tasks. All libraries and frameworks that we cover in this class are open source.
CDN - Content Delivery Network, or a free webhost you can use to bring in libraries. Many free / open source CSS frameworks have a CDN link you can easily "drop into" an HTML document to skip the step of downloading it.
Google Fonts - A free library of 1000+ fonts that you can browse and select from, and then include in your projects
Tailwind - A free library of premade CSS classes that you can incorporate into your projects.

Key Term Review:

open source and free/libre software - Software and code that is under a special type of license, called a "free software license", allowing you to incorporate it into your project and expand on it without needing permission or paying for licensing.

View Activity 1 Slides

Activity 2

3.1 - Activity 2 - Tailwind Take-Off

Congrats on getting to this important lesson!

You, as a students in this class, might have felt some frustration at this point. Do all your websites look, well, bad? Making something "professional" looking takes so much time. Don't you wish there was a shortcut, or a way we could "skip ahead" with styling? Well, when flying an airplane, a tailwind can give you a speed boost. Similarly, Tailwind CSS is intended gives your CSS development a speed-boost!

Tailwind FAQ

How does it work? - It's simple in concept: A huge collection of pre-written classes for you to use, that let you forget about writing CSS for a moment and just quickly spice up your HTML with professionally pre-designed CSS. Think of it like a free "CSS design library".
Is it free? It's free, but is originally by a for-profit company, which also sells Tailwind-related software subscriptions. None of those are needed for anything in this course.
Are there alternatives? Dozens! Some old classics include Bootstrap 5 (Twitter) and Materialize CSS (Google). Somewhat newer ones include Theme UI, and Base Web (Uber).

View Activity 2 Slides

Activity 3

3.1 - Activity 3 - Tailwind Components

Tailwind's Components are example collections of tailwind code for you to use. They are great for getting a head-start with a design, then changing things until it looks like what you really want.

Tip: Find good colors with: https://tailwindcolor.com/
For inspiration, check out the example solution: (3.1/solutions/sols3.html)[../3.1/solutions/sols3.html]

Challenge 1:

Browse Tailwind's simple component examples:

Challenge 2:

Browse more of Tailwind's simple component examples:

Try using these in a text editor, like you used before.

View Activity 3 Slides

Activity 4

3.1 - Activity 4 - Tailwind UI

Now, check out Tailwind UI. There is a lot of it that does not require a Sign-In, but there is more that is hidden behind a sign-in. For this exercise, feel free just to use the open / public / free stuff.

https://tailwindui.com/components

Try using these in a text editor, like you used before.

For inspiration, check out the example solution: (3.1/solutions/sols4.html)[../3.1/solutions/sols4.html]

View Activity 4 Slides