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

Code:
github.com/marc-hinton/TheBes...
Instagram:
/ itsmarchinton - @itsmarchinton
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!

[@muffinman5958]

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.

[@marchinton]

I'm glad you find these videos useful!

[@psychederik]

shoutout to Brian Yu

[@michaelforsdike5163]

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!

[@tyanthem3966]

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

[@zobing224]

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❤

[@JoaX248]

Are you from la Inter?

[@stepgames7698]

SAME, I have an assignment to make a website in html but I was struggling to keep up with the class. This saved my life honestly :D

[@StrictFit23]

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

[@marchinton]

Try speeding it up, it's more more exciting!

[@leesimison4991]

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

[@joaoferreira8]

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!

[@marchinton]

Great job!

[@jamiecase5032]

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

[@Iamironman-JK]

This was genuinely very helpful, appreciate it!

[@DomTricksExtra]

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

[@notnice8703]

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

[@brunokrneta9339]

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

[@marchinton]

Happy to help Bruno!

[@BK-it6wg]

I think we are profile pic neighbours gday

[@marcincelmer109]

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.

[@arvinosaurus7505]

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

[@marchinton]

I'm glad you liked it. Thank you for your comment.

[@adamkelly6037]

Thank you so much! You explained better than anyone

[@rajeever8584]

The table thing you did was very clever. Expects more of the same in future. Well done.

[@marchinton]

Thank you Rajeev! More to come soon mate.

[@vivekshukla9485]

That was awesome! Thank you for the help

[@naitikkathiriya]

Ok... It's so smart way to put list style and text decoration none in universal locator✔️✨👍👍👍.. Impressed!

[@adymorris7347]

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

[@Taufiq714]

Very good presentation. Just the right pace. And good step-by-step coding.

[@leighauza]

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

[@NickName-ck2hy]

Wow thanks that really helped. Just got my motivation up again :)

[@leviross6343]

Great video! Can't wait to see more of your work!

[@marchinton]

Thank you Levi! Should be uploading more soon.

[@garybaitson]

loved this video, you make it look so easy

[@uiworld3381]

See this Header kzbin.info/www/bejne/a52tpJmkYrahsLs

[@mechragna]

Thanks for the tutorial, it was very useful. Could you add a video showing how to add to this header nested items in the nav section? thanks.

[@rain-2263]

Thank you so much! It really helpful

[@nabilotexd5836]

This is a very good tutorial thank you, however MY GOD are you fast

[@marchinton]

Sorry! I'm from the North of England, talking fast is a curse!

[@dhuvarakar3259]

Thanks for this video 😄.It is very much easy to understand

[@huzaifa5361]

Very Thank of you was making a project for my University . This helped ma alot .Thank You

[@uiworld3381]

See this Header kzbin.info/www/bejne/a52tpJmkYrahsLs

[@7amarawa]

It was really helpful mate, thank you.

[@marchinton]

Thanks for your comment Rawa!

[@adrianasilveira4561]

It helped me so much. Thank you ; )

[@fullStackInKannada]

Thank you so much! It helped me a lot :)

[@marchinton]

Happy to help Vivek!

[@dramaniaskandarondeog113]

Thank you very much I really learned something from you

[@anangyoga1381]

I did it and it worked. thank you mate, cheers!

[@marchinton]

Glad it helped mate.

[@lunasoleil2827]

Wonderful video. I'm so glad I stumbled here!

[@hiwayshoes]

Very helpful! Thank you for the tips!

[@marchinton]

Thank you for watching!

[@migueltop96]

a good example, thanks for the class, and... yes, it is the better model for any site

[@nathangurr257]

You're a gentleman and a scholar. Thank you!

[@marchinton]

I see you're also a man of culture..I appreciate it!

[@iamsimran2402]

Thanks it helped a lot🙏🏻

[@mckenzieturner7588]

Ive watched over 10 videos and followed along to all of them; This one was much simpler to make. I was able to do everything that the other ones could but with much less HTML

[@Karan-st7wf]

Thanks So much for the help!

[@marchinton]

Thanks for watching Karan!

[@tomastrnka4648]

Thanks man, this is a game changer

[@uiworld3381]

See this Header kzbin.info/www/bejne/a52tpJmkYrahsLs

