The BEST Way to Build a Header! [HTML,CSS]

Code:

Instagram:

In this video, I mention how you should revisit and rethink how you build different elements of a page and work on them to make them as clean, responsive and as efficient as possible.

If you have a better way of building a basic HTML header then leave a comment!

[muffinman]

as someone who literally doesnt know how to code css and html this was very helpful especially after my teacher decided to let us figure it out on our own.

[tyanthem]

Love the simplicity of your teaching style! Also short and sweet!

[michaelforsdike]

Mate, beltin' video. I'm trying to self teach and this is by far the easiest watch I have had. The online tutorial I am following teaches the basics but nothing in practice. Good to see it in action and so easy to follow. Thank you, very much appreciated!

[zobing]

Thank you so much for making this video! I am new to design and my final project requires me to to build a 4 Page website. Throughout the semester it was the most difficult for me to understand, your video just made creating the header so simple! I thank you ❤I feel confident completing my final project❤

[jamiecase]

Helpful for me regarding style sheets. I am really a coder at heart and so help like this with design much appreciated!

[StrictFit]

Probably the first coding video i've had to slow down lol, great tutorial thank you!

[leesimison]

Cool watching you work man. Showed competence and has given me something to aim towards

[notnice]

i love how quick it was! No time was wasted! Thanks :))

[DomTricksExtra]

Very well made tutorial, easy to understand, and it helped out a ton!
Thanks Marc! 👏

[brunokrneta]

Everything I was looking for the whole week. Thanks a lot man!

[joaoferreira]

Hail from Brazil! Marc, I did it and got everything right. Didn't understand the CSS thoroughly, missed like about 15%, but I consider it a great victory for a beginner like me! Thank you!

[Iamironman-JK]

This was genuinely very helpful, appreciate it!

[adymorris]

Much obliged, my friend! Simple and easy to follow.

[zeph]

Hello, just having a problem on navigation, mine was on under the header and innerheader, and idk why.

[vivekshukla]

That was awesome! Thank you for the help

[adamkelly]

Thank you so much! You explained better than anyone

[arvinosaurus]

Thank you very much for showing this code! without this I wouldn't make the best header possible

[marcincelmer]

Hi Marc,
Great video for begginers!
I have added a "hover" selector to your code.

.navigation a li:hover{
color: #101010;
font-weight: 600;
}

.navigation a:hover{
background-color: white;
}

When you drag the mouse over the menu, the background below will turn white and the inscription will change to black. I also removed padding from .navigation a{} to .navigation a li{} so now the menu item turns dark in the right moment. My question is:
- The height of the white background-color is 100% of the inline-header, but when i change it in the script for example to 50%,
the only thing that happens is the subtitles are moved up. I want the navigation to look more like a smaller rectangle buttons. Can u please help me? :)


M.

[leighauza]

amazing! thank you so much, your process made it really easy to grasp!

[anil]

How did the red box position automaticaly itself to the center? Anyone