Companies Home Search Profile

Tailwind CSS with Project

Focused View

Webo Pedia

8:36:57

117 View
  • 1 - Introduction.mp4
    00:52
  • 2 - Background Classes and Shades.mp4
    09:19
  • 3 - Element Sizing Tailwinds Numbering System.mp4
    08:02
  • 4 - Padding Margins.mp4
    07:51
  • 5 - Styling Text.mp4
    16:10
  • 6 - Borders and Radius.mp4
    09:50
  • 7 - Display Modes.mp4
    03:09
  • 8 - Responsive Design.mp4
    15:40
  • 9 - Pseudo Classes.mp4
    05:19
  • 10 - Transitions Transforms and Animations.mp4
    21:51
  • 11 - Gradients.mp4
    05:00
  • 12 - Other Utilities.mp4
    06:50
  • 13 - Layout and Positioning.mp4
    07:30
  • 14 - Flexbox Part1.mp4
    14:00
  • 15 - Flexbox Part2.mp4
    11:00
  • 16 - Space Between Utilities.mp4
    08:33
  • 17 - Block Gallery Challenge.mp4
    04:49
  • 18 - Grid.mp4
    10:38
  • 19 - Basic Card Component with no image.mp4
    07:39
  • 20 - Card with and image.mp4
    09:50
  • 21 - Horizontal and Responsive Card.mp4
    10:19
  • 22 - Basic Buttons.mp4
    13:28
  • 23 - Outlined Button.mp4
    05:00
  • 24 - Grouped and with Icon Buttons.mp4
    04:37
  • 25 - Basic Form.mp4
    11:36
  • 26 - Minimal Login Form.mp4
    13:58
  • 27 - Floating Label Form.mp4
    12:08
  • 28 - Installing TailwindCSS.mp4
    19:28
  • 29 - Deploying to Netlify.mp4
    07:48
  • 30 - Tailwind in VS Code.mp4
    10:00
  • 31 - Debug Screen Plugin.mp4
    08:02
  • 32 - Header Layout.mp4
    05:56
  • 33 - Navigation Styling.mp4
    07:03
  • 34 - Navigation Responsive.mp4
    04:07
  • 35 - Hero Layout.mp4
    05:40
  • 36 - Hero Styling.mp4
    14:45
  • 37 - Hero Decoration.mp4
    06:14
  • 38 - Hero Responsive.mp4
    17:26
  • 39 - About Layout.mp4
    03:39
  • 40 - About Styling.mp4
    05:56
  • 41 - About Responsive.mp4
    14:18
  • 42 - What Youll Learn Layout.mp4
    09:50
  • 43 - What Youll Learn Styling.mp4
    07:30
  • 44 - What Youll Learn Responsive.mp4
    05:14
  • 45 - Layout Styling Responsive.mp4
    12:13
  • 46 - Pricing Layout.mp4
    06:50
  • 47 - Pricing Styling.mp4
    08:49
  • 48 - Pricing Custom Class.mp4
    01:48
  • 49 - Pricing Responsive.mp4
    04:43
  • 50 - Layout Styling Responsive.mp4
    08:19
  • 51 - Layout Styling Responsive.mp4
    08:10
  • 52 - Layout Styling Responsive.mp4
    10:10
  • 53 - Creating our menu using AlpineJS.mp4
    19:40
  • 54 - Customising Theme Part 1.mp4
    13:32
  • 55 - Customising Theme Part 2.mp4
    11:22
  • 56 - Disabling an entire core plugin.mp4
    03:27
  • Description


    Learn Tailwind CSS from scratch! Make good looking designs quickly.

    What You'll Learn?


    • How to use Tailwind CSS classes
    • Make good looking designs
    • Reducing bundle sizes
    • How to customize Tailwind
    • Using Tailwind in VS Code
    • Creating common components
    • Tailwind css 3.0
    • Deploying it to Netlify
    • AlpineJS
    • vite JS installation

    Who is this for?


  • Anyone who wants to learn modern method of style web content with the most modern tool out there
  • What You Need to Know?


  • Basic understanding of HTML and CSS
  • More details


    Description

    Tailwind CSS is a utility–first framework for rapidly building custom designs. This tutorial will teach your Tailwind from scratch.

    During this course we will be exploring the features of Tailwind CSS. As a quick recap, Tailwind is a utility–first framework designed to speed up the design process by completely removing the need for custom CSS.

    In the past, every HTML element would get a single class and that class would contain a lot of custom CSS in a separate CSS file. Though this is still the general practice, this practice leads to huge CSS files, reduces the ease of maintaining CSS and yields overall poorer developer experience.

    Another advantage of a utility framework is its superior performance with caching due to not busting the cache for small CSS changes.
    Tailwind has been designed with incredible sensible defaults to make your designs look and feel polished and designed through the careful use of color palettes, color shades, sizing consistency and modern web best–practices. It’s also worth noting, that Tailwind is mobile–first and has an easy naming convention with responsive designs built–in.

    Need some customizations?
    Tailwind’s robust customization system will allow you to customize/tweak/modify everything in the framework through the use of the tailwind.config.js file.

    You Will Learn:

    • All the types of utility classes

    • How to use the utility classes properly in our project

    • How to customize the existing utilities of Tailwind

    • How to add new utility classes to our project

    • Tailwind Layouts

    • Responsive web design

    • And Much More...

    Who this course is for:

    • Anyone who wants to learn modern method of style web content with the most modern tool out there

    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Category
    At Webo Pedia, We Teach Students Latest Technologies That Are Implemented By Several Companies In The Real World. We Want To Teach Everything That We Have Learned While Working With Corporates.We guide students through each step of the process so they can learn quickly and be productive from day one.
    Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.
    • language english
    • Training sessions 56
    • duration 8:36:57
    • Release Date 2023/07/05

    Courses related to CSS

    Subtitle
    AtoZ: Sass
    SitePoint Guy Routledge
    Guy Routledge
    AtoZ: Sass
    3:04:57
    English subtitles
    09/17/2023

    Courses related to tailwind css