25 | LET'S MAKE OUR WEBSITE RESPONSIVE | 2023 | Learn HTML and CSS Full Course for Beginners

Today I will show you how to make the website we have build up until now responsive, using media queries in CSS. 🙂 I will also show you have you can create a burger menu, for opening a mobile menu using a button.
Download icons here: www.flaticon.com/
➤ 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 KZbin 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

[@sbhankord8591]

I start the coding on your chenal it's been months looking for a perfect teacher, Finley i find you so what i wanna say is , really appealing you , 😁like you always say , with that said , done this course and the others perfectly, again thanks.

[@bykevictor4766]

For the JavaScript code for the burger menu dropdown to work use else in place of else if.

[@frankieflowcc]

Your video's are super helpful. Thank you for that! If by any chance you could make more of those i would love it. Also a tutorial about how to make this design go into a wordpress theme would be lovely.

[@DejanPavlovic-tu8vj]

11 years. Great. I bet it was a lot harder to learn all this back then.. I didn't know even this to exist... I knew only for gamers, like WoW players. Foor programers never heard in my town

[@rollinfishbach9133]

This man is a gift God gave me, you can't understand how much you help me!

[@mickymcl8359]

Thank you so much Dani, this for me, is a brilliant explanation of how to make a website responsive. You always go the extra mile to explain why and how each change affects the website. A great course. Thanks again. Michael.

[@bladewraith]

Well, marvellous. My js button won't even appear. Haven't got a clue what is wrong. Validated to js and the css is exactly as you've done it.

[@Dani_Krossing]

Try clearing the browser cache. If not then you most likely made a typo 🙂

[@bladewraith]

@@Dani_Krossing I cleared the cache. Are the files available anywhere so I can look and see where I went wrong. Too many lessons to go back and start over.

[@cruzinsweetsntreats]

Ironically, from 6:40, your personal image gives the appropriate reaction at the right time of your comment. 😉 04-20-2023 1932 PT

[@Stoney_Eagle]

* { transform: scale(.2); } waay more fun 😂

[@Dani_Krossing]

🤣🤣🤣

[@baddyplaysYT]

my java isn't working pls help let burgerbtn = document.querySelector(".burger-menu-btn"); let burgerMenu = document.querySelector(".burger-menu"); let isBurgerOpen = false; burgerbtn.onclick = function () { if (isBurgerOpen) { burgerMenu.style.display = "block"; burgerbtn.style.backgroundPosition = "center left 50px, center"; isBurgerOpen = true; } else if (isBurgerOpen) { burgerMenu.style.display = "none"; burgerbtn.style.backgroundPosition = "center, center left 50px"; isBurgerOpen = false; } }

[@nihilamoris_actual]

Can anyone let me know why my javascript isn't working? I dont het any errors until I click the hamburger button. Javascript runs and pulls up the menu, but then I do not see the 'X' or close.png icon and I cannot close the menu because console log is giving me this error -> Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundPosition') which is lin 9 of the code referencing the "center left 50px, center" let burgerBtn = document.querySelector(".burger-menu-btn"); let burgerMenu = document.querySelector(".burger-menu"); let isBurgerOpen = false; burgerBtn.onclick = function () { if (!isBurgerOpen) { burgerMenu.style.display = "block"; burgerBtn.stylye.backgroundPosition = "center left 50px, center"; isBurgerOpen = true; } else if (isBurgerOpen) { burgerMenu.style.display = "none"; burgerBtn.style.backgroundPosition = "center, center left 50px"; isBurgerOpen = false; } };

[@Dani_Krossing]

Always check for spelling mistakes 🙂 you misspelled "style" as "stylye" on line 9

[@nihilamoris_actual]

@@Dani_Krossing I feel like such a moron!!! I probably read and re-read it so many times and never caught that! This is a great series! I have been trying to learn this on my own for a while using other methods and your videos are the perfect way of putting it all together in an easy-to-understand way! I cant wait to dive into your other videos once I have completed this series.

[@oksanabarshchyk355]

Hey! "➤ GET ACCESS TO MY LESSON MATERIAL HERE!"

[@Dani_Krossing]

The: ➤ GET ACCESS TO MY LESSON MATERIAL HERE! Isn't the link. 🙂 It is the just the header for everything bellow. The link is further down at the bottom.

[@oksanabarshchyk355]

@@Dani_Krossing Oh, sorry🙄. I just supposed that it was a link and didn't read anything below as there was no git link down there. Now I see what is the reason😄

[@aliarghiani6848]

@@Dani_Krossing, can you provide us lesson material ( CSS HTML files ) somewhere?

[@vladkh399]

let burgerBtn = document.querySelector(".burger-menu-btn"); let burgerMenu = document.querySelector(".burger-menu"); let isBurgerOpen = false; burgerBtn.onclick = function () { if (!isBurgerOpen) { burgerMenu.style.display = "block"; burgerBtn.style.backgroundPosition = "center left 50px, center"; isBurgerOpen = true; } else if (isBurgerOpen) { burgerMenu.style.display = "none"; burgerBtn.style.backgroundPosition = "center, center left 50px"; isBurgerOpen = false; } }

[@mattgrimaldi13]

exactly...but mine is not working...I don't know why yet. pfffffffff I reviewed the last bit of episode 25 twice now.

[@guilyan_pn]

Amazing tutorial Dani, it helped me a lot. But I have some trouble with the javascript. I can open it and close it, but it's impossible for me to open it again.

[@nomeska]

Thank you very much! So understandable 🎉 I've made huge step in CSS today. Responsive design was my nightmare I've dreamed of. Took hour and responsive design is so much clear thanks to you 😊

[@CsMuia]

Great tutorial Dani. Based on my experience, making a website responsive was tricky at some point. Requires practice. This tutorials just make it a lot more easier. It took me a while to realize that you only need to change certain CSS of your website to fit the media query parameters for tablets and smaller screens. That is a key lesson you have highlighted. It will be exciting to create a scroll back to top button in the next tutorial, the one that will move the website to Top in a smooth manner. Look forward to the next episode.

[@ShihabH99]

the way you make things understand is awesome ❤

[@kimsharkie8952]

i literally asked myself, "who the hell is this guy? " Because everything you teach is digestible and understandable. Wish i knew your page years ago

[@DavidOmomila]

Cam anyone help me I dont know why my content isn't getting centered

[@yrhVee]

Wow this really is more easy than i thought.. Was feeling really embarrassed not knowing how to create a responsive site. Thank you ❤❤

[@simplesmile-qx6tz]

new in here ,but will see haw far i can go with you by my side :)

[@racco6080]

thanks man it's what i need

[@aliarghiani6848]

i cannot find any lesson material in description, help me ...i need related CSS-HTML files if possible ....

[@holycraps2132]

Thank you so much! This video helped me a lot with my first project

[@likandokayombo]

Thank for this

[@tanny_edits]

Hello Dani we dont have any click event for our nav links yet to scroll to their content

[@MrScorpio74]

The best teacher in KZbin. Thank you 🙏

[@soniaakter2770]

Wounderful,, Your tutorial is useful for us🙂🙂

[@arshad1781]

Thanks for sharing free knowledge 🙂

[@aliarghiani6848]

@Dani_Krossing , can you provide us lesson material ( CSS HTML files ) somewhere?

[@Dani_Krossing]

It's in the description :)

[@aliarghiani6848]

@@Dani_Krossing thanks ... understood... waiting for your bootstrap sessions...

[@yousifky]

Amazing video as usual 🤎

[@coddeku5705]

how come your content in the about section scaled down with the wrapper

[@coddeku5705]

because mine is overlapping. what i think is because we used px values for the various divs inside the wrapper

[@princesswithking]

great bro 👍

[@olanrewajuademola3573]

Thank you