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!!
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
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!
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.
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.
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!
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 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.
Thank you for your sharing. But, I need to ask for one question. Where do I write for code(CSS,HTML and Java) on already built my website? So many youtube video have shown this or that and write in WordPress plugin like Code snippet or Wp code. Could you tell me which way is safe and secure write to code for already built my website? Thank for helping me out.
Hi Dani can't thank you enough for this clear and well explained tutorials! They have been a life line for me as when I started web design it was really archaic and everything has changed so much. I just wanted to mention that when resizing your tutorial the content of home, gallery, about us, etc, nav bar breaks down into a column. Doesn't stay in place as it should. I've re-done your tutorial a number of times but can't figure out why? Should .header-main-nav ul li { width: fit-content; height: 100%; display: inline; float: left; be flex? I did try but no luck!
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.
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?
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 😂
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?
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
Mine behaves differently from yours. It doesn't position things the same way. Why is it so difficult to position items in the header? That's all I've been trying to do for the last 30 hours. I had three objects that I wanted space between. I wanted one on the left margin, a logo perfectly centered, and a search bar on the right margin. But it's doing all kinds of wonky things. When I justified it, the left object didn't go to the left edge, it went halfway between that and the center. On another page, I have just the image logo. I tried to center that and gave it the same area as the first page, and it won't match the size correctly or perfectly center. I looked it up, and I tried that method, but it aligned left instead. It's like either Google broke something in Chrome, or something in CSS is broken now. I have a reset.css and used the code from that site, but it's not fully resetting. I've cleared my cache and hard refreshed too. Nothing is making it behave normally. Do you have any tips for easy and quick alignment? I just want everything vertically centered, one object on the left margin, one image centered, and a search bar on the right margin.
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
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.
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 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?
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. 🙂
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.
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. :)
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
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”. 🙂
I had a great time following these courses so far, I can't wait to find out more! Thank you for teaching us 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!!
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
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!
I believe having my own website will be life changing and you have helped me in a big way achieve that goal. thank you, liked and subbed
i love this i am 9 years old and still can learn coding from him
lets go my boy!
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 ☺
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.
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.
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!
Thanks for sharing free knowledge 🙂
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 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.
Really glad I followed the whole process. Learnt alot especially about flexbox.
The best video that I ever found about coding! Thank you very much 🙏😍😍😍
Definitely I’m going to build my own website with this tutorial
Omg, you were born to teach. You do it perfectly.
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.
Thank so much! ❤
Your channel deserves a lot more love
you're the goat for sharing all this
Thank you for the video. I follow you a few years ,but I stop learning . Well I am now busy to start over again. Your videos are very helpfull.
First here, from Ghana
Just in time. I was trying to do almost exactly what this does and your method works. Mine got close but it was clumsy.
thank you sir
Great👍
Thank you for your sharing. But, I need to ask for one question. Where do I write for code(CSS,HTML and Java) on already built my website? So many youtube video have shown this or that and write in WordPress plugin like Code snippet or Wp code. Could you tell me which way is safe and secure write to code for already built my website? Thank for helping me out.
Hi Dani can't thank you enough for this clear and well explained tutorials! They have been a life line for me as when I started web design it was really archaic and everything has changed so much. I just wanted to mention that when resizing your tutorial the content of home, gallery, about us, etc, nav bar breaks down into a column. Doesn't stay in place as it should. I've re-done your tutorial a number of times but can't figure out why? Should .header-main-nav ul li {
width: fit-content;
height: 100%;
display: inline;
float: left;
be flex? I did try but no luck!
Sir God bless you so much for impacting knowledge in me
extremely useful tutorials! thank you for your work
Your cousrses are awesome!
Great video many thanks ..
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.
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?
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!
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?
oh so u live in denmark? im from dk to :)
I watched a lot of ur vids and they have helped me a lot building my website :D
Hi, I can’t seem to find where you talk about making the header sticky
This is so helpful for me , thank
you.
when i did the justify-content it doesn't space out all the way, i wonder what i did wrong?
Can you pls do a video about how to connect your login page to the shopping cart with order history?
Hello Daniel.I have a problem,after i do it as you,but i don t see the maine header:(..
This class is superb!
so i have a problem: henever i tr to put the image, the text: HOME, etc. doesent line eith everything. do u kno hy?
enjoyin your cours keep it up
😊
What about changing the hover image for the logo?
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
Hey Dani, when I try to change the cursor to a pointer it doesn’t change. Any ideas why?
Hey Dani sir! could you make an updated JS tutorial also🙏
Well done mn
Mine behaves differently from yours. It doesn't position things the same way. Why is it so difficult to position items in the header? That's all I've been trying to do for the last 30 hours. I had three objects that I wanted space between. I wanted one on the left margin, a logo perfectly centered, and a search bar on the right margin. But it's doing all kinds of wonky things. When I justified it, the left object didn't go to the left edge, it went halfway between that and the center. On another page, I have just the image logo. I tried to center that and gave it the same area as the first page, and it won't match the size correctly or perfectly center. I looked it up, and I tried that method, but it aligned left instead. It's like either Google broke something in Chrome, or something in CSS is broken now. I have a reset.css and used the code from that site, but it's not fully resetting. I've cleared my cache and hard refreshed too. Nothing is making it behave normally. Do you have any tips for easy and quick alignment? I just want everything vertically centered, one object on the left margin, one image centered, and a search bar on the right margin.
THANK YOUU SOO MUCH
the colors except for white aren't showing up on my end. :(
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 :)
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.
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🤗.
Hi guys,
Can someone tell me why i cannot block display of anchor even thought i wrote display and height correct?
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?
Sorry a newbie question but how do I watch the HTML & CSS RUclipss 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!😂😂😂
*came looking for a quick tutorial... stayed for the course! I'm 1/1.6k👌💕
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
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. 🙂
Please can you add a slide bar to this navbar
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
html lang ="da" ikke dk ( og hvis det er iso er det da-DK tror jeg nok ).
Super gode videoer :)
can u please do a new js tutorial🙏🙏🙏🙏🥺🥺
yes please 🙏🙏
Waiting for next video 🤧
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.
? what happened to the responsive aspect. Otherwise this menu is not of any use at all. Unless everyone in the world give up their phones and tablets
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.
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
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
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”. 🙂