Master Tailwind CSS by Build 2 Advanced Projects

Master the latest Tailwind CSS v.3 with project based approach and learn to convert Figma design to Tailwind CSS website

Master Tailwind CSS by Build 2 Advanced Projects

Instructors:

Zekaryas Yohannes

Description:

Tailwind CSS is a highly customizable CSS framework which can be used directly in your HTML. No more heavy CSS. it's designed from the ground up with customization in mind.

Why Tailwind CSS?

? Easily customize and configure however you want to.

? Create unique looking website (this is not the case in Bootstrap).

? Utility First

? Faster CSS Styling Process

? Responsive Design.

? Easily used with any frameworks.

? Tiny (super fast in production).

? Easily apply Dark Mode and more themes.

? Beautiful Color Presets.

? Plugins.

? Customization...Customization...Customization.


In this course I will take project based approach to teach you the latest Tailwind CSS. we will build 2 beautiful real world production ready websites together. we will see the basics, some of the advanced concepts and techniques to achieve our needs. In these project we will not only see the common designs(like cards, buttons, form inputs...) but we will go beyond and cover how you can make really great designs.

I will update this course regularly when necessary.


What You Will Learn?

? Customize & Configure Tailwind CSS.

? Write Optimized and Performant Code for Production. ?

? Make responsive designs with Tailwind CSS (RWD).

? Apply Dark and Light Mode.

? Managing duplication and creating reusable styles.

? Not only bound to the pre-defined styles but you will learn hot to add and customize your own presets.

? Practically Understand the difference between tailwind CSS and other CSS frameworks like bootstrap.


2 Real Projects

We will create 2 real world websites. These projects are open source and free to use.

  1. Tail Listing - Business and Directory Listing Website

  2. Tail Furniture - Furniture Showcase Website (Figma to Tailwind CSS)


