How To Make A Website Header Using HTML And CSS Step By Step | Web Design In HTML & CSS

Learn How To Make A Website Header Using HTML And CSS Step By Step | Web Design In HTML & CSS Tutorial
❤️ SUBSCRIBE: goo.gl/tTFmPb
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-------------------------------------
Here in this video we will create a travel website header section using HTML and CSS. On this web page we will make a navigation bar with logo, some links and menu icon.
after that there will be 2 columns with some title, text and images. We will also learn to create hover effect on Image.
Download Images: drive.google.c...
-------------------------------------
Recommended Videos:
Complete HTML and CSS course for beginners
► • Complete HTML & CSS Co...
Create Login and Registration form using HTML CSS
► • How To Make Login & Re...
Make Contact us page in HTML and CSS
► • How To Make A Contact ...
Create Range Selector Input filed using HTML & CSS
► • How To Make Range Slid...
Make Full Website With HTML and CSS
► • How To Make Complete W...
-------------------------------------
My recommended tools and tutorials
👉 easytutorialsp...
------------------------------------
Image Credit:
pexels.com/
freepik.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Like - Follow & Subscribe us:
◼️ KZbin: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr

[@0001-exe]

I FOUND THE ONE. THIS CHANNEL HAS FREAKING EVERYTHING I NEED TO KNOW ABOUT CSS LIKE WHAT AAAAAAA THANK YOU SO MUCH

[@ShahadatHossain-gz2cw]

Asia and a433

[@imranukaudesh]

That’s correct

[@საბანიკაჭაძე]

he talks in 2x speed and codes in 3x

[@wendypamella3515]

Since I found your channel... Web design has been so much fun and I'm always looking forward to your new videos

[@GreatStackDev]

Happy to hear that!

[@workertyping9880]

@@GreatStackDev which screen recorder do you use...

[@jasonbrody8957]

For some reason my element created a white space and is below the background image. Any tips? Edit: Nevermind I didn't place the row inside the container . Whoops!

[@JahangirHussain-be1cx]

Sir ap logo !Interior ka konse software se download karte ho please ask me sir

[@muaidmohamed5787]

I like this tutorial Only i have one issue The hader , and cards not in one column.

[@muaidmohamed5787]

Help me with this

[@abdisakebe6846]

I think I was wasting my time scrolling on other channels.now i got the one i was looking for

[@ram-cy3gi]

hey man, sorry about the harsh words. i came back to thank you for this wonderful video

[@Gamer_Guy2.0]

Great Tutorial, I really Understood Everything

[@dhammilankathilaka5862]

Thank you so much. It is really helpful

[@sajaltabib2049]

Man You are a genius🔥🔥🔥

[@bl7937]

Thank you for sharing this tutorial. However, I'm a little confused as to why you didn't do anything with the hamburger menu / make the navigation responsive at smaller view port. I followed the whole tutorial but that part seems to be left out.

[@abdultaqui6361]

Wh compiler to use?

[@markedisontubal3299]

Thank for the tutorial Eminem (Rap God)

[@zzsssddd]

ahahahahhahaha lol...and I thought I speak fast!!

[@abdirahmanabdirashid9084]

Good job please my bro don't stop this lessons🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏

[@SBDVlogs]

very very lots of thank you brother.. will be thankful to you always

[@saitama1270]

mmm... can you please explain all hover animation in a video

[@cncmachinistaartist2160]

hoping to see your tutorial webdesign sir your good ...

[@SvenStadt]

Whoa! less caffeine today fella!

[@atheel5678]

Amazing explanation 😍😍

[@_Lalunal_]

Amazing!!! Thanks for the tutorial!!

[@sabeerwaqas]

I can not appreciate you. very well

[@hart-coded]

really enjoy, so simple to follow, great design, please responsive much appreciated

[@Arckon02]

so was it able to be responsive?

[@anangyoga1381]

thank you good sir! you give me another point of view how to use the CSS