[@supporttech5879]

🔥 You saved my ton of time❤️

[@berkalkan3382]

Amazing. Thank you so much!

[@yih.7952]

Hit ther! thank you very much for the video! it helped me a great deal. Do do by any chance have a video in which you explain how to connect the topics (home, about and so on) to other pages? Im a beginner and dont know how to approach this topic! Thanks in advance :)

[@josesuch4962]

Thanks so much for this video

[@abdullahalawad2661]

all respect. thank you very much

[@jallal2767]

thanks for making this video

[@ari.hasanaj]

Make moreee!! 👍🏻 great video bro

[@uiworld3381]

See this Header kzbin.info/www/bejne/a52tpJmkYrahsLs

[@408sophon]

this was great ty

[@MeCreateAccountxD]

Thank you so much!

[@AZGamerz]

Thank You soooo Much

[@rabiakhan1995]

I love Your Header very much and I made it 40 times

[@facundoarlingtoncodorniu9961]

Nice vid dude

[@shaikhmoin849]

Thank you brother ♥️

[@murphyscott5264]

love you Marc

[@JakeLoeppky]

Would the and tag be more efficient or no? I'm pretty much a n00b at HTML and am trying to learn. Great information here if I can retain it...

[@marchinton]

Using those tags are arguably more readable to humans and maybe even to basic web-crawler bots but it makes no real difference in how the site looks or works. These tags (, ) have pre-defined styles that are in the user-agent stylesheet in every browser so if you intend to make use of the pre-defined styles (which I don't), then you should definitely make use of the proper tags. Hope this made sense!

[@ianonline]

Great advice Marc, but I think instead of creating the classes .header and .inner_header, why didn’t you use the html tags and ?

[@marchinton]

Hey Ian, thank you for your comment. I used classes because I like to keep things uniform within a document. I'd probably move the HTML in to a seperate header.php document and include it on ever page with PHP so having to remember different class names without seeing the code had become a pain for me when creating additional functionality with JavaScript. Remembering if I used the header tag or if I used a class or an ID, etc. So I tend to use classes wherever possible, as long as I'm sure the names won't be useful for something later (.header is typically fine as it's not too similar to anything I'd build within a page so there's little reason to keep .header free). and tags are just as useful, don't get me wrong, but for me personality it saved me time in the future knowing that I used classes where possible, and I tend to use the same class names for the same elements across websites that I build. Also, I read a blog online about the use of bots that crawl your site for malicious purposes and the code that I read searched in particular for tags to find the navigation of your site so if I can get around them AND save me time when I code, that's a big bonus too.

[@zikpin]

Thank you so much

[@emris0426]

This is helpful Thanks

[@abdul391_]

This video convinced me to SUBSCRIBE to your channel. Thank you for this useful tutorial as I am a beginner. Stay happy stay safe. 😊

[@marchinton]

Thanks for the sub! Stay safe and happy yourself Abdul!

[@mrdoagainstthemachine7386]

You rock, man!

[@marchinton]

no u

[@littlebeauty1195]

thankyou for this video.

[@chadisfeir3809]

Thank you very helpful !!!

[@marchinton]

I'm glad you think so Chadi, thanks for your comment!

[@kayleigh4161]

This was great thank you so much! I do have a question: when I replace my h1 with an image and give that image the same style as the h1 it somehow aligns to the top of the container. Eventhough it says to align to the middle. Any tips on where I might be going wrong?

[@ash-faque]

Instead of giving same css as h1 give some other style to that logo🥴

[@uiworld3381]

See this Header kzbin.info/www/bejne/a52tpJmkYrahsLs

[@kreateyoutube6840]

VERY GR8 TUTORIAL

[@ferdoushasan3117]

Thanks for your video... It's very helpful video for beginners like me...❤️❤️❤️

[@marchinton]

My pleasure 😊

[@calebimoyera197]

very helpful thank you

[@pettyjames7]

Why not just use the element and element?

[@marchinton]

The truth for me is consistency. You get the same result either way and for me it's easier and faster to type out a div with the class of header than it is to type a header. It's completely down to the way you learn, there's no right or wrong answer here, that way is right too!

[@sidrockx95]

