25 | LET'S MAKE OUR WEBSITE RESPONSIVE | 2023 | Learn HTML and CSS Full Course for Beginners
ฝัง
- เผยแพร่เมื่อ 16 ก.พ. 2023
- 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 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
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 😊
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.
the way you make things understand is awesome ❤
Thanks for sharing free knowledge 🙂
thanks man
it's what i need
Thank for this
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.
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.
Wow this really is more easy than i thought.. Was feeling really embarrassed not knowing how to create a responsive site. Thank you ❤❤
Thank you so much! This video helped me a lot with my first project
Wounderful,, Your tutorial is useful for us🙂🙂
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
For the JavaScript code for the burger menu dropdown to work use else in place of else if.
Thank you
great bro 👍
Amazing video as usual 🤎
The best teacher in TH-cam.
Thank you 🙏
new in here ,but will see haw far i can go with you by my side :)
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
This man is a gift God gave me, you can't understand how much you help me!
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.
Hello Dani we dont have any click event for our nav links yet to scroll to their content
i cannot find any lesson material in description, help me ...i need related CSS-HTML files if possible ....
Ironically, from 6:40, your personal image gives the appropriate reaction at the right time of your comment. 😉 04-20-2023 1932 PT
@Dani_Krossing , can you provide us lesson material ( CSS HTML files ) somewhere?
It's in the description :)
@@Dani_Krossing thanks ... understood... waiting for your bootstrap sessions...
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.
Try clearing the browser cache. If not then you most likely made a typo 🙂
@@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.
* {
transform: scale(.2);
}
waay more fun 😂
🤣🤣🤣
how come your content in the about section scaled down with the wrapper
because mine is overlapping. what i think is because we used px values for the various divs inside the wrapper
Cam anyone help me I dont know why my content isn't getting centered
Hey! "➤ GET ACCESS TO MY LESSON MATERIAL HERE!"
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.
@@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😄
@@Dani_Krossing, can you provide us lesson material ( CSS HTML files ) somewhere?
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;
}
}
exactly...but mine is not working...I don't know why yet. pfffffffff I reviewed the last bit of episode 25 twice now.
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;
}
};
Always check for spelling mistakes 🙂 you misspelled "style" as "stylye" on line 9
@@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.