12 | CREATE A WEBSITE MENU BAR IN HTML | 2023 | Learn HTML and CSS Full Course for Beginners
ฝัง
- เผยแพร่เมื่อ 31 ธ.ค. 2022
- In this video I will teach you how to create a website menu bar using HTML and CSS. 🙂 The website header will contain a logo, a menu, and some social links.
Images: drive.google.com/drive/folder...
Full playlist: • 1 | INTRODUCTION TO HT...
➤ GET ACCESS TO MY LESSON MATERIAL HERE!
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon and TH-cam Memberships to share improved and updated lesson material, and for a small fee you can access all the material either from my memberships or Patreon, depending on your preference. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Memberships: / @dani_krossing
Patreon: / mmtuts
![[TH] VCT Masters Shanghai Playoffs DAY 3 // FNC vs FUT | EDG vs PRX](http://i.ytimg.com/vi/pw2T5v0ogDI/mqdefault.jpg)
i hope ur still into making videos like this. cuz im learning with your all courses! thank you for having courses/videos content like this!
Thank you so much for this - been trying to align my header items (logo, nav, sm) for hours using display:block/inline, completely forgot about flex and how to use it. Keep doing what you're doing bro, we all appreciate it, massively!!
Wow, what a bounty of knowledge, Dani. This and your Flexbox video are both a little overwhelming (which is entirely understandable) - but you make this so clear that I will enjoy watching these again to allow for better "absorption" . . . When other teachers have gotten this "thick" I usually just zone out and have difficulty paying attention. You make this so approachable that I like looking forward to re-watching these. Thank you for bringing such excellent instruction to CSS! Great work!
I had a great time following these courses so far, I can't wait to find out more! Thank you for teaching us this.
i love this i am 9 years old and still can learn coding from him
And I'm loving it too. I like all the mistakes Dani makes because these are the same mistakes i would make. I then like how he fixes them. I very much like how Dani is helping us build a website together.
I like how you explaining for mistake you made for row/column gap... it was so cute.. You are just a man.. happens ... Thank you for your service man hahah Your videos will help a lot of people ! Thank you
Really glad I followed the whole process. Learnt alot especially about flexbox.
extremely useful tutorials! thank you for your work
Just in time. I was trying to do almost exactly what this does and your method works. Mine got close but it was clumsy.
Thanks for sharing free knowledge 🙂
The best video that I ever found about coding! Thank you very much 🙏😍😍😍
Excellent job, Dani.
One thing I notice is that, it does not matter how much we claim to know, learning will always remain in demand.
good work..i have learned alot
Thank you for leading me here, Dani .. this video is great! I actually came to find out how to attach my Navbar to other pages so that I don't have to manually edit my navmenu on every page.
I acutally learned a few more tricks by watching this. 👌🏽 But couldn't find a way to link my Nav bar to the other pages..
This is so helpful for me , thank
you.
Definitely I’m going to build my own website with this tutorial
this is so far the best way to teach someone . your teaching skills are from another level. Thank you very much for sharing your knowledge with us for free.
Daniel... I usded to work with php and a mysql-DB like 15 years ago. After having an intense view on your videos I realized: Kumi knows NOTHING! I watched alot of tutorial videos, but yours are FAR THE BEST! You're making me understand stuff in just a few minutes, that on others channels will take me hours! Go on with this. I really love your vids. You are taking me onto another level!
I'm glad you enjoy my videos ☺
Your channel deserves a lot more love
Great video many thanks ..
Sir God bless you so much for impacting knowledge in me
you're the goat for sharing all this
Quick tip that will make your workflow faster. Download Live Server extension using the extension tab. It automatically refresh your browser for you, anytime you make changes and save the changes.
This class is superb!
Thank so much! ❤
Your cousrses are awesome!
enjoyin your cours keep it up
thank you sir
Hey thx for your content i had a question and cant find an answer online how can i for example have 3 of the items at flexstart and have the contact us at flexend? Is it possible without using margin?
THANK YOUU SOO MUCH
Well done mn
First here, from Ghana
Hey Dani, when I try to change the cursor to a pointer it doesn’t change. Any ideas why?
Hi, I can’t seem to find where you talk about making the header sticky
Can you pls do a video about how to connect your login page to the shopping cart with order history?
Just learning here,
Now how does this get connected to the pages, like Home, Products, About, ....
Do you have to recreate it for every page or is there an "include" to just add to a new page?
When I created my video player UI I used colored boxes to layout everything, it's such a great way to visualize layouts. The only ting is... you run out of highly distinguishable colors very easily 😂
You can use borders to add distinctions :)
I really appreciated this strategy as well. I appreciate your sharing!
Hey Dani! when I resize my web browser, the contents in my menu moves below each other. I have the styling exactly how you have it. any thoughts? I am using goggle chrome
If it's when you make the screen smaller things don't fit as they should. That's where using media queries comes in :)
so i have a problem: henever i tr to put the image, the text: HOME, etc. doesent line eith everything. do u kno hy?
When I enter the text "HOME" inside my tag, it shows up in the browser with the background color. How do I get rid of that background color and just show up the text like yours? I've added my reset CSS file, I tried using background-color as none as well for ".header-main-nav li" and didn't work. Then, I set background-color as transaparent !important as well and didn't work.
Hello Daniel.I have a problem,after i do it as you,but i don t see the maine header:(..
Hey :) really loving your content, so much more useful than the course I'm doing. When it came to putting a gap between the media icons, it comes up with row-gap, but col-gap didn't work. Just using gap seemed to do it. Is this an issue or is it ok to use going forward? Awesome job :D
it's *column* and not *col* -gap. That threw me off a few times from the shorthand method, that the programming for the feature was spelled out fully. LOL
What about changing the hover image for the logo?
Hello Dani! Firstly, I'm newbie and i rly thank you for your conrtent. It is rly helpful for me. But i wanna ask something. At 36:36 , when i do display:block , all my menu items are becoming vertical. Like all stuff "ABOUT", "CONTENT" is on top of another. But when i do display: inline-block; then it becomes horizontal again. why is it different than yours?
.index-header {
background-color: bisque;
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
}
.index-header-search-bar {
margin-left: 40px;
background-color: aqua;
width: fit-content;
height: 100%;
display: flex;
align-items: center;
}
.index-header-search-bar a {
margin-right: 5px;
}
.index-header-menu {
margin-right: 20px;
margin-left: 20px;
background-color: aquamarine;
width: fit-content;
height: 100%;
}
.index-header-menu ul{
list-style: none;
margin-right: 10px;
}
.index-header-menu ul li {
display: inline;
margin-right: 20px;
}
.index-header-menu ul li a {
line-height: 60px;
display: inline-block;
height: 100%;
}
.index-header-menu ul li a:hover {
color: rgb(143, 37, 37);
}
I have a little bit different code than yours but it is almost same. (index-header-menu is header-main-nav for you.)
when i changed my code from display:inline-block; to display:block; the mistake is happening that i have mentioned.
Hi there! I am curious to know if it would be better to use display: none to hide the fb and insta icons when pre loading it in the body rather than the method shown in the video.
That method doesn't work anymore 🙂 I believe I explained that in my earlier "image video", so if you want more info it is in there 🙂
@@Dani_Krossing Hi Dani ! Thanks for letting me know and responding, I wasn't aware of that.
Hi guys,
Can someone tell me why i cannot block display of anchor even thought i wrote display and height correct?
Hey Dani sir! could you make an updated JS tutorial also🙏
the colors except for white aren't showing up on my end. :(
html lang ="da" ikke dk ( og hvis det er iso er det da-DK tror jeg nok ).
Super gode videoer :)
Sorry a newbie question but how do I watch the HTML & CSS TH-cams in sequence?
On my channel page there is a playlist 🙂
@@Dani_Krossing Thank you, I was looking for that but couldn't find it for some reason. Now I went straight to it! And that was the easy part!😂😂😂
Waiting for next video 🤧
are you going to adapt your website to mobile version?
Yes as soon as the front page is finished, then I will create a video where we make the entire page responsive. 🙂
Do we STILL need to use LISTS in navs?
You CAN create menus without using , however it is strongly recommended to use lists.
Please can you add a slide bar to this navbar
i don't know if you'll gonna see this but when I hover my social media picture it enlarges and when I tried adjusting the size of the hover picture the other navigations move sideways and the picture will move away from my cursor like it doesn't want it to be clicked.😅
Sounds like your CSS either differs a bit from mine in the video, or some of your CSS is not getting updated in the browsers cache. 🙂
Try going to your browsers history, and when you clear the history, make sure to only toggle on "images and files", and make sure it's set to "all time".
If that 👆 doesn't solve it, then it is a typo in your CSS causing it, or because our CSS aren't the same. 🙂
And yes... I do see ALL comments on my channel. 😉
@@Dani_Krossing whoa thanks for the quick reply.I'll look into it immediately.Also I wonder if you provide a simulation class or mentorship for what's it's like working as a junior web developer.Just to prepare and evaluate myself if I can work in that kind of environment🤗.
this code wont work for edge the fb icon is not viseble ant the insta icon goos invisble when hovert on for the rest does this code work if i use firefox the insta icon turn white the rest of browers it works just fine but can u give us an selution so it works all browers
If you followed the video exactly, then it works in all browsers 🙂 If not then you most likely made a typo somewhere.
@@Dani_Krossing not a typo its adblocker plus that blocks some code
Why not make a list for the icons? Wouldn't it be easier to just set the parameters for both of them at the same time?
what to do to type a a name in the navbar instead of a logo ??????
H1 tag you can also put it in a div with the same coloring of the nav bar
can u please do a new js tutorial🙏🙏🙏🙏🥺🥺
yes please 🙏🙏
the anchor doesnt need a closing tag.
If you don’t close the anchor tag, then everything after would be considered a link. So yes, the anchor tag does need to be closed. 🙂 I’d love to know why you don’t believe it needs to be closed?
@@Dani_Krossing it was mor a question lol, thanks for the explanation.
First 🤣
Fir... arh gosh darn it!
HAH you are second!
@@Dani_Krossing noooooo... so close 😱
The whole video is blurry, is that not the case for anyone else?
It is completely crisp and sharp on my end. I think you need to try and reload the video, or increase the quality of the video. In a lot of cases your internet speed will auto adjust it too, so check to see if that is the issue. 🙂
@@Dani_Krossing increase the quality of the video was a gold mine response thank you!
Man made Columbian flag :)
Your vid is a little pointless since you arent showing effect in browser
I'm not sure what you mean? 🙂 Not only did I show the navigation visually in the browser every time we did one step further, but I also colored the segments for you to better understand how everything worked.
If you by "effect" mean that we didn't "click one of the links to go to another page", then I think we can both agree that your comment isn't really about "my video being pointless"... But more about you perhaps being frustrated, and now taking your frustrations out on me.
My class (.header-main-nav ul li a) css styling ain't showing on the browser unless i move them to class(.header-main-nav ul li) what might be the problem???@dani cross
My code is similar so am wondering what i might have done differently
Thank you so much Danni. I've learned a lot from you. :)
Can you explained me about this?
body ::after {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;
content: url(../img/fb-color.png) url(../img/gmail-color.png);
}
what is the difference if I don't put this? hehe. Thank you again. :)
It preloads the images 🙂 so if you dont add this, the images will “blink” the first time you hover your cursor on them.
Thank you so much Danni :)@@Dani_Krossing
First here, from Ghana
Hey Dani, when I try to change the cursor to a pointer it doesn’t change. Any ideas why?
Try clearing the “cached images and files” from your browser, and then refresh your page. This is often the culprit whenever CSS changes doesn’t wanna work. 🙂
You clear the images and files in the same place where you clear your browser history (Ctrl + H). Just make sure you only tick on the images and files, so you don’t delete your browser history and passwords as well, and make sure you select “all time”. 🙂