@@marchinton LOL. You are also compromising on semantics by using div instead of header!

[@larissavilela9866]

realmente muito bom, obrigado!

[@abi-sk2cb]

tysm for this

[@ObsceneHero]

that was excellent 🙂

[@mehmettoktas5430]

thanks for information from Turkey :)

[@uiworld3381]

See this Header kzbin.info/www/bejne/a52tpJmkYrahsLs

[@saladcream1884]

Quality Video, TY

[@Nicklefritz]

Question: I've seen people code navigation bars with unordered lists (as you have), but I've also seen people just use the navigation tags: ... . Which way is correct? Or which way is better? Or do they both have their pros and cons?

[@marinavillamizar7682]

Nav ul li is corret form man

[@anandathawale609]

Thank man

[@seyahatdeneyimleri]

thanks dude

[@kabiandavidson9835]

Awesome Video!

[@supersonic837]

Great video!! just one thing, how do I have the ul in the center of navbar instead of float right?

[@jakesteck6032]

HOLY THANK YOU!!!

[@GlobalTVArm]

thank you bro

[@marchinton]

You're welcome! Thanks for watching.

[@krzysztofs6149]

Well explained! Thanks :D

[@marchinton]

Glad you liked it!

[@1zeph]

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

[@kritikawagh5732]

Thank u sir ❣️ can u make a video on how to create a responsive website with HTML and CSS....

[@rajeshkumarbagde6732]

Very helpful

[@johnb7620]

Thanks dude! I'm just learning HTML and CSS and i was wondering if I'm the only one still interested in this especially nowadays when you can easily just use a website builder.

[@naixnas7555]

Html and css aren't only used to create websites, I think it's still a very good skill to have

[@naixnas7555]

What I mean is, you can use them to create graphics for a desktop app with electron for example

[@johnb7620]

@@naixnas7555 i did not know that. Thanks!

[@marchinton]

This thread is so true! Such a great skill to have.

[@aronm782]

Thank you!

[@marchinton]

I appreciate your comment Clayrin, thanks for watching.

[@ronaldello97]

Thank you so much for the video, but how would you put a login form in the same header?

[@Tech-Dev]

Thanks Marc for this tutorial.. what do you think using flex to build header and footer?

[@dkr97]

Thanks for the video buddy

[@marchinton]

Anytime, mate!

[@AneesKhan-uz4mz]

great bro really great, well explained

[@marchinton]

Thanks Anees!

[@AneesKhan-uz4mz]

@@marchinton bro can i request a tutorial?

[@marchinton]

@@AneesKhan-uz4mz Absolutely, what are you thinking?

[@AneesKhan-uz4mz]

@@marchinton please head over to awardspace sign-up page (google it) they using really cool real-time validation, u just check it out yourself by filling the form, can you please make a tutorial on how to make that type of real-time validation! Thanks!

[@marchinton]

@@AneesKhan-uz4mz I've actually used AwardSpace before funnily enough. I revisited just now to see the form that you talked about. I think that a video on how to validate forms in real time would be useful to a lot of others too. I'll see what I can do.

[@ayannazimmermon5506]

Thank you 🎉 I’m a beginner

[@rajeevpatel3732]

Attractive header s🔥🔥👍👍

[@Max-xp3tf]

Hi, for the space between the logo and the navigation, what about using "display: flex" with "justify-content: space-between" instead of Float left and right ? Thanks!

[@marchinton]

The float property is completely fine and safe to use, as long as your parent container has overflow: hidden; This property means that nothing from outside the parent container can be affected by what's inside the div. I hope this helps Max. Marc

[@mrbenny3757]

Max ok

[@pedroheck3667]

How would you adjust this by putting an actual image where the written logo is? I've tried it but any changes I do to the image just seems to have no effect...

[@uiworld3381]

See this Header kzbin.info/www/bejne/a52tpJmkYrahsLs

[@hosseinzandiyeh1943]

Perfect

[@ashokrawat3246]

Wow so easy 😍

[@BlaZackk]

thx a lot

[@zawwarnaseer9520]

best tutorial ive seen

[@marchinton]

Great to hear Zawwar, thank you!

[@DefactoMediaSolutions]

ty for the help m8

[@marchinton]

Anytime bud.