[@sihemtoutsimplement6616]

Perfect ! Thank you ❤️

[@ankitshukla4573]

Thanks Bro 😊

[@sabirelahi1157]

Add to cart with one click quantity this save top navigation button

[@suraj5451]

Thank you soo much sir. I am your big fan.

[@GreatStackDev]

Thank you suraj brother

[@thiagovenek1744]

Nossa que massa! Você faz isso em 10minutos kkk ! Muito Bom fiz Certinho.

[@GamingTSH]

Programming By TSH -- This channel is so good too

[@carolcarvalho7753]

Né kkkk esses indianos são demais

[@jkiidev]

hhh I mean I can 1 hours, but he's only 10 minutes bruh

[@francisehemba9482]

Thank you sir. I learn a lot with your channel!

[@scorpion32]

Great project , I'm going to add some javascript to make it more interactive

[@halaldose4594]

Can you make a video of javascript i want to learn it please bro with hindi voiceover

[@scorpion32]

@@halaldose4594 sorry bro, I don't speak Hindi. I'll post the code though, all I wanted to do was just add an event listener to change background image after you hover over each image

[@halaldose4594]

@@scorpion32 ok bro please give me the source code of it

[@scorpion32]

@@halaldose4594 As soon I build it I'll put it on GitHub. What's your email?

[@FRAGGER2002]

can you please tell what picture is there in your mentioned file menu.png and logo.png as it is not opening in the given link below

[@okaarwansyah6626]

thankyou Mate!

[@samantha6670]

Great tuto. Thanks !

[@tech_channel110]

Absolutely good video

[@kj5215]

Awesome man! Loved it.

[@003charles]

Thank you! This is a great video. Very concise. What size are the pictures? I used my own and I did not get the images in a set like yours.

[@GreatStackDev]

Glad you liked this tutorial. You can check the image size by downloading my images from link given in the description

[@khadijaabid9647]

Great work, thankyou veryyy very much ;-)

[@ahmedreda3378]

from Egypt 🇪🇬💕

[@mieleinstein7530]

thank you very much you helped me a lot! keep up

[@GreatStackDev]

Glad it helped!

[@sayyadmujjamil6781]

Very nice 👍🏻👍🏻👍🏻

[@CandlestickCraft0]

Make a video....please.... Static website to daynamic website with wordpress....

[@terezaviznerova2561]

Thank you! Really helpful :)

[@pelosmeusolhos938]

thank you for sharing this with us!!

[@haseebkhan-st6nb]

The only problem i face is targeting different classes and ids in css. Sometime for complete whole website its gets exhausting.

[@nurbolkerei5562]

that was cool!

[@gabriela1438]

Hola, alguien sabe si esto se puede convertir a diseño responsivo?? Es para un trabajo de la Universidad :(

[@SM-cc3ov]

Thanks

[@yakuznecov]

Спасибо автор, ты лучший

[@technic_and_programming]

Ага)

[@dingocolon420]

I LOVE MY BROOOOOOOOOOOOOOOO💌💌💌💌

[@charlesbenson6240]

Thank you bro

[@GreatStackDev]

Thanks to you bro

[@austinkaranja6776]

followed all instructions however the html file opens as blank using visual studio code

[@AnthonyObi-wr6ro]

The website responsiveness was not taken care of in the project. also you were very fast in your presentation. but overall is good and well taught out .

[@GreatStackDev]

you will find many videos on my channel where i have used media query css to make responsive website, please check one of them: kzbin.info/www/bejne/onPJpJuhhdGAjZo

[@work-bee]

hello, sir can you please make a website in which we can book an online appointment to doctors.

[@vuongqtvn]

nice

[@Buzzboom960]

Hello, In 7:53, I used your same code but it's a little bit weird. It also looks correct.. I don't know if it's index.html problem..

[@kzzazzip6272]

what would you do if you wanted to make multiple buttons? how would you distinguish them from one another in the css file?