Course content:

  • Get Bonus Downloads Here.url (0.2 KB)
    • ~Get Your Files Here !1. Introduction and Getting Started
    • 1. Welcome and Introduction.mp4 (34.6 MB)
    • 2. Intro to Tailwind CSS.mp4 (8.9 MB)
    • 3. Installation and setup.mp4 (28.2 MB)
    • 4. Customize and Configure.mp4 (36.1 MB)
    2. Project 1 - Business and Directory Listing Website
    • 1. Project Overview.mp4 (36.5 MB)
    • 10. Footer Section.mp4 (25.4 MB)
    • 11. Updating Navigation Bar.mp4 (115.4 MB)
    • 12. Tweaks and Changes.mp4 (95.4 MB)
    • 2. Navigation bar and Banner.mp4 (122.0 MB)
    • 3. Popular Categories Section.mp4 (118.5 MB)
    • 4. Discover by Categories and Collections section.mp4 (77.6 MB)
    • 5. Teams Section.mp4 (112.6 MB)
    • 6. Testimonials Section.mp4 (107.6 MB)
    • 7. Contact Us Section.mp4 (97.9 MB)
    • 8. Features Section.mp4 (51.3 MB)
    • 9. Loading section.mp4 (58.7 MB)
    3. Advanced Tailwind CSS
    • 1. Responsive Design - 1.mp4 (114.3 MB)
    • 2. Responsive Design - 2.mp4 (82.5 MB)
    • 3. Applying Dark Mode.mp4 (142.1 MB)
    • 4. Reusing Styles.mp4 (49.8 MB)
      • gitignore
    • index.html (69.8 KB)
    • package.json (0.4 KB)
      • srcassetsimages
      • 20210221-KXCoffeeGym29.jpg (377.4 KB)
      • 247885282_428899745318874_4537354239597400518_n.jpg (48.8 KB)
      • 248803100_2982714285376888_215754295389385771_n.jpg (43.5 KB)
      • 81782419-mobile-phone-repair-at-service-center-smartphone-dissasembling-and-diagnostic-repairman-workplace-to.jpg (175.8 KB)
        • contact-us
        • photo-1524069290683-0457abfe42c3.jpg (181.9 KB)
        • photo-1584568518279-d781778d1481.jpg (117.5 KB)
      • dental 1.jpg (39.6 KB)
      • dental 2.jpg (5.4 KB)
      • dental 3.jpg (184.1 KB)
      • dental 4.jpg (235.9 KB)
      • dental 5.jpg (346.5 KB)
      • download.jpg (11.4 KB)
      • google_maps_hello_world.jpg (99.6 KB)
        • hero
        • hero_1.jpg (2.1 MB)
        • hero_2.jpg (2.6 MB)
        • hero_3.jpg (3.3 MB)
        • hero_4.jpg (3.0 MB)
        • hero_5.jpg (2.5 MB)
        icons
        • 531911_camera_device_entertainment_film_media_icon.png (3.0 KB)
        • 566024_coffee_cafe_cup_drink_espresso_icon.png (4.3 KB)
        • Restaurant.png (3.8 KB)
        • automotive.png (3.7 KB)
        • fb.png (1.1 KB)
        • health.png (4.1 KB)
        • home.png (7.3 KB)
        • hotel.png (3.4 KB)
        • ig.png (2.6 KB)
        • pt.png (1.8 KB)
        • school.png (5.3 KB)
        • shopping.png (3.8 KB)
        • tg.png (1.4 KB)
        • tr.png (1.2 KB)
      • images (1).jpg (7.7 KB)
      • logo.png (44.8 KB)
      • logo.webp (3.1 KB)
      • model-avatar.jpg (72.3 KB)
      • res-pic (1).jpeg (75.3 KB)
      • res-pic (1).jpg (60.6 KB)
      • res-pic (2).jpg (95.1 KB)
      • res-pic (3).jpg (60.1 KB)
      • res-pic (4).jpg (432.4 KB)
      • res-pic (5).jpg (238.0 KB)
      • res-pic (6).jpg (17.2 KB)
      • res-pic (7).jpg (59.3 KB)
      • skynews-dentist-generic_5393494.jpg (83.2 KB)
        • team
        • smile.jpeg (96.0 KB)
        • smile_4.jpg (227.7 KB)
        • smile_6.jpg (100.0 KB)
        • smile_man_1.jpg (126.6 KB)
        testimonials
        • testimonial-2.jpg (117.1 KB)
        • testimonials.jpg (166.7 KB)
        svg
        • moon.svg (0.3 KB)
        • sun.svg (0.7 KB)
        css
        • input.css (11.1 KB)
      • tailwind.config.js (0.5 KB)
        • 4. Project 2 - Furniture Website
        • 1. Project Overview.mp4 (13.9 MB)
        • 2. Figma Design to Tailwind CSS Website.mp4 (225.1 MB)
        • 2.2 Furniture Website Figma Design.html (0.2 KB)
        • gitignore (0.0 KB)
        • index.html (22.7 KB)
        • my-preset.js (0.4 KB)
        • package-lock.json (28.4 KB)
          • srcassets
          • Ellipse 5.png (6.1 KB)
          • Group 113.png (416.4 KB)
          • Group-1.svg (4.5 KB)
          • Group.svg (3.0 KB)
          • Home-1.png (3.4 MB)
          • IG-1.jpg (24.2 KB)
          • IG-2.jpg (32.5 KB)
          • IG-3.jpg (31.4 KB)
          • IG-4.jpg (26.3 KB)
          • Image-living room.png (209.5 KB)
          • Mask Group-1.png (203.8 KB)
          • Mask Group-2.png (474.4 KB)
          • Mask Group.jpg (634.3 KB)
          • Mask Group.png (347.3 KB)
          • Purchase Securely.png (199.4 KB)
          • Ships From Warehouse.png (157.8 KB)
          • SkinClinic.png (1.8 KB)
          • Style Your Room.png (123.4 KB)
          css
          • input.css (0.5 KB)
        • tailwind.config.js (0.3 KB)
          • 5. Conclusion and Next Steps
          • 1. Conclusion and Next Steps.mp4 (3.1 MB)
          • 1.1 tailwindcss best resources list.txt (0.9 KB)
          • Bonus Resources.txt (0.4 KB)

Download this course:

file type : Torrent
Files :
  • Torrent 11.7 GB
*select one of the torrent file above to download the course
source: https://www.udemy.com/course/master-tailwind-css-with-projects/

Top reviews:

JRDPP
Jardel Ricardo de Paula Paes

áudio do professor está horrível.

RL
Ralph Linares

Just starting the course and it looks very promising. Looking forward to learning a lot from this course!

NM
Nanael Manale

Fantastic course. Zekaryas is a great instructor. He takes the time to clearly explain all the major tailwind css classes and when to propertly use them. The course projects are very helpful for learning how tailwind css is applied to build real applications.

AB
Abenezer Berhanu

Really great course to learn tailwindcss. Love the projects and I gained so much knowledge out of it

MAA
Muhammad Abror Abyyu

it is really good even though the audio didn't good


Similar courses: