The BEST Way to Build a Header! [HTML,CSS]
Vložit
- čas přidán 3. 11. 2018
- 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! - Zábava
![The BEST Way to Build a Footer! [HTML,CSS]](http://i.ytimg.com/vi/KUHrMzN7ey8/mqdefault.jpg)
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.
I'm glad you find these videos useful!
shoutout to Brian Yu
Love the simplicity of your teaching style! Also short and sweet!
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!
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❤
Are you from la Inter?
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
This was genuinely very helpful, appreciate it!
Probably the first coding video i've had to slow down lol, great tutorial thank you!
Try speeding it up, it's more more exciting!
i love how quick it was! No time was wasted! Thanks :))
Everything I was looking for the whole week. Thanks a lot man!
Happy to help Bruno!
I think we are profile pic neighbours
gday
Much obliged, my friend! Simple and easy to follow.
Cool watching you work man. Showed competence and has given me something to aim towards
That was awesome! Thank you for the help
Thank you so much! You explained better than anyone
loved this video, you make it look so easy
See this Header czcams.com/video/5lJsfn-QnzY/video.html
Very well made tutorial, easy to understand, and it helped out a ton!
Thanks Marc! 👏
Helpful for me regarding style sheets. I am really a coder at heart and so help like this with design much appreciated!
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!
Great job!
Thank you very much for showing this code! without this I wouldn't make the best header possible
I'm glad you liked it. Thank you for your comment.
Great video! Can't wait to see more of your work!
Thank you Levi! Should be uploading more soon.
Wow thanks that really helped. Just got my motivation up again :)
amazing! thank you so much, your process made it really easy to grasp!
Thanks for this video 😄.It is very much easy to understand
It was really helpful mate, thank you.
Thanks for your comment Rawa!
You're a gentleman and a scholar. Thank you!
I see you're also a man of culture..I appreciate it!
Very good presentation. Just the right pace. And good step-by-step coding.
Ok... It's so smart way to put list style and text decoration none in universal locator✔️✨👍👍👍..
Impressed!
Thank you so much!
It really helpful
The table thing you did was very clever. Expects more of the same in future. Well done.
Thank you Rajeev! More to come soon mate.
Thank you very much
I really learned something from you
It helped me so much. Thank you ; )
Wonderful video. I'm so glad I stumbled here!
Very helpful! Thank you for the tips!
Thank you for watching!
🔥 You saved my ton of time❤️
a good example, thanks for the class, and... yes, it is the better model for any site
I did it and it worked. thank you mate, cheers!
Glad it helped mate.
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.
Thanks man, this is a game changer
See this Header czcams.com/video/5lJsfn-QnzY/video.html
Thank you so much! It helped me a lot :)
Happy to help Vivek!
thanks for making this video
Make moreee!! 👍🏻 great video bro
See this Header czcams.com/video/5lJsfn-QnzY/video.html
Very Thank of you was making a project for my University . This helped ma alot .Thank You
See this Header czcams.com/video/5lJsfn-QnzY/video.html
Thanks it helped a lot🙏🏻
Thanks So much for the help!
Thanks for watching Karan!
Amazing. Thank you so much!
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
This is a very good tutorial thank you, however MY GOD are you fast
Sorry! I'm from the North of England, talking fast is a curse!
love you Marc
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.
all respect. thank you very much
Thanks so much for this video
I love Your Header very much and I made it 40 times
Thank You soooo Much
Great video!! just one thing, how do I have the ul in the center of navbar instead of float right?
VERY GR8 TUTORIAL
this was great ty
You rock, man!
no u
Thank you brother ♥️
Nice vid dude
Thank you so much!
Thanks Marc for this tutorial.. what do you think using flex to build header and footer?
thanks for information from Turkey :)
See this Header czcams.com/video/5lJsfn-QnzY/video.html
Thank you so much for the video, but how would you put a login form in the same header?
This is helpful
Thanks
thankyou for this video.
Thank you so much
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 :)
Awesome Video!
very helpful thank you
Thank you very helpful !!!
I'm glad you think so Chadi, thanks for your comment!
Hello, just having a problem on navigation, mine was on under the header and innerheader, and idk why.
Thank man
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?
Instead of giving same css as h1 give some other style to that logo🥴
See this Header czcams.com/video/5lJsfn-QnzY/video.html
Why not just use the element and element?
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!
@@marchinton LOL. You are also compromising on semantics by using div instead of header!
that was excellent 🙂
Great advice Marc, but I think instead of creating the classes .header and .inner_header, why didn’t you use the html tags and ?
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.
Quality Video, TY
tysm for this
Well explained! Thanks :D
Glad you liked it!
How did the red box position automaticaly itself to the center? Anyone
realmente muito bom, obrigado!
HOLY THANK YOU!!!
Attractive header s🔥🔥👍👍
thanks dude
Very helpful
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?
Nav ul li is corret form man
Thanks for your video... It's very helpful video for beginners like me...❤️❤️❤️
My pleasure 😊
Perfect
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...
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!
Thank you 🎉 I’m a beginner
Thanks for the video buddy
Anytime, mate!
Thank you!
I appreciate your comment Clayrin, thanks for watching.
best tutorial ive seen
Great to hear Zawwar, thank you!
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!
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
Max ok
This video convinced me to SUBSCRIBE to your channel. Thank you for this useful tutorial as I am a beginner. Stay happy stay safe. 😊
Thanks for the sub! Stay safe and happy yourself Abdul!
great bro really great, well explained
Thanks Anees!
@@marchinton bro can i request a tutorial?
@@AneesKhan-uz4mz Absolutely, what are you thinking?
@@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!
@@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.
that's cool 😎
Wow so easy 😍
thank you bro
You're welcome! Thanks for watching.
I have a problem, my navigation bar is vertical instead of horizontal even though my code is identical to yours. What do you think causes this problem?
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...
See this Header czcams.com/video/5lJsfn-QnzY/video.html
Hi Marc. Awesome video! I was just wondering, why not use flexbox?
Flexbox doesn't degrade well with older browsers, if you view a display: flex element on a slightly older version of IE or Safari it kinda' bugs out. Display table, coupled with vertical-align: center and display: table-cell is a very old but still understood way of centring things vertically, so it makes sense to keep using it!
Thank you for your comment Lukas, much appreciated!