learn bootstrap 5 and tailwind from scratch with project
- Description
- Curriculum
- FAQ
- Reviews
– on this course you will learn bootstrap 5 and tailwind CSS from scratch
– 17.5 total hours
– 20 sections
- tailwind CSS – Installation:
in this section you will learn how to install tailwind CSS in your project
- tailwind CSS – Sizing and Spacing
in this section you will learn how to use Sizing and Spacing
- tailwind CSS – Border And Table
in this section you will learn how to styling Border And Table
- tailwind CSS – Typography
in this section you will learn how to use Font family ,font style ,text align
- tailwind CSS – Layout
in this section you will learn how to use Flex and Container
- tailwind CSS – Effects , Transitions And Animations
in this section you will learn how to use Transitions And Animations
- tailwind CSS – Transforms And Cursor
in this section you will learn how to use Transforms And change pointer icon
- tailwind CSS – Forms
in this section you will learn how to styling forms
- tailwind CSS – Alerts , Cards , Badges, Avatar And Navigation
in this section you will learn how to use Alerts , Cards , Badges, Avatar And Navigation
- create a project
- Bootstrap – Installation
in this section you will learn how to install Bootstrap in your project
- Bootstrap – Sizing and Spacing
in this section you will learn how to use Sizing and Spacing
- Bootstrap – Border And Table
in this section you will learn how to styling Border And Table
- Bootstrap – Typography
in this section you will learn how to use Font family ,font style ,text align
- Bootstrap – Layout
in this section you will learn how to use Flex , grid and Container
- Bootstrap – modal and Cards
in this section you will learn how to use card and modal
- Bootstrap – Forms
in this section you will learn how to styling forms
- Bootstrap – Alerts , Badges, dropdown And Navigation
in this section you will learn how to use Alerts , Badges, dropdown And Navigation
- Bootstrap – Components
in this section you will learn how to use toasts ,collapse ,carousel ,spinners , etc..
- create a project
– 2 projects
– 18 coding challenges
– 130 Repositories
-
11-installing vs codeVideo lesson
-
22-installing tailwind css via CDNVideo lesson
-
33-installing tailwind via npmVideo lesson
-
44-customizing tailwins css fileVideo lesson
-
55-install extensions in vs codeVideo lesson
-
66-explaining coding challengeVideo lesson
-
77-solving coding challengeVideo lesson
-
81-width in tailwindcssVideo lesson
-
92-height in tailwindcssVideo lesson
-
103-max height min height max width min widthVideo lesson
-
114- paddingVideo lesson
-
125-marginVideo lesson
-
136-space betweenVideo lesson
-
147-explaining coding challengeVideo lesson
-
158-solving coding challengeVideo lesson
-
161- border size and border colorVideo lesson
-
172-border opacity and border radiusVideo lesson
-
183-border styleVideo lesson
-
194-divideVideo lesson
-
205-ringVideo lesson
-
216-ring offsetVideo lesson
-
227-tableVideo lesson
-
238-table fixed and table autoVideo lesson
-
249-explaining coding challengeVideo lesson
-
2510-solving coding challengeVideo lesson
-
261-font family and font sizeVideo lesson
-
272-font style and font weightVideo lesson
-
283-install plugin and use font variant numericVideo lesson
-
294-letter spacing and line heightVideo lesson
-
305-list style type and list style positionVideo lesson
-
316-placeholder color and placeholder opacityVideo lesson
-
327-text alignment ,text color and text opacityVideo lesson
-
338-text transform and text decorationVideo lesson
-
349-text overflowVideo lesson
-
3510-vertical alignmentVideo lesson
-
3611-word break and whitespaceVideo lesson
-
3712-explaining coding challengeVideo lesson
-
3813-solving coding challengeVideo lesson
-
391-containerVideo lesson
-
402-break pointVideo lesson
-
413-grid layoutVideo lesson
-
424-flex layoutVideo lesson
-
435-flex shrink ,flex grow and orderVideo lesson
-
446-jusfiyVideo lesson
-
457-itemsVideo lesson
-
468-explaining coding challengeVideo lesson
-
479-solving coding challengeVideo lesson
-
481-box shadowVideo lesson
-
492-opacityVideo lesson
-
503-hover state and focus stateVideo lesson
-
514-animationVideo lesson
-
525-transition and durationVideo lesson
-
536-transition timing function and transition delayVideo lesson
-
547-explaining coding challengeVideo lesson
-
558-solving coding challengeVideo lesson
-
561-transform and transform gpuVideo lesson
-
572-rotateVideo lesson
-
583-scaleVideo lesson
-
594-translateVideo lesson
-
605-skewVideo lesson
-
616-transform originVideo lesson
-
627-cursor styleVideo lesson
-
638-explaining coding challengeVideo lesson
-
649-solving coding challengeVideo lesson
-
651-install tailwindcss forms pluginVideo lesson
-
662-using tailwindcss formsVideo lesson
-
673-use tailwindcss forms by classVideo lesson
-
684-styling input text and textareaVideo lesson
-
695-input error with error messageVideo lesson
-
706-style select dropdownVideo lesson
-
717-style check box and radioVideo lesson
-
728-input prefix and input suffixVideo lesson
-
739-styling buttonVideo lesson
-
7410-explaining coding challengeVideo lesson
-
7511-solving coding challengeVideo lesson
-
761-create custom alertVideo lesson
-
772-create custom cardVideo lesson
-
783-create custom badgeVideo lesson
-
794-create circle avatarVideo lesson
-
805-create circle avatar with badgeVideo lesson
-
816-create a responsive navigation barVideo lesson
-
827-explaining coding challengeVideo lesson
-
838-solving coding challengeVideo lesson

External Links May Contain Affiliate Links read more