Part - 3 Create Hero Section with React, Tailwind & DaisyUI Complete Project Tutorial in Bangla

2 months ago

আজকের ভিডিওতে আমরা দেখবো কিভাবে একটি Professional Hero Section তৈরি করা যায় React, Tailwind CSS এবং DaisyUI ব্যবহার করে।
এই ভিডিওটি আমাদের চলমান প্রজেক্ট টিউটোরিয়ালের Part - 3, যেখানে আগের পার্টে আমরা Navbar & Footer তৈরি করেছি।

🎯 In this video you’ll learn:

How to design a beautiful Hero Section using Tailwind & DaisyUI

How to make responsive Hero layout

How to structure Hero component in React

Proper folder structure and component organization

⚙️ Tools Used:

React JS

React Router

Tailwind CSS

DaisyUI

👉 আগের ভিডিও (Part - 2: Create Navbar) দেখতে এখানে ক্লিক করুন: https://youtu.be/Cs7OQJfNztE?si=uX60eyhyxaiNfFgf
👉 পরবর্তী ভিডিওতে আমরা দেখবো কিভাবে Books Data Load করা যায়

Transcript

00:00.

00:07.

00:08.

00:10.

00:13.

00:14.

00:19.

00:24.

00:29.

00:29so you can use it

00:31now we can use it

00:33and you can use it

00:35this is home

00:37so you can use it

00:39so this is your page

00:41where you can use it

00:43so you can use it

00:45we can use it

00:47to use it

00:49then we can use it

00:51here

00:53here

00:55this is

00:56is

01:03a

01:06a

01:11a

01:16a

01:17a

01:18a

01:19a

01:20a

01:22a

01:24here is a component here

01:27talent here

01:28here is a hero

01:29here is a hero

01:31here is a hero

01:33so we can go to the genre

01:35there is a hero

01:36a hero

01:37but we can do this

01:39here is a hero

01:40let's save it

01:42that's it

01:43simple genius

01:43so we can do it

01:46to the browser

01:47we can see

01:48we can do it

01:49here is a hero

01:51so we can do it

01:52our other who made Korean yes it so home I'm right I'm right kind of I'm not

01:58there are no he wrote a break and a

02:02look at the lump he got the bottom he was you can see the energy

02:06another actually yes it's box office news something is

02:10like a lot so it I'm not a chance for boy it's a chance for look at your

02:13chances from our mother can look okay look to fresh up your book self yes

02:17so i am ready to just copy any book to fresh up your book self so it i am not

02:23put the job rather than another hero to challenge you know that's it for a check

02:25and a text tackle is a box office news take a name right and i'm not saying

02:29what was it then then it'll wrap which is last way and i'm going to paragraph

02:33nice on the paragraph today title i am set pull on ever to the jaya dekhi

02:37okay look to fresh up your book self to last and get a struggle to last so get

02:42started jaga mother button and i'm over view the list view the list because it so

02:48uh get started i'm gonna be watching but i'm gonna be the list ever to do the

02:53king and we know the list to last check even i'm not jeta goldfish i'm uh

02:57it are a to size for the body uh jay to it up uh jay to the key data d3 line answer

03:03so data i'm right to size for us i still believe i'm under the diva say data

03:07data inner

03:21was that he see her name um i'm not actually to worry to excel in two excel

03:26separate and i'm only sure i say i like to show about the bullshit down share my

03:30day they can a two x three x four x four x four x four x four x dillum okay four

03:38x one more idea and like two x dillum right i'm gonna go to explode this night

03:43two x s as a two x l as a okay i'm like another two point five dillum

03:50basically today i will say i like and in order to check and four four a session with the four

03:57four four five five dillum five out of each other or some life on a to actually be up to

04:04excellent that's enough to excellent william okay like it's a cool so good like a center

04:10and i'm not checking and left alone so i can a uh what i have said okay max text me

04:22align center but i said align center i'm ready to do the other day for the hero bg base

04:26to as a minimum screen height hero content flex column reserve okay a developer else

04:34okay so i'm ready to see the hero content class name hero content content content content

04:52center so a jay hero content jeta bc hero content dhawr follow i'm gonna do that align

04:56oh yeah okay so i'm going to see the CJ and Jay it are lackata which in lifted up the number

05:03key deal text aligned text align it takes center built it's in the next point left left

05:15it's really long getting so last day okay very good I even notoriously instance

05:19so i am writing a

05:24a a a a a a download

05:27just png file download

05:31so i am already download

05:35so i am already download

05:37i am a source file

05:400.1 png

05:42so i am a first thing

05:43i am import

05:45import

05:46I am here

05:50i am

05:52a a

05:54a

05:56a

05:58a

06:00a

06:05a

06:06a

06:09a

06:11a

06:14Anyways we have a amount of...

06:21?

06:23?

06:26?

06:31?

06:36?

06:39?

06:41?

06:42Okay, we'll see now.

06:44There is a shadow that is in the area.

06:46Here the fire is in the area.

06:48The shadow has a shadow.

06:50The power in the area is here.

06:52gradeing.

06:54Flex, reflex

06:56Image Editor

06:58, the good

07:00The shadow is here.

07:02Take it, it's a shadow.

07:04Then we chose the shadow

07:06of the state.

07:08I'll save and launch the shadow.

07:10Next, press the red shadow.

07:12I'm going to say that a little more

07:14actually connect the background color with body and the other color is there a

07:17data for a new image here's a video image there better I'm not

07:20actually able to go to the editor with a number of the hero section

07:24and I'm not a little bit better I'm not a little bit already

07:27I'm not going to play I'm not a great I'm got great

07:37color so 300 gg 300 that's what I'm gonna see the other way I'll come back to our

07:45ship I'd a wish I'm not to dark with the record system with the mother like a

07:49white also it can be like a black color chino I'm gonna like a down actually

07:52black put the party font bold okay and they can in the chamber a lot of people

08:00black

08:04black

08:08black money

08:12black

08:18black

08:20black

08:22foreign

08:32foreign

08:36foreign

08:42foreign

08:50okay so you can have a black black text text text black text and view the list

09:10data iiroko maashe and aambra achea iiil eitra vichigtu border radius ho dhik kebari

09:18to excel border radius zeta border address iiwakse

09:22okay so iiwak aeater chai iiil eaambra ae to base base 200 panayam chhe khi base 200 panayam chhe

09:27jye background color variable color base 100 okay nikhani quswakta aashe so aambra jitit 200

09:36so minimum height screen 100vh

09:43screen 100vh

09:49screen 100vh

09:5350vh

09:5660vh

10:0560vh

10:0870vh

10:11no suggestion

10:16minimum height

10:1828

10:22yeah

10:25yeah

10:28yeah

10:31yeah

10:34so

10:36yeah

10:39yeah

10:44It is an %HKJN minimum height minimum height minimum height minimum height minimum height minimum height minimum height minimum height minimum height