Video 15-1 Getting started with tailwind and build a button

Welcome to Tailwind

Don't look at my tail

Visit tailwindcss.com

Hi! How are you. How about your Life

Video 15 -2 Compare Tailwind classes with bootstrap classes

Video 15-3 : Tailwind Flexbox and compare with bootstrap

bg-amber-700

box-1

box-2

box-3

Video 15-4 : Explore Tailwind grid with row and column span

My guddo guddo grrid

My Grid Layout

Header

Main Content

Side Nav

Footer

Video 15-5 : Penguin fashion overview and tailwind extension setup

Video 15-6: Apply header with custom button and svg hero icons

Video 15-7 Make header responsive for smaller and larger devices

Tailwind Bike Fashion

Be the Bikers of
Highway Road

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis molestias tempora, tenetur quo alias fugiat reiciendis nesciunt libero in quis, ab non iure. Explicabo laboriosam cum veritatis nesciunt officia eligendi!

Video : 15-8 Setup custom card and card grid using tailwind css

Women Bike

Smart Bike

Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, voluptatibus voluptates quod nostrum dolor itaque.

$1300

Smart Bike

Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, voluptatibus voluptates quod nostrum dolor itaque.

$1300

Smart Bike

Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, voluptatibus voluptates quod nostrum dolor itaque.

$1300

Video 15-9 : Responsive grid and custom grid layout

Find the Perfect Fit

Everybody is different, which is why we offer styles for every body.

Find the Perfect Fit

Everybody is different, which is why we offer styles for every body.

Find the Perfect Fit

Everybody is different, which is why we offer styles for every body.

Video 15-10 Module Summary and Tailwind component Library

QUIZ

Q1: Which of the following Tailwind Css Class is correct?
Ans: text-justify

Q2: Which class is used to make width 75% ?(Be careful, this could be tricky. Checkout the Tailwind documentation)
Ans: w-9/12

Q3: Which class will make a div take the width of 3 columns in the Tailwind grid system?
Ans: ❮div class="col-span-3"❯4❮div❯

Q4: Which Tailwind class will you use to make the items horizontally centered on a container that has the property flex?
Ans: justify-center

Q5: How will you change the background color to “red” on mouseover using a tailwind class? (search hover in the tailwind doc)
Ans: hover:bg-red-800

Q6: How to set 1rem padding using a Tailwind CSS class?.
Ans: p-4

Q7: Which class will make the font size extra small in size?
Ans: text-xs

Q8: Which class will make the text move to the right on a large device?
Ans: lg-text-right

Q9: Which class will you use to make the font extra bold?
Ans: font-extrabold

Q10: What is tailwind CSS?
Ans: Utility first CSS framework

Video 15_5-1 Practice Tea House using CSS or bootstrap or tailwind

Video 15_5-2 Create Private Repository And Deploy To Netlify For Assignment

Video 16-1 CSS Framework Ed Tech landing page assignment

Bonus Video

Video 16_5-1 (optional) Introduction to SCSS and SCSS variable

Video 16_5-2 (optional) Explore SCSS modules and inside of bootstrap

Video 16_5-3 Run Javascript in Visual Studio Code to get ready

Video 16_5-4 Be determined to get best out of our course

THE END

Video 15-1 Getting started with tailwind and build a button

Welcome to Tailwind

Don't look at my tail

Visit tailwindcss.com

Hi! How are you. How about your Life

Video 15 -2 Compare Tailwind classes with bootstrap classes

Video 15-3 : Tailwind Flexbox and compare with bootstrap

bg-amber-700

box-1

box-2

box-3

Video 15-4 : Explore Tailwind grid with row and column span

My guddo guddo grrid

My Grid Layout

Video 15-5 : Penguin fashion overview and tailwind extension setup

Video 15-6: Apply header with custom button and svg hero icons

Video 15-7 Make header responsive for smaller and larger devices

Tailwind Bike Fashion

Be the Bikers of Highway Road

Video : 15-8 Setup custom card and card grid using tailwind css

Women Bike

Smart Bike

$1300

Smart Bike

$1300

Smart Bike

$1300

Video 15-9 : Responsive grid and custom grid layout

Find the Perfect Fit

Find the Perfect Fit

Find the Perfect Fit

Video 15-10 Module Summary and Tailwind component Library

QUIZ

Q1: Which of the following Tailwind Css Class is correct? Ans: text-justify

Q2: Which class is used to make width 75% ?(Be careful, this could be tricky. Checkout the Tailwind documentation) Ans: w-9/12

Q3: Which class will make a div take the width of 3 columns in the Tailwind grid system? Ans: ❮div class="col-span-3"❯4❮div❯

Q4: Which Tailwind class will you use to make the items horizontally centered on a container that has the property flex? Ans: justify-center

Q5: How will you change the background color to “red” on mouseover using a tailwind class? (search hover in the tailwind doc) Ans: hover:bg-red-800

Q6: How to set 1rem padding using a Tailwind CSS class?. Ans: p-4

Q7: Which class will make the font size extra small in size? Ans: text-xs

Q8: Which class will make the text move to the right on a large device? Ans: lg-text-right

Q9: Which class will you use to make the font extra bold? Ans: font-extrabold

Q10: What is tailwind CSS? Ans: Utility first CSS framework

Video 15_5-1 Practice Tea House using CSS or bootstrap or tailwind

Video 15_5-2 Create Private Repository And Deploy To Netlify For Assignment

Video 16-1 CSS Framework Ed Tech landing page assignment

Bonus Video

Video 16_5-1 (optional) Introduction to SCSS and SCSS variable

Video 16_5-2 (optional) Explore SCSS modules and inside of bootstrap

Video 16_5-3 Run Javascript in Visual Studio Code to get ready

Video 16_5-4 Be determined to get best out of our course

THE END

copyright©2023 Allright Reserved | Made by Nizam

Be the Bikers of
Highway Road

Q1: Which of the following Tailwind Css Class is correct?
Ans: text-justify

Q2: Which class is used to make width 75% ?(Be careful, this could be tricky. Checkout the Tailwind documentation)
Ans: w-9/12

Q3: Which class will make a div take the width of 3 columns in the Tailwind grid system?
Ans: ❮div class="col-span-3"❯4❮div❯

Q4: Which Tailwind class will you use to make the items horizontally centered on a container that has the property flex?
Ans: justify-center

Q5: How will you change the background color to “red” on mouseover using a tailwind class? (search hover in the tailwind doc)
Ans: hover:bg-red-800

Q6: How to set 1rem padding using a Tailwind CSS class?.
Ans: p-4

Q7: Which class will make the font size extra small in size?
Ans: text-xs

Q8: Which class will make the text move to the right on a large device?
Ans: lg-text-right

Q9: Which class will you use to make the font extra bold?
Ans: font-extrabold

Q10: What is tailwind CSS?
Ans: Utility first CSS framework