[@GreatStackDev]

Add another unique class name in each buttons

[@socapulsekobarid]

Is it possible to make links on this cards? Thank you for your answer.

[@abhaytiwari6411]

Hey Easy Man please Make video on Backend . If You Have FirstHand Experience in That field

[@sk3424]

thank you so much it was really helpful

[@CandlestickCraft0]

Make a video....please.... Static website to daynamic website with wordpress....

[@How_About_This428]

Indians are the best for real, thank you for this amazing tutorials

[@GreatStackDev]

Thank you so much 😀

[@GamingTSH]

Programming By TSH -- This channel is so good too

[@zaeltrus]

So many people look down on them, but they are the ones who have brain paired with humility and creativity. Almost all guides I need are made by them and they are all great.

[@ram-cy3gi]

thank u so much but i faced one problem with the cards. so im not very happy with the results so i might take my like back :/

[@ahmedreza3374]

Please kindly share your html css code..

[@HussainiSportsKit]

Unfortunately, the transformation hover is not working. instead when I hover it, it moves to the left not to the top, any solution?

[@sadaammohamoud1259]

Why the background is not working

[@RoyBrown777]

Im new to html and I'm so over tutorials starting and saying, oh yeah all this at the top is standard when I dont have any of that code making the rest of the video worthless only a few seconds in.

[@anirudhpottammal5909]

Jus type it in Bruh! thats the whole point

[@GamerboyAnubhav]

After adding background image , nd running on life server . The black image is not showing

[@daivikverma07]

why are my cards overlapping? can anyone tell some solution

[@robertodepasamonte3434]

Very nice and well presented tutorial!!! BUT .... the design is only applicable to desktop. For tablet and mobile phone, the functionality is a total fail. It's 2020, and website design must be fully responsive, otherwise it has no practical use. Would be very helpful if you create a follow-on tutorial to extend the design to tablet and mobile phone (perhaps using bootstrap or tailwind). In any case, thank you for your effort.

[@phillipjuan8686]

lmao it's far simpler to learn html than using google sites

[@Zackaito01]

Thank youu broo

[@ram-cy3gi]

thank you so much i was about to fail my html class and u helped me god bless you and ur family i love you so much. if u are looking for a wife i can be yours

[@Adriennnn0]

Thank you. Really great tutorial! It feels good to be able to learn and build at the same time

[@isroxy33]

Me to i feel good thank you tutoria

[@OwolDestiny]

This is a really good frontent tutorial, being a developer I can see you have a really good eyes for design. I think you should try to explain some advanced tags so beginner's can understand better. Thou, your content is good, I wish to start using voice over for my videos as well.

[@GamingTSH]

Programming By TSH -- This channel is so good too

[@applevaldez5795]

Can i get this code for free ? I don't have enough money 🥺

[@Mortar_life]

did you get the code bro

[@DOODOOMAN118]

My images aren't side by side like that, it's in a row from left to right. This only happens in full scrren tho. i gotta review because it was probably something i did wrong.

[@suraiyanahreen6530]

could you please tell from which websites do you take icons, logos and wallpapers/photos?

[@raizelamagno3134]

how do you complete a whole html ?? can you please make a tutorial and also can it be the continuation of the video pls I badly need this now

[@codecreator7503]

03:25 i struck in this place

[@andrewkirwa3948]

The background image doesn't show even though i correctly specified the path.Please shed light on this

[@faizanabbasi_]

same error facing

[@zihadshaikh4525]

Your (rgba) code is wrong, I face this problem now i saw that there was something missing..

[@AbdullahHuseynli_q9m]

Hi i loved this tutorial but i have a question i wrote that transistion:transform 0.5s; and i added card:hover but it doesn't work can you please help?

[@Annalena874]

Does anyone has a file oder the coding? I really need it because of a school project and some things don't work right now.

[@harwindersingh8546]

.card: hover{ transform: translateY(-10px); } this is not working....

[@GreatStackDev]

remove space after .card: it will be .card:hover

[@kamalbouj3407]

Thank you man : how to link thoses pictures to a google for exemple ?

[@ekanshpandit3713]

Another great tutorial . 😍🤩🤩😍. will it be responsive for phone resolution?

[@GreatStackDev]

no it's not responsive will make another part for this. for now you can check this video to make any website responsive: kzbin.info/www/bejne/fnnXfoCJaZeWjdU

[@darkin4279]

im having trouble at putting images it wont work for me

[@pxychodelic]

lol same, any updates so far? maybe u can teach me 😂

[@enchantedtea8641]

Me too. I'm using VS Code and Opera

[@_IZLY_]

Mine is walking fine cross check your code n u have to add background-position b4 ur image will show

[@darkin4279]

@@_IZLY_ I figured it out 3 months ago now able to make my own survey form ☺️

[@aura-j1i]

1.50 not working for me, now the image is not visible just darkness😑😑

[@Sara-thatgirl]

Well you can't explore anything. How do you add text

[@hotrandacduy3340]

lol didn't work, the background turns into dark screen

[@somrender]

Brother i have a question, If me wannt to publish for example this website that you make what do i have to do? *i'm new at website, code etc .

[@OwolDestiny]

You can push you code to github and then use Netlify as a server to publish your site, its free.

[@somrender]

@@OwolDestiny Thank you!

[@somrender]

@@ghcoder5477 Thanks

[@kar_kar9065]

Can a card be able to have a link? Then when you click it, it can go to another website. How can i do that?

[@GreatStackDev]

add card div inside tag in href add the other url ex: card

[@gaurav7367]

Excellent work! can you show how to anchor some other html page in the buttons,menu etc? It will be really helpful to me

[@legendaryesports6809]

yes

[@manasdas9461]

Did you figure it out? I need it

[@ravikishore5941]

what is flex-basics

[@archiKavhh_13]

the image doesn’t work and i dont get it. How ? :(

[@Harsh-gh7rx]

for some reasons the "logo" isn't giving gap upside likes its stuck at top and isn't moving.... here is css code ( in html everything is same ) *{ margin: 0; padding: 0; font-family: "Roboto", sans-serif; } .container{ width: 100%; height: 100vh; background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(background.png); background-position: center; background-size: cover; padding-left: 8%; padding-right: 8%; box-sizing: border-box; } .narbar{ height: 12%; display: flex; align-items: center; } .logo{ width: 50px; cursor: pointer; }

[@iCheckyHDOff]

Hi, first of all, thank you, very nice video But, I'm meeting a problem I can't place the images like you did for the articles, it's been fusing between them

[@movietime4512]

kzbin.info/www/bejne/iqirop-ubdepmrc

[@alfieanim4461]

Zoom in to 125%

[@NimeshFernando-vq9dl]

Thanks bro this video help me to do my course work as my wish all the best do more contents

[@mohanreddy4289]

The background image doesn't show even I though I specified correct path. Please help me

[@jamesjopelbarrientos2012]

hi Mohan, have you fixed this already?

[@nurdeeni6698]

Hi i have a question, my CSS does not detect any images, if I have to an image it has to be in the HTML. Do you have any idea why?

[@queenangelafrancisco2005]

same problem

[@shohidjonolimjonov8167]

This was more of showing off than a tutorial. I wouldn't use 'margin-left ' to make space between menu items in the nav , I would rather use flex then justify-content ="space-between' .. so I make sure the menu items and the space between them is responsive.I also hope you used the semantic sectioning element instead of but think the inner had no more semantic alternative. I liked when you used 'flex:1' on the I know you meant 'flex-grow:1' while the other two items (imgs) are default to flex-grow : 0 . Hope you the best.

[@user-kr4ib7fz4z]

everytime i zoom the h1 and paragraph get out of the container do you have a solution for that?

[@user-kr4ib7fz4z]

@GreatStack