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

What you will 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

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


Subscribe to latest coupons on our Telegram channel.

– 18 coding challenges

– 130 Repositories

English
language

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

Enroll for Free

Share This Course on:
Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock