Tailwind CSS A new way to THINK CSS
What you’ll learn
Style Webcontent with TailwindCSS, fast, efficient, unique and practical
Requirements
Having some experience with CSS are necessary. Experience with other CSS frameworks like Bootstrap will help but are not mandatory.
Description
Hello and Welcome!I just showed you this sailing boat, because what I will teach you in this course will literally push forward your frontend development.Maybe you heard already that with TailwindCss you can develop beautiful and unique websites and interfaces very rapidly.But the most important advantage for me is, that you do not have to create endless stylesheets for adapting your website for different screen sizes.For example if you want to apply a class only for large screen sizes and above you just add a “lg:” to the class that you are using.My name is Martin and I’ve been using CSS and Frameworks like Bootstrap on a professional level for a very long time.I have to tell you – for me – TailwindCss is indeed a small revolution in web development. In Fact with TailwindCss you are combining the advantages of normal CSS with the advantages of frameworks like Bootstrap.In this course I will show you the Ins and Outs of how to install, configure and in many examples how to apply TailwindCss.We will do responsive Layouts, Animations and much more.Furthermore I will give you a short introduction into alpine.js, which is also revolutionary, when it comes to easily triggering behavior like animations in your web design.I will provide you with the full source code for every step we do in this course, as well as some useful cheat sheets – that will help you remember later what you learned.This course is not very long, I want to really urge you to invest a weekend or several evenings to do this course and to learn something, that is a lot of fun, and something that will definitely play a very important role in web development in the 2020’s.I look very much forward seeing you in this amazing course!
Overview
Section 1: Introduction
Lecture 1 Your Course Material for the next 3 course sections (PDF)
Section 2: Software Setup
Lecture 2 Visual Studio Code + Extensions
Lecture 3 Node.js installation
Lecture 4 Git Installation (Optional)
Lecture 5 SourceTree Installation (Optional)
Section 3: Installation & Basic Skills
Lecture 6 Install Tailwindcss in 5 steps
Lecture 7 ATTENTION – UPDATE – IMPORTANT
Lecture 8 Get styles and workflow up and running
Lecture 9 Background: Use Git with SourceTree
Lecture 10 Background: Command Line Usage
Lecture 11 Background: Emmet
Lecture 12 Background: VSC Shortcuts
Lecture 13 Background: The 3 main parts of Tailwindcss
Section 4: Complete mini project
Lecture 14 Container + breakpoints + Debug Screen Plugin
Lecture 15 Planning the mini website
Lecture 16 Roughly arrange the page content
Lecture 17 Format and preset headings
Lecture 18 Text formatting in Tailwindcss
Lecture 19 Define your own heading font
Lecture 20 Add your own color
Lecture 21 Format the lists
Lecture 22 Format the rest for the lg-resolution
Lecture 23 Design a button with icon
Lecture 24 Background Info: Free Icons
Lecture 25 Introduction to responsive design with Tailwindcss
Lecture 26 Optimization for medium and small screens (md + sm)
Lecture 27 Use Flexbox for Layout as well + 2 small improvements
Lecture 28 Optimize for very small screens
Lecture 29 Optimize for very large screens (xl + 2xl)
Lecture 30 Background patterns
Lecture 31 Correction for Chrome very small screens
Lecture 32 Quote above with quotation marks and a different color
Lecture 33 Introduction to dynamic features in Tailwind CSS
Lecture 34 Create “Dark Mode”
Lecture 35 Brief introduction to Alpinejs + Darkmode button
Lecture 36 Dynamic display of the dark mode button
Lecture 37 Outsource button styles
Lecture 38 Shrink CSS with Purgecss
Lecture 39 Project summary
Section 5: Advanced configuration of Tailwind CSS
Lecture 40 Course Script (PDF) for Advanced Configuration of Tailwind CSS
Lecture 41 New project and copy Tailwind CSS installation
Lecture 42 Further configuration options
Lecture 43 Background: Advanced colors
Lecture 44 Example: Implement your own color palette
Lecture 45 Background: color gradients
Lecture 46 Outsourcing your own theme (presets)
Lecture 47 Presets for the container
Lecture 48 Deactivate individual features
Lecture 49 Extend / disable variants
Lecture 50 Conclusion + Cheat Sheet
Section 6: Digging Deeper. into Tailwind CSS
Lecture 51 Define own breakpoints and container (important lecture!)
Lecture 52 Typography Plugin for Tailwind CSS
Lecture 53 Configure Typography plugin
Lecture 54 The current PDF for this section
Lecture 55 Grid system options
Anyone who wants to style web content with the most modern tool out there
Course Information:
Udemy | English | 7h 30m | 8.24 GB
Created by: Martin Krebs Eberth
You Can See More Courses in the Developer >> Greetings from CourseDown.com