learn bootstrap 5 and tailwind from scratch with project

learn bootstrap 5 and tailwind from scratch with project

learn bootstrap 5 and tailwind from scratch with project

in this course you will learn how to work with bootstrap , tailwind CSS and some basic of java script

Language: english

Note: 5.0/5 (1 notes) 1,224 students  New course 

Instructor(s): Creative Programmer

Last update: 2022-06-04

What you’ll learn

  • you will learn bootstrap 5
  • you will learn tailwind
  • after this course you will be able to create project with bootstrap and tailwind
  • this course has 130 repositories, and it is a good resource
  • learn some basic java script

 

Requirements

  • basic of html

 

Description

– on this course you will learn bootstrap 5 and tailwind CSS from scratch

– 17.5 total hours

– 20 sections

  1. tailwind CSS – Installation:

    in this section you will learn how to install tailwind CSS in your project

  2. tailwind CSS – Sizing and Spacing

    in this section you will learn how to use Sizing and Spacing

  3. tailwind CSS – Border And Table

    in this section you will learn how to styling Border And Table

  4. tailwind CSS – Typography

    in this section you will learn how to use Font family ,font style ,text align

  5. tailwind CSS – Layout

    in this section you will learn how to use Flex and Container

  6. tailwind CSS – Effects , Transitions And Animations

    in this section you will learn how to use Transitions And Animations

  7. tailwind CSS – Transforms And Cursor

    in this section you will learn how to use Transforms And change pointer icon

  8. tailwind CSS – Forms

    in this section you will learn how to styling forms

  9. tailwind CSS – Alerts , Cards , Badges, Avatar And Navigation

    in this section you will learn how to use Alerts , Cards , Badges, Avatar And Navigation

  10. create a project

  11. Bootstrap – Installation

    in this section you will learn how to install Bootstrap  in your project

  12. Bootstrap – Sizing and Spacing

    in this section you will learn how to use Sizing and Spacing

  13. Bootstrap – Border And Table

    in this section you will learn how to styling Border And Table

  14. Bootstrap – Typography

    in this section you will learn how to use Font family ,font style ,text align

  15. Bootstrap – Layout

    in this section you will learn how to use Flex , grid and Container

  16. Bootstrap – modal and  Cards

    in this section you will learn how to use card and modal

  17. Bootstrap – Forms

    in this section you will learn how to styling forms

  18. Bootstrap – Alerts , Badges, dropdown And Navigation

    in this section you will learn how to use Alerts , Badges, dropdown And Navigation

  19. Bootstrap – Components

    in this section you will learn how to use toasts ,collapse ,carousel ,spinners , etc..

  20. create a project

– 2 projects

– 18 coding challenges

– 130 Repositories

 

Who this course is for

  • frontend developer
  • web developer
  • college student

 

Course content

  • 1-Installation
    • 1-installing vs code
    • 2-installing tailwind css via CDN
    • 3-installing tailwind via npm
    • 4-customizing tailwins css file
    • 5-install extensions in vs code
    • 6-explaining coding challenge
    • 7-solving coding challenge
  • 2-Sizing and Spacing
    • 1-width in tailwindcss
    • 2-height in tailwindcss
    • 3-max height min height max width min width
    • 4- padding
    • 5-margin
    • 6-space between
    • 7-explaining coding challenge
    • 8-solving coding challenge
  • 3-Border And Table
    • 1- border size and border color
    • 2-border opacity and border radius
    • 3-border style
    • 4-divide
    • 5-ring
    • 6-ring offset
    • 7-table
    • 8-table fixed and table auto
    • 9-explaining coding challenge
    • 10-solving coding challenge
  • 4-Typography
    • 1-font family and font size
    • 2-font style and font weight
    • 3-install plugin and use font variant numeric
    • 4-letter spacing and line height
    • 5-list style type and list style position
    • 6-placeholder color and placeholder opacity
    • 7-text alignment ,text color and text opacity
    • 8-text transform and text decoration
    • 9-text overflow
    • 10-vertical alignment
    • 11-word break and whitespace
    • 12-explaining coding challenge
    • 13-solving coding challenge
  • 5-Layout
    • 1-container
    • 2-break point
    • 3-grid layout
    • 4-flex layout
    • 5-flex shrink ,flex grow and order
    • 6-jusfiy
    • 7-items
    • 8-explaining coding challenge
    • 9-solving coding challenge
  • 6-Effects
    • 1-box shadow
    • 2-opacity
    • 3-hover state and focus state
    • 4-animation
    • 5-transition and duration
    • 6-transition timing function and transition delay
    • 7-explaining coding challenge
    • 8-solving coding challenge
  • 7-Transforms And Cursor
    • 1-transform and transform gpu
    • 2-rotate
    • 3-scale
    • 4-translate
    • 5-skew
    • 6-transform origin
    • 7-cursor style
    • 8-explaining coding challenge
    • 9-solving coding challenge
  • 8-Form
    • 1-install tailwindcss forms plugin
    • 2-using tailwindcss forms
    • 3-use tailwindcss forms by class
    • 4-styling input text and textarea
    • 5-input error with error message
    • 6-style select dropdown
    • 7-style check box and radio
    • 8-input prefix and input suffix
    • 9-styling button
    • 10-explaining coding challenge
    • 11-solving coding challenge
  • 9-Alerts , Cards , Badges, Avatar And Navigation
    • 1-create custom alert
    • 2-create custom card
    • 3-create custom badge
    • 4-create circle avatar
    • 5-create circle avatar with badge
    • 6-create a responsive navigation bar
    • 7-explaining coding challenge
    • 8-solving coding challenge
  • 10-project
    • 1-explaining project
    • 2-create login page
    • 3-create signup page
    • 4-create inbox page
    • 5-create inbox page part 2
    • 6-create mobile menu
    • 7-create inbox content
    • 8-create all and send page
    • 9-create email page
    • 10-create send email page
    • 11-remove bg color in menu
  • 11-Installation
    • 1-installing bootstrap via CDN
    • 2-download boostrap file and change all properties
    • 3-install extensions in vs code
    • 4-explaining and solving coding challenge
  • 12-Sizing and Spacing
    • 1-width and height
    • 2-max width and max height
    • 3-padding
    • 4-margin
    • 5-explaining coding challenge
    • 6- solving coding challenge
  • 13-Border And Table
    • 1-border size and border color
    • 2-border radius
    • 3-table
    • 4-responsive table and make table smaller
    • 5-explaining coding challenge
    • 6- solving coding challenge
  • 14-Typography
    • 1-font size and font color
    • 2-display heading
    • 3-lead , text decoration and font weight
    • 4-blockquote and line height
    • 5-text alignment and text transform
    • 6-list
    • 7-explaining coding challenge
    • 8- solving coding challenge
  • 15-Layout
    • 1-container
    • 2-break point
    • 3-display
    • 4-flex and flex direction
    • 5-justify content , align items and align self
    • 6- flex shrink , flex fill and flex grow
    • 7-flex wrap ,flex wrap reverse and order
    • 8-grid system
    • 9-explaining coding challenge
    • 10- solving coding challenge
  • 16-modal and Card
    • 1-modal
    • 2-card
    • 3-explaining coding challenge
    • 4- solving coding challenge
  • 17-Form
    • 1-text input and text area
    • 2-select input
    • 3-chickbox input . radio nput and switch input
    • 4-range input
    • 5-button
    • 6-prefix and suffix
    • 7-floating label
    • 8-file input
    • 9-input and layout
    • 10-valid and invalid input
    • 11-explaining coding challenge
    • 12- solving coding challenge
  • 18–Alerts , Badges, dropdown And Navigation
    • 1-alert
    • 2-badge
    • 3-navigation bar
    • 4-dropdown
    • 5-explaining coding challenge
    • 6- solving coding challenge
  • 19-Components
    • 1-spinner
    • 2-slider
    • 3-collapse
    • 4-canvas
    • 5-progress bar
    • 6-toast
    • 7-tooltip
    • 8-popover
    • 9-explaining coding challenge
    • 10-solving coding challenge
  • 20-create a project
    • 1-explaining the project
    • 2-create login page
    • 3-create signup page
    • 4-create navigation bar
    • 5-create add post modal
    • 6-create edit profile modal
    • 7-create post and category
    • 8-create post page
    • 9-create footer part

 

Time remaining or 778 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate