Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Tailwind CSS From Scratch - Learn by Building Projects
  • Table Of Contents Toc
Tailwind CSS From Scratch - Learn by Building Projects

Tailwind CSS From Scratch - Learn by Building Projects

By : Brad Traversy
5 (2)
close
close
Tailwind CSS From Scratch - Learn by Building Projects

Tailwind CSS From Scratch - Learn by Building Projects

5 (2)
By: Brad Traversy

Overview of this book

We will start with coding Sandbox and explore pages/videos for colors, typography, spacing, flex classes, and much more. This allows us to touch on all parts of Tailwind in a specific order, rather than just jumping right into projects. We will take what we learn in the Sandbox environment and use it to create some small projects. Next, we will start to work on larger landing-page websites. There will be six 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 such as hamburger menus, tabs, and some validation. Let us look at the projects: -Clipboard Website: Simple software product landing page focusing on Flexbox and alignment. -Loopstudios: VR company website with cool images, responsive mobile menu with some JavaScript, gradient overlay effects. -Shortly: Responsive menu and 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. By the end of this course, you will efficiently use Tailwind CSS utility classes. All resources and code files are placed here: https://github.com/PacktPublishing/Tailwind-CSS-From-Scratch---Learn-by-Building-Projects
Table of Contents (11 chapters)
close
close
You're currently viewing a free sample. Access the full title and Packt library for free now with a free trial.
Chapter: 8
Project 3 - Shortly Website
Icon This video is locked
Icon
Icon
0:00
2.0x
1.5x
1.25x
1.0x
0.5x
caption settings
caption off
Icon Icon
ShowHide Transcripts Icon
Visually different images
CONTINUE WATCHING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Tailwind CSS From Scratch - Learn by Building Projects
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon