The fact that he codes with one leg up in the chair is amazing

@pythoncenter6148

2 жыл бұрын

I do that as well

@kantuo

2 жыл бұрын

I do that as well

@ptoato1205

2 жыл бұрын

I do that as well

@GamingTSH

2 жыл бұрын

❤️👉 kzread.info/dash/bejne/nqF92buFdrzAabg.html 👈❤️.

@shonshaji4416

2 жыл бұрын

Thats what i was thinking 💀😂😂😂

I love the way you just winged this and fixed stuff on the fly. That teaches a lot. I followed along and broke so much cos I wasn't paying attention then had to fix that myself. Ultimately I was laughing so loud trying to do something so simple ... learnt a lot. And I think that is when stuff sticks. Brilliant.

One of my favorite things about Ed is his relevance ...such as "what did I miss". I can not tell you how many times I have said this to myself as I was programming lol

I don't know how one hour passed so easily. You are fun to watch and great to learn. Thanks. After watching this video now I am feeling confident to create a navbar on my own.

1. "Great personality 2. You're a great teacher 3. You got a new sub!" 4. best dynamic!

@henningsieh

4 жыл бұрын

same here... since a week or so 😃 very cool dude with a massive ... ehm, coding speed, she said!! 🤓

@alwaysawakening4603

4 жыл бұрын

@@henningsieh that's what she said ;)

@user-fq9ct5iu3c

4 жыл бұрын

copied

@valencefootball9740

3 жыл бұрын

​@@user-fq9ct5iu3c ​ ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻

@araskoca8172

2 жыл бұрын

Same

1. Love your personality 2. You're a great teacher 3. You got a new sub!

You know why i am Watching you, what makes you stand out of all is: After Watching your videos I learn something, and be actually able to do it on my own.

Dude, this is excellent! Especially since I'm just getting started in the world of the Front End. You have an extraordinary way of teaching, with a very clear didactics. Thank you!

I love the fact you take us through your design thought process. debugging and all. interesting stuff

@ayanarko8890

3 жыл бұрын

kzread.info/dash/bejne/e5WplpmYhcjMmNI.html -- image sliding animation using html & css

@GamingTSH

2 жыл бұрын

❤️👉 kzread.info/dash/bejne/nqF92buFdrzAabg.html 👈❤️.

Don't apologise for your videos being long. You are amazing! 🙏🏻

Love listening to you talk out loud so we can hear your thought process! Turned out really nice! Thank you

This is the best responsive navbar from scratch tutorial so far! I've always been only knowing the bootstrap style for responsive navbar. However, I fell in love with this one. Thank you very much .

@GamingTSH

2 жыл бұрын

❤️👉 kzread.info/dash/bejne/nqF92buFdrzAabg.html 👈❤️.

Thx for this tutorial, had forgotten all about CSS animations, thx you for restarting my interest for CSS :)

@ayanarko8890

3 жыл бұрын

kzread.info/dash/bejne/e5WplpmYhcjMmNI.html -- image sliding animation using html & css

This helped me Alot. I was stressing out on an error. just a line of code from this video fixed that error. Im so thankful to you

I struggle with navigation bars a lot Ed. Thank you for posting this (even though it was awhile back) Just found your channel today and I am looking foward to watching all of it!

@GamingTSH

2 жыл бұрын

❤️👉 kzread.info/dash/bejne/nqF92buFdrzAabg.html 👈❤️.

I think I learned more in this 35-minute video than I did from hours and hours of tutorials online.

When you made this type of projects then please save them in one playlist. You are great bro

@ayanarko8890

3 жыл бұрын

kzread.info/dash/bejne/e5WplpmYhcjMmNI.html -- image sliding animation using html & css

@ayanarko8890

3 жыл бұрын

kzread.info/dash/bejne/e5WplpmYhcjMmNI.html -- image sliding animation using html & css

That was dope it was pretty good because you explained your thinking behind a lot of what you were coding thank you!

@ayanarko8890

3 жыл бұрын

kzread.info/dash/bejne/e5WplpmYhcjMmNI.html -- image sliding animation using html & css

My dear. I'm very glad you're accurately explaining it. I do not hear and yet I understand all of you. Thank you very much. Hope you can continue learning.

Hi Dev Ed. Great tutorial! As a little tip. If you set {min-width: 30%}; and add a margin to each list item of 10px, that sorts out the issue with the spacing of nav links from laptop to tablet viewport width which you experienced at minute 14:00. Thanks again!

THANK YOU for making a comprehensive, free tutorial for this :) This was actually better explanation than some of the udemy tutorials I've seen

@ayanarko8890

3 жыл бұрын

kzread.info/dash/bejne/e5WplpmYhcjMmNI.html -- image sliding animation using html & css

@GamingTSH

2 жыл бұрын

❤️👉 kzread.info/dash/bejne/nqF92buFdrzAabg.html 👈❤️.

Feel free to leave any questions and suggestions :)

@bizzle98

5 жыл бұрын

can u maybe zoom in on the code next time?

@developedbyed

5 жыл бұрын

for sure!

@VNighte

5 жыл бұрын

Dev Ed Can you please share your code to play with? Big thanks. :)

@nesnes6689

5 жыл бұрын

can you show me how to create dinamic page website thanks dev. :D

@mkreativ7541

5 жыл бұрын

Hi, the (transition: transform 0.5s ease-in;) will cause the nav-links to ease-out if you play with the width of the browser (media)

Man have you try laughing and typing at the same time, man I'm having so much fun coding. Thank you!!

Thanks a lot for this video man! Those are the videos that truly teach you HTML-CSS-JS in action!

Its really fun to learn with you , (your reactions)its how I also used to do while coding !!! Keep it up, we need the teachers like you. Thankyou so much: and ya! I am your new SUBSCRIBER.

I'm glad to know that I'm not the only one that keeps forgetting how to remove those odious bullet points

@GamingTSH

2 жыл бұрын

❤️👉 kzread.info/dash/bejne/nqF92buFdrzAabg.html 👈❤️.

Amazing!! That tip you shared about how to set up the divs in the nav is PRICELESS!!!

Really helped me with my school project! I have to make my own full website in about 2 weeks. So glad this tutorial is so good!

@ayanarko8890

3 жыл бұрын

kzread.info/dash/bejne/e5WplpmYhcjMmNI.html -- image sliding animation using html & css kzread.info/dash/bejne/fKiHmLCYqpWZY6Q.html -- sliding effect kzread.info/dash/bejne/dXp1z8qydaWXeto.html -- image animation

"I actually thought that was too big, that's what she says". You're ridiculously funny😄, I love your content!

the fact that he always have a "that's what she said" line, makes it a hundred times better

@ayanarko8890

3 жыл бұрын

kzread.info/dash/bejne/e5WplpmYhcjMmNI.html -- image sliding animation using html & css

@codigodesenior3995

3 жыл бұрын

@@ayanarko8890 wtf random video

Thanks sooo much Dev Ed, a brilliant tutorial, you show the way you work out these problems which is so useful and makes it soo much more fun. :) lovely person on the internet!

dude you've got such a vibe, which i loved it, thank you so much!!

Amazing video! thank you for the help, keep up the good work :)

Thank you so much for this tutorial! I like the fact that it looks so clean and is scalable with the number of links. So easy to integrate in a website! I even included dropdown submenus with ease. Also don't worry about the video length, we can watch it in x1.5 speed ;)

@GamingTSH

2 жыл бұрын

❤️👉 kzread.info/dash/bejne/nqF92buFdrzAabg.html 👈❤️.

I love your teaching coding and debugging style. You are one of the good teachers I have ever seen as a youtuber Thanks for your kind and helpful video. I'll keep watching your every videos.

Thanks for the tutorial. I actually really appreciated seeing how you troubleshoot when things don't work as expected. I learned a lot about how I can do that for my own projects through this! :) Great teacher, please keep making videos like these!!!!

@developedbyed

3 жыл бұрын

Thank you so much!

this guy has a great vibe (lowkey crushing on him ;p) btw thnks for such a great video its just what i needed

Yet another AMAZING video!. Thank you brotha for putting out awesome content that's relevant to current websites with nowadays features your one of the only KZreadr devs out here creating content that's a much need skill to know on the job and in general for software engineers!.

This man is so charismatic! You earned a sub on my first view!

Great Work as always Edd, I am backend developer currently tutorial my way to front-end dev. for those who are actually trying in on their mobile phone and have extra space on the right side just add minimum-scale=1 on your meta after initial-scale=1, it will remove the visible hidden nav links on the right. cheers

@SeeRjED

4 жыл бұрын

You sir are a legend! Thanks :)

@dinucarcusov7289

4 жыл бұрын

Man, thanks.

@lato_o

3 жыл бұрын

@fahanyc3638

3 жыл бұрын

Achmad, thanks a lot! I knew I would find the answer here. You are the best!

@angelordonez2959

3 жыл бұрын

I LOVE YOU!

HHHHHHHHHHHH im actually learning and laughing in the same time , thank UUUU dude

@ghostjacob8848

3 жыл бұрын

@Ashfaq Ashraf you dont have any videos

I learned A LOT! Wow what a great tutorial. I subscribed. Thank you. Looking forward to watching more from you!

Loving this tutorial ❤️ awesome explanation and debugging

please make big tutorial like creating form login, register, and email activating membership. big thank sir.

Thanks for this! Helped me a lot. Now I just have to make it work in React. XD

Finally someone with the same thinking process I have. Thanks ED! You awesome bro!

Really loved the tutorial. I used it to create a navbar on my personal website. Everyone thinks the mobile navigation is amazing.

This will serve me so good. Thank you. - I noticed a typo in paddding, but still everything worked fine haha - Also, when you shrink the window to make it responsive, I can see the bar closing in automatically the first time I do this. I haven't been able to figure out how to fix it yet

@theXtroyer1221

4 жыл бұрын

me too i have the 2nd problem you said

@var1541

4 жыл бұрын

I have the same problem, I can see the menu closing.

@var1541

4 жыл бұрын

​@@theXtroyer1221 I've got the fix for it: under the media queries add display: none; to .nav-links and then add display: flex; to .nav-active;

@theXtroyer1221

4 жыл бұрын

@@var1541 oh ok gonna try it

@var1541

4 жыл бұрын

@@theXtroyer1221 nvm it removes the slide transition completely, a temporary fix is to ignore above things and just remove the transition property of nav-links, this keeps the opening transition but it closes abruptly.

for anyone stuck at 27:10 link.style.animation = `navLinkFade 0.5s ease forwards ${index /7}s`; console.log(index / 5 + 0.2); don't use a comma use the sign close to the "1" on your keyboard

@manojadhikari9911

4 жыл бұрын

thanks.....stucked at it for too long..xd

@consoledoterror971

4 жыл бұрын

its called the legendary `BACKTICKS`.

@billsss7471

4 жыл бұрын

we usually call that ' tilde ' key

@pradnyabhukan5891

3 жыл бұрын

dude, thank you so much!!

@kaz_key

3 жыл бұрын

thanks! I didn't notice at all !!

This helped so much for me as I am only a beginner. I tried so many other videos and they all didn't work. Great tutorial, keep up the good work.

I watched this video 6 months ago when I started studying web development, and I couldn't understand anything past the CSS part of the video. I watched it again today and could understand everything, I'm still not a junior level though, but I'll keep pushing myself on until I get there. Thanks

Hey Dev Ed, thanks for dropping this video, it's always inspiring to watch these video's and your enthusiasm is contagious. When implementing the code you wrote for adding a togglemenu, there's a ghost menu when I reduce the size of my window to where the burger pops up. It show's the nav-links for a split second and then slides away again. How do you prevent this from occurring?

"its too big, thats what she said" - that made me laugh XD

@alicesanchez9830

4 жыл бұрын

I reversed the video to double check I wasnt tripping... that made my day! Lmao💜

@ahmedrobi6507

3 жыл бұрын

great jokes for 10 year olds

@tang3151

3 жыл бұрын

@@ahmedrobi6507 hahahaha eDgY

@chadvise3308

3 жыл бұрын

@@ahmedrobi6507 you doggggggggggggg shit

@shahriarsharar8363

3 жыл бұрын

Sir please find me the nav-link class he declared

look at him man, he is loving what he is doing

3 years later, your video helped me a loooooot. thank you so much!!!

IF ANYONE HAS THE PROBLEM THAT LINKS DON'T APPEAR WHEN THE RESPONSIVE NAVIGATION IS EXPANDED! instead of => ' Use this sign => ` in the command link.style.animation = `navLinkFade 0.5s ease forwards ${index/5+0.5}s`; This sign is present below the escape button on your keyboard.

@attractiveguy6495

4 жыл бұрын

OMG thax

@adrianvalencia3210

4 жыл бұрын

I don't normally reply here on KZread, but I watched this tutorial in its entirety and had this issue, I was not able to fix it until I changed my single quotes to the grave marks. Thank you so much for the hotfix! I appreciate it greatly.

@paulinarybak8649

4 жыл бұрын

You just saved me! Thanks

@martinperens

4 жыл бұрын

Dude you are the man :D but as im new on the javascript and just begining to learn it, can you tell me whtas the differents => " => ' => ` . why it didn't work with " and ' ?

@murtazahussain6301

4 жыл бұрын

@@martinperens I think it takes ' ' as a string and ` ` as a script

I click LIKE whenever I hear him make an inside joke in the video.😂

I Loved this stuff, Please keep on giving more stuff like this.

great video. I'm new to programming but your video is one of the best so far. in simplicity really helps.

Thanks a lot! *How to make the menu closing when i click or tap the outside of menu?*

@permanar_

4 жыл бұрын

You just need to add a new listener to *body* and do repeat the code. See the big line? Small tips: You can also make it close every time you press the 'Esc' on your keyboard! (cool isn't it?) Search for keyup and also add the listener. I hope this help you a bit and good luck for the challenge!!

Time stamps: 1:24 - HTML 2:57 - CSS 19:55 - JavaScript

Hands down the most comprehensive tutorial for a responsive nav bar. 5 stars

enjoyed this tutorial so much! great work!

Dev Ed thanks bro, the best turtorial ever👌👌!!!! but it would be far better if you share the code files with us please .

my js is the same as yours.. but it wont slide out..

Thank you! Exactly what I was looking for, and then some!

I love the excitement and confidence in your face! Thank you for this :D

@GamingTSH

2 жыл бұрын

❤️👉 kzread.info/dash/bejne/nqF92buFdrzAabg.html 👈❤️.

Many thanks for this tut. Really helpful for beginner as I am ! Just a question (as we don't have content in your example, this doesn't occur): if you're in the width mobile view case actually you make the scroll disable in order to keep nav burger menu onscreen and not going away (overflow:hidden). This makes the content unable to be scrolled as well. Do you have a solution to disable scroll ony when menu appears ? Anyway, thanks for those cool tips :) Cheers!

@ColeCraftAlpha

2 жыл бұрын

Did you ever find a soulution for this? I'm having this exact issue right now!

@Davidebrocc98

Жыл бұрын

i found the solution changing the meta data in the html file using this code

@PoivronProd

Жыл бұрын

@@Davidebrocc98 gonna try that, thanks !

Good stuff. Only had an issue when referring to the class names. 'nav-active' instead of "non-active". Thanks.

Awesome job, thanks so much. Watching you do this and doing it with you really helps me understand. Keep it up bro!

Solid start to a great page! Thanks for posting this Ed. Probably going to use this Navigation bar for some small businesses in my area.

Great video! I couldn't get "overflow-x: hidden" to work. BUT. Change "position: absolute" to "fixed" in .nav-links. Solves the problem.

@cankarkadev9281

4 жыл бұрын

Thank you for that hint! Solved it for me as well :)

@timrobinson1278

4 жыл бұрын

@@cankarkadev9281 Glad I could help :)

@dancalinfota6157

2 жыл бұрын

you are a hero. struggled for hours with that thing

Well if anyone else had the problem that when you switch from desktop size to screen size the menu would fade out like you closed it (seen: @34:40), move "transition: transform 0.5s ease-in-out;" to .navlinks-active. Great video thank you

@ColinArkell5

4 жыл бұрын

This kind of works but then the transition is taken away when you close it. Anyone have a fix for this?

@ArMoNiGS1905

3 жыл бұрын

css-tricks.com/stop-animations-during-window-resizing/

Had 5 years off developing and had forgotten everything. You Fucking saved my life dude! Thank you so much! finally a tutorial i can understand the english and he codes like i was taught.

this guy is just chilling and making the vid, but he is really good. Loved your teaching Note - You earned a subscriber

Hey! I really love this tutorial! :) It is true that it is maybe a bit too long, but you cover a lot of things that are really interesting. I quite enjoyed it. I find one thing missing now, and it is that it would be cool if the navbar (in mobile version) hides again if one of the elements inside is clicked. I am trying to sort it out myself but it is going to take me quite some time, hehe. Some help would be appreciatted. ;) Great video! Keep it up!

@pumpedsardines9190

4 жыл бұрын

If the links lead to a diffrent .html or .php file the nav bar will close automatically. You can also give the links an click event that'll do the same as clicking the "burger".

@shawnivanov9257

2 жыл бұрын

2 years later but... have you figured it out? I can't seem to get there smh, still a beginner here haha

@nikensss

2 жыл бұрын

@@shawnivanov9257 I did figure it out, and I still remember what project that was, hehe. I did this: // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!(event.target.classList.contains('burger') || event.target.parentNode.classList.contains('burger')) && nav.classList.contains('nav-active')) { burger.click(); } } burger.addEventListener('click', () => { //Toggle nav nav.classList.toggle('menu-active'); //Animate links navLinks.forEach((link, index) => { if (link.style.animation) { link.style.animation = ''; } else { link.style.animation = `navLinkFade 0.3s ease forwards ${index / 7 + 0.2}s`; } }); //Burger animation burger.classList.toggle('toggle'); }); So we add a click listener on the window, and check that the target or its parent are not the burger and that the sidebar is visible. You can see it in this github repo (which is deployed but the website doesn't seem reachable anymore...): github.com/milaluna/milabaumann Check out mainly "index.html" and "js/index.js". :( I will have to figure out why the website is not online, but you can always clone the repo and run it with a live server. If it doesn't work, I hope that at least it shows you in which direction you could go.

@shawnivanov9257

2 жыл бұрын

@@nikensss Thank you very much Ricard, you've really saved me man! :)

your videos are awesome, I have a question, why overflowX doesn't work on mobile? thank's for all your videos you rock man ....

@jashmorekar

4 жыл бұрын

try adding this meta tag

@jose86mend

2 жыл бұрын

@@jashmorekar jajajajaja amigo, varias semanas buscando esa solución. muchas gracias. Thanks a lot. Greetings from Mexico.

It was a long video but it was worth watching and too informative. Thank you for helping out to make a responsive navbar!!

Thank you so much!! This tutorial helped me a lot. Had to make a few changes cause I'm using React I guess some things didn't work cause of that, but I was able to work on a great Nav component thanks to you! :D

Very useful!!! Thanks for making this tutorial. By the way, where did the "nav-active" class came from?

@makingzebraop

3 жыл бұрын

Man I stuck there help me

@makingzebraop

3 жыл бұрын

@@alfuad112 no bro try another tutorial

@alfuad112

3 жыл бұрын

@@makingzebraop I found this bro. .nav-active class is from classList.toggle("nav-active"). you can check out this--> www.w3schools.com/jsref/prop_element_classlist.asp

so yall telling me you didn't notice the "mynigga" file under recent @1:19 lmaoooooo

@angel-tylebron6111

5 жыл бұрын

y'all*

@thatguycheddar

4 жыл бұрын

@@angel-tylebron6111 LOOOL i just saw it

@antwarior

4 жыл бұрын

yoooo hahaha , but have to say this video is great content though

@ozzyfromspace

4 жыл бұрын

lol As a black guy, I approve #mynigga

@akionka

4 жыл бұрын

LMAO. 🇷🇺🇷🇺🇷🇺🇷🇺

Well, I was watching a Tv Series but for some reason, I wanted to check this video for a couple of minutes to watch it later. But, here I'm 35 minutes later commenting. It was thrilling to see you find those error that was happening and fix it when it happens, Loved that. It was like I was watching a wizard do a magic trick. :D

Man I've never used keyframes before for animation, going to look into it now! The things you can do are endless!

Great video Ed! For anyone who's having problem with "overflow-x: hidden" not working properly on Safari try this: html, body { overflow-x: hidden; position: relative; }

@parthshah1206

Жыл бұрын

thank you so much it worked for me

@GH-pu3xc

Жыл бұрын

About 30 minutes wasted before i thought to search 'overflow-x' in the comments! 🤣

Great tutorial! For some reason, the JS did not work for. I checked it over an over it again - can't find the issue. It would be great help if you share your code as well. Thanks for the good work.

@danieldiaz855

3 жыл бұрын

I had the same issue cause, it says Type error I don't have any way to fix it.

Apparently everything else works but my @keyframes. It seems the for and to commands are not recognized :(

@mikeslipk0rn

5 жыл бұрын

same problem here. So annoying to NOT see the links fading in :((

I just LOVE YOUR VIDEOS MAN!

Excellent tutorial, can finally build a fully responsive navbar :D

I can't do de delay at the end it just doesn't work for me?

I follow every steps you done but it seems I got some problems. sliding bar is working but the nav-links isn't showing up but If I remove the opacity in nav-links li it show up but no animation

@soniauduma1640

3 жыл бұрын

same thing happens with mine

HEY BRO, I GOT LOST AS SOON AS YOU STARTED DOING JavaScript :D LOL IT'S BEEN LOTS OF FUN!! THANK YOU :-)

This is the most useful video on how to create a nav bar i have come across! Thank you so much for sharing :-) it's really helping me to understand how to make a responsive webpage step by step :-)

If you copied the code exactly and are wondering why when you click the burger nothing happens, make sure you linked the javascript in the body of the html and not the head.

@nkululekonkosi1365

3 жыл бұрын

Where can i get the codes because i followed the video but am not getting the view and output he gets.

@wenzzplayz7569

Жыл бұрын

tnx brooo

Hello! I followed your method and was able to create a good looking navigation bar but what i noticed is that the burger function would not work on my other pages. but the normal navigation bar works.

@PMTFILMS

4 жыл бұрын

Please help!!!!!!

Incredible, very fasted. Good Job man !!!

Grandeeeeee el mejor, i really enjoy your tutorials, greetings from Colombia

Can you explain me, Why I do inspect on web browser, and go to device tool bars and the body overflow-x: hidden; doesn't work :(

@fatemehyosefi1018

3 жыл бұрын

me too

Hey Ed! I love your tutorials! I have a problem though, at the start of the JS the nav doesn't slide out. Does anyone else have the same problem? How did you fix it?

@mary0180

4 жыл бұрын

Pierce Russon have it too...

@eugenepaul5196

4 жыл бұрын

@@mary0180 i had the same problem but i just removed the dot before the nav-active class - nav.classList.toggle('nav-active');

@mary0180

4 жыл бұрын

Eugene Paul Cabauatan thanks, i‘ve added .nav-links.nav-active { transform: translateX(0%);} at the end and now it shows

@luisrocha2762

4 жыл бұрын

@@mary0180 where you add?

@mary0180

4 жыл бұрын

Luis Rocha before .nav-active

Thank you so much! It is nice that we get to see what possible errors we might make so that we can keep an eye in the future

@ayanarko8890

3 жыл бұрын

kzread.info/dash/bejne/e5WplpmYhcjMmNI.html -- image sliding animation using html & css kzread.info/dash/bejne/fKiHmLCYqpWZY6Q.html -- sliding effect kzread.info/dash/bejne/dXp1z8qydaWXeto.html -- image animation

Great work on this tutorial, really gave my personal website some life. Hoping my instructors like it :)