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.
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❤
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.
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!
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
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!
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?
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.
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.
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!
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
Its a great piece for newbie like me.In your code, I noticed that you used Home but almost every developer start with tag like Home can u explain why did u use this?
Hello Mohammed thank you for your comment, I'm glad you found this helpful. I chose to have the tags placed that way around because there is a difference in UX depending upon which way round you do this. I opened to put the A tag on the outside because anything inside it will be clickable by the user. If I put the a tag inside the li tag, the area that the user can click is much smaller. If you download the code and switch the tags around you can see what I mean. I hope this explained!
@@fachihul that is all about the design more than the code. You need to establish a design or have someone do it for you, then break down the design in to elements and research the best way to build those elements. I have this tutorial on building a header, I also have another on building a simple CSS slideshow as well as how to build image galleries, etc. If you find a design and work out how to make it piece by piece then you should be good!
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 :)
How about instead of using a div tag with a class to create the header, using the header tag? Is there a reason as to why you may or may not use it, pros and cons? Thanks in advance.
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...
hi Marc although i try the same code but when i make .navigation a li{ display: table-cell; vertical-align: middle; height: 100%; color: white; font-family: serif; font-size: 16px; } it doesn't work and the list stay on the upper right where could be the issue ? thank u
Great Video Marc, only problem I've had is when I resize the screen for some reason half the header will turn the same color as the background ? Has any one else had this issue ?
you can also put myside in a div and the a links in one div" define it and than put them together in a div flexbox and say space between right? Im sorry im a beginner why the a links get vertically inside .. is it because of the float : left; and display :table ?
Idk why but when I did display: table for the navbar a and then display: table-cell for the navbar a li, the li elements stayed at the top. Idk if maybe CSS has changed in some way since 2018 making this redundant. I then tried grid but when I set position to absolute, the elements disappeared altogether. I'm new, so I am probably making a stupid mistake somewhere.
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?
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?
you have done this best organised and concised. Can i ask i have been having problem with headers and foots and not being able to change the width or the height sometimes. Would you know what the could be? I will subscribe now and tell my friend about you.
Praticamente estas usando un diseño rapido como lo hace boostrap o tailwind, css disiendole a la class donde aplicar los cambios, es por eso que los class se usan mas en css y los id en js
Thank you very much i gained a lot of information of how do i make my header the best way possible and more understandable, im just wondering why didn't you make about the best way to build a body yet? is it the same as making the header? just more elements?
Hey Mark. I didn't make a "best way to build a body" because there are SO many different possibilities about what someone would want to put in a body. Whereas, headers on websites typically all serve the same purpose, company logo and navigation. Do you think a video could be made on the best way to make a body? Do you have any thoughts or advice on this? Nice name by the way.
@@marchinton Thanks, i'm not sure about any thoughts and advice about this though because i'm just learning html and css hehe, but maybe you can show us "your" own way which is for you the 'best', since in this video you showed us how you make your own header which you define it as the 'best' and it actually worked on us viewers or maybe since you said there are so many different possibilities in making a body you should focus on what people struggle, maybe? , but i don't know man it's your video it's your decision, nice video though it made me start making my project and stopped my procrastination because i really don't have any idea how do i start my project even if i watch many many videos and this one is actually one of those videos that people say that it is 'very good', 'the best tutorial', 'thank you so much', that is because for us it was actually very effective.
I am having a slight issue with alignment for the navigation menu which is causing it to align slightly lower than the box that holds the logo I have attempted to fix it for many hours does anyone know how I could fix this (edit: also when I changed the float to center or just didn’t have it at all the box would be centered in the main box)
Thank you! it's very helpful, but i have a problem with the navigation menu. I followed your steps but my navigation menu stay on the left instead on the right. Could you please explain me why ?
Did you make sure to have the logo_container float: left; and the navigation float: right? Also, make sure the widths aren't greater than the width of their container, this would cause unwanted stacking.
With these codes, I still don't get the *li* elements centred or in the middle. .navigation a li { display: table-cell; vertical-align: middle; height: 100%; color: white; font-family: 'poppins' , sans-serif; font-size: 16px; }
Can I get the source code, it is not working properly in and you have changed some values in the last... I can't see them in 480p That's I want the source code
You made this very understandable but I have a question regarding the responsiveness. Why do you use px instead of em? Wouldn't this be much better? And why do you use float? I thought it's kinda not common these days. Thanks in advance, I am learning html/css now
You can use px or em, both have their benefits and drawbacks. I prefer to scale the header using a media query at around 600px, I feel like it gives me more control. Also, float is very common! A great way to align and position elements in a responsive way, it's very very well supported too as far as modern and older browsers are concerned. Thank you for your comment! I appreciate your thoughts and good luck with the learning process; it's arguably the best part ☺
I tried to follow you in each step, but at the end the result is an header not responsible. The menu is hidden when I reduce the window. I don't understand the reason why :(
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
@@psychederik yoo fellow comrade from last year
@@psychederik Let's Give a Quick Shout Out to Christina Applegate
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
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.
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!
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!
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
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!
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!
i love how quick it was! No time was wasted! Thanks :))
Very well made tutorial, easy to understand, and it helped out a ton!
Thanks Marc! 👏
Cool watching you work man. Showed competence and has given me something to aim towards
You're a gentleman and a scholar. Thank you!
I see you're also a man of culture..I appreciate it!
This was genuinely very helpful, appreciate it!
Everything I was looking for the whole week. Thanks a lot man!
Happy to help Bruno!
I think we are profile pic neighbours
gday
Helpful for me regarding style sheets. I am really a coder at heart and so help like this with design much appreciated!
Ok... It's so smart way to put list style and text decoration none in universal locator✔️✨👍👍👍..
Impressed!
loved this video, you make it look so easy
See this Header th-cam.com/video/5lJsfn-QnzY/w-d-xo.html
Much obliged, my friend! Simple and easy to follow.
Thank u sir ❣️ can u make a video on how to create a responsive website with HTML and CSS....
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.
I love Your Header very much and I made it 40 times
a good example, thanks for the class, and... yes, it is the better model for any site
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
Wonderful video. I'm so glad I stumbled here!
Thank you so much! You explained better than anyone
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.
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.
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.
Html and css aren't only used to create websites, I think it's still a very good skill to have
What I mean is, you can use them to create graphics for a desktop app with electron for example
@@naixnas7555 i did not know that. Thanks!
This thread is so true! Such a great skill to have.
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!
Very Thank of you was making a project for my University . This helped ma alot .Thank You
See this Header th-cam.com/video/5lJsfn-QnzY/w-d-xo.html
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
Its a great piece for newbie like me.In your code, I noticed that you used Home but almost every developer start with tag like Home can u explain why did u use this?
Hello Mohammed thank you for your comment, I'm glad you found this helpful.
I chose to have the tags placed that way around because there is a difference in UX depending upon which way round you do this. I opened to put the A tag on the outside because anything inside it will be clickable by the user. If I put the a tag inside the li tag, the area that the user can click is much smaller. If you download the code and switch the tags around you can see what I mean.
I hope this explained!
@@marchinton thanks Marc.I need a step by step complete tutorial for making a web template which can be submitted to themeforest.com.
@@fachihul that is all about the design more than the code. You need to establish a design or have someone do it for you, then break down the design in to elements and research the best way to build those elements. I have this tutorial on building a header, I also have another on building a simple CSS slideshow as well as how to build image galleries, etc.
If you find a design and work out how to make it piece by piece then you should be good!
@@marchinton Thanks for your easy process of teaching.PLS do more video on responsive web design.
Very good presentation. Just the right pace. And good step-by-step coding.
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.
Thanks Marc for this tutorial.. what do you think using flex to build header and footer?
Hello, just having a problem on navigation, mine was on under the header and innerheader, and idk why.
That was awesome! Thank you for the help
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 :)
Thanks for this video 😄.It is very much easy to understand
Wow thanks that really helped. Just got my motivation up again :)
amazing! thank you so much, your process made it really easy to grasp!
Make moreee!! 👍🏻 great video bro
See this Header th-cam.com/video/5lJsfn-QnzY/w-d-xo.html
It was really helpful mate, thank you.
Thanks for your comment Rawa!
How about instead of using a div tag with a class to create the header, using the header tag? Is there a reason as to why you may or may not use it, pros and cons?
Thanks in advance.
I actually think the same
i was wondering as well
on 5:12, I tried to copy what you did, but whatever I did, the h1 won't change
Attractive header s🔥🔥👍👍
I did it and it worked. thank you mate, cheers!
Glad it helped mate.
Great video!! just one thing, how do I have the ul in the center of navbar instead of float right?
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 th-cam.com/video/5lJsfn-QnzY/w-d-xo.html
This is great man, that mic though 💀
this is way easier to memorize and remember than other ways 👌
Can we get an F in the chat for the mic?
hi Marc although i try the same code but when i make
.navigation a li{
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: serif;
font-size: 16px;
}
it doesn't work and the list stay on the upper right
where could be the issue ? thank u
i changed height: 100% to 80px and it's worked
how do i make this into a funktional navigation?
I don't know if you still reply to the comments on this old video, but would using the header html tag be better for seo purposes?
🔥 You saved my ton of time❤️
Great video! Can't wait to see more of your work!
Thank you Levi! Should be uploading more soon.
Great Video Marc, only problem I've had is when I resize the screen for some reason half the header will turn the same color as the background ? Has any one else had this issue ?
Why classify a div as a header instead of just using the html5 semantic element? Would benefit the user in terms of accessibility, no?
love you Marc
Thank you brother ♥️
Thanks for your video... It's very helpful video for beginners like me...❤️❤️❤️
My pleasure 😊
you can also put myside in a div and the a links in one div" define it and than put them together in a div flexbox and say space between right? Im sorry im a beginner why the a links get vertically inside .. is it because of the float : left; and display :table ?
How did the red box position automaticaly itself to the center? Anyone
thanks for making this video
Thank you very much
I really learned something from you
Idk why but when I did display: table for the navbar a and then display: table-cell for the navbar a li, the li elements stayed at the top. Idk if maybe CSS has changed in some way since 2018 making this redundant. I then tried grid but when I set position to absolute, the elements disappeared altogether. I'm new, so I am probably making a stupid mistake somewhere.
I have the same problem. Did you figure it out?
Thank you so much!
It really helpful
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?
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 th-cam.com/video/5lJsfn-QnzY/w-d-xo.html
you have done this best organised and concised. Can i ask i have been having problem with headers and foots and not being able to change the width or the height sometimes. Would you know what the could be? I will subscribe now and tell my friend about you.
2:33 Why do you use display:block ? Isn't the default display block for div ?
I know this video has been up for awhile but in the logo_container if i to place a img instead of a tag how would i do that?
My questions is how do we change the code into double row header/nav with search box
the Dutch accent is so awesome !
Praticamente estas usando un diseño rapido como lo hace boostrap o tailwind, css disiendole a la class donde aplicar los cambios, es por eso que los class se usan mas en css y los id en js
thanks for information from Turkey :)
See this Header th-cam.com/video/5lJsfn-QnzY/w-d-xo.html
Thank you so much for the video, but how would you put a login form in the same header?
Thank you very much i gained a lot of information of how do i make my header the best way possible and more understandable, im just wondering why didn't you make about the best way to build a body yet? is it the same as making the header? just more elements?
Hey Mark.
I didn't make a "best way to build a body" because there are SO many different possibilities about what someone would want to put in a body. Whereas, headers on websites typically all serve the same purpose, company logo and navigation.
Do you think a video could be made on the best way to make a body? Do you have any thoughts or advice on this?
Nice name by the way.
@@marchinton Thanks, i'm not sure about any thoughts and advice about this though because i'm just learning html and css hehe, but maybe you can show us "your" own way which is for you the 'best', since in this video you showed us how you make your own header which you define it as the 'best' and it actually worked on us viewers or maybe since you said there are so many different possibilities in making a body you should focus on what people struggle, maybe? , but i don't know man it's your video it's your decision, nice video though it made me start making my project and stopped my procrastination because i really don't have any idea how do i start my project even if i watch many many videos and this one is actually one of those videos that people say that it is 'very good', 'the best tutorial', 'thank you so much', that is because for us it was actually very effective.
Very helpful! Thank you for the tips!
Thank you for watching!
thank you for this video, you're a great teacher and I dont think you speak fast( since I see most of youtube videos in 2x)
+1 subscriber
Thanks man, this is a game changer
See this Header th-cam.com/video/5lJsfn-QnzY/w-d-xo.html
I am having a slight issue with alignment for the navigation menu which is causing it to align slightly lower than the box that holds the logo I have attempted to fix it for many hours does anyone know how I could fix this (edit: also when I changed the float to center or just didn’t have it at all the box would be centered in the main box)
VERY GR8 TUTORIAL
Can you tell me please what are the song you used for this video ?
Thank you! it's very helpful, but i have a problem with the navigation menu. I followed your steps but my navigation menu stay on the left instead on the right. Could you please explain me why ?
Did you make sure to have the logo_container float: left; and the navigation float: right? Also, make sure the widths aren't greater than the width of their container, this would cause unwanted stacking.
i have the same problem, did you fix it?
I have followed this halfway through now and still my preview is showing a blank page... No errors no nothing..
can I ask something?
what is the difference of these and navbar???
im trying to make the ordered list appear at the top left of the total screen, but I cant.
With these codes, I still don't get the *li* elements centred or in the middle.
.navigation a li {
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: 'poppins' , sans-serif;
font-size: 16px;
}
Can I get the source code, it is not working properly in and you have changed some values in the last... I can't see them in 480p
That's I want the source code
he just deleted "background-color: red" on .inner_header
dear .. Marc Hinton , how to Build a Header add a logo in left site ? thanks
Marc Hinton are you Scandinavian at all?
Thanks so much for this video
You made this very understandable but I have a question regarding the responsiveness. Why do you use px instead of em? Wouldn't this be much better? And why do you use float? I thought it's kinda not common these days. Thanks in advance, I am learning html/css now
You can use px or em, both have their benefits and drawbacks. I prefer to scale the header using a media query at around 600px, I feel like it gives me more control.
Also, float is very common! A great way to align and position elements in a responsive way, it's very very well supported too as far as modern and older browsers are concerned.
Thank you for your comment! I appreciate your thoughts and good luck with the learning process; it's arguably the best part ☺
He started out with width:1000px and then changed it to 800px and finally to 90% and that made all the difference. He did that at the very end.
Thanks So much for the help!
Thanks for watching Karan!
Wow so easy 😍
I tried to follow you in each step, but at the end the result is an header not responsible. The menu is hidden when I reduce the window. I don't understand the reason why :(
It helped me so much. Thank you ; )
You rock, man!
no u