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.