React Ecommerce Website Tutorial in Hindi #5: Complete Header Component with Navbar 🔥

Welcome, to React Ecommerce Website Tutorial in Hindi. In today's video, we will see how to add Header component in our react eCommerce website. Also, we will cover the complete Header component including Logo, Nav Elements, and Cart Icon.

😊 Become Member, get access to perks, free Source code, & more..

-------------- TIMILINE--------------
0:00 Intro
1:18 Figma Flow Chart
2:19 Header Component
5:05 Navlink for Logo
7:10 Add Header
8:40 Nav Component
15:10 Add to Cart Btn
16:00 Add React Icon
18:00 Cart Icon CSS
19:40 Tomorrow Video Update
20:00 Free Source

************* 😍 Must Watch Videos For Web Development 😍 *************

[ThapaTechnical]

😊 Become Member, get access to perks, free Source code, & more..

[souravsharma]

Bro, phenomenal content...you are very hardworking guy❣️🙏

[cubastic_rahul]

const MainHeder = styled.header`
height: 10rem;

display:flex;
justify-content: space-between;
align-items: center;
position: relative;
.logo{
height: 5rem;
}
@media {
}
`;

[ranjitdesai]

usual!!!!. Guys...this code is working perfectly well. There is no issue whatsoever...

[AbhishekKumar-vlgg]

sir aap sach me accha padhate ho mazza aa gaya

❤❤❤

[AftabKhan-oxvq]

Amazing... I learned to react js from your channel. And very thankful for creating the channel for us. I am confused that why we did not use bootstrap in this project?

[DeepLajpal]

I’m so grateful to Vinod Bhaiya for this amazing react project tutorial. It’s the best tutorial for react beginners because it explains all the react concepts clearly from the basics. You won’t regret taking this tutorial, it’s a very easy and enjoyable journey. 😍👏👍

[vimleshkumarkanaujiya]

Your videos make a difference ☺️. Love from the border of Nepal, Barhni.

[mohdabdulrehmankhan]

const Nav = styled.nav`
.navbar-lists {
display: flex;
gap: 4.8rem;
align-items: center;

.navbar-link {
&:link,
&:visited {
display: inline-block;
text-decoration: none;
font-size: 1.8rem;
font-weight: 500;
text-transform: uppercase;
color: ${({ theme }) => theme.colors.black};
transition: color 0.3s linear;
}
&:hover,
&:active {
color: ${({ theme }) => theme.colors.helper};
}
}
}
.mobile-navbar-btn {
display: none;
background-color: transparent;
cursor: pointer;
border: ${({ theme }) => theme.colors.black};
}
{
display: none;
}
.close-outline {
display: none;
}
.cart-trolley--link {
position: relative;

.cart-trolley {
position: relative;
font-size: 3.2rem;
}
.cart-total--item {
width: 2.4rem;
height: 2.4rem;
position: absolute;
background-color: #000;
color: #000;
border-radius: 50%;
display: grid;
place-items: center;
top: -20%;
left: 70%;
background-color: ${({ theme }) => theme.colors.helper};
}
}
.user-login--name {
text-transform: capitalize;
}
.user-logout,
.user-login {
font-size: 1.4rem;
padding: 0.8rem 1.4rem;
}
@media (max-width: ${({ theme }) => theme.media.mobile}) {
.mobile-navbar-btn {
display: inline-block;
z-index: 9999;
border: ${({ theme }) => theme.colors.black};

.mobile-nav-icon {
font-size: 4.2rem;
color: ${({ theme }) => theme.colors.black};
}
}

.active .mobile-nav-icon {
display: none;
font-size: 4.2rem;
position: absolute;
top: 30%;
right: 10%;
color: ${({ theme }) => theme.colors.black};
z-index: 9999;
}
.active .clone-outline {
display: inline-block;
}
.navbar-lists {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-color: #fff;

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

visibility: hidden;
opacity: 0;
transform: translateX(100%);
transition: all 3s linear;
}
.active .navbar-lists {
visibility: visible;
opacity: 1;
transform: translateX(0);
z-index: 999;
transform-origin: right;
transition: all 3s linear;

.navbar-link {
font-size: 4.2rem;
}
}
.cart-trolley--link {
position: relative;

.cart-trolley {
position: relative;
font-size: 5.2rem;
}

.cart-total--item {
width: 4.2rem;
height: 4.2rem;
font-size: 2rem;
}
}

.user-logout,
.user-login {
font-size: 2rem;
padding: 0.8rem 1.4rem;
}
}
`;

[almasiurrahman]

I got skilled bcoz of u bunch of thanks 👍

[Sohaibahmad-hdkf]

amazing
videoo a lot of love fromPakistann

[abdullah_siddiquii]

Bhai Etna css write krne Sai Acha hai tailwind css use krlo...aur time waste na Kartai hue functionality par focus krna chaiya

[avtheprowd]

your css is not responsive me! and i am not getting the code that you pasted while tutorial. so am quitting this series right now! i have to get code through the people on comment section, thats how you manage your series ? i came with the hope that i can build something in react easily by watching your tutorial but this feels like hell now!!!!

[RaviGupta-otuh]

👍😊All are videos and topics are completely understanding and clear concept but one thing Can you give a example of login page with captcha in ReactJS i want a example

[gouravjain]

From where you copied css part in Nav.js file 09:30 . please guide

[umaisrasheed]

you can use the CSS library why you use style components

[chillpill]

where you are pasting this all css code in nav or header ? i did'nt find?

[snehashinde]

The CSS which is written in between pages for eg. App.js(theme css), Header Css, its not given inside source code, neither given inside updated source code, are we missing anything?

[mscoding]

Bro I am your biggest fan 🔥 from Tamil Nadu

[s.h.sabhaya]

sir app style componets kaha se copy karte hoo ?