17: How to Make a Website Responsive | Learn HTML and CSS

No video

17: How to Make a Website Responsive | Learn HTML and CSS | Full Course For Beginners

Рет қаралды 1,026,444

Күн бұрын

FIND MY 2023 COURSE HERE: • 1 | INTRODUCTION TO HT...
How to make a website responsive | Learn HTML and CSS | HTML tutorial | Basics of CSS. In this lesson you will learn how to make a website responsive using CSS media queries. Today it is a must to make your websites viewable on other devices such as tablets and mobile phones.
➤ 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 KZfaq 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

Пікірлер: 691

@Dani_Krossing Жыл бұрын

NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: kzfaq.info/get/bejne/rJ6ad9FzvsmUkqc.html&ab_channel=DaniKrossing

@theexile4694 7 ай бұрын

I am having such a hard time with this. My website works fine for most phones but, when it comes to the Galaxy S10, or phones similar, it just doesn't want to adjust to fit within the space provided and instead forces the user to use a scroll bad to swing left to right. Nothing I change fixes it either. Very annoying. Apparently it has something to do with touch being enabled or disabled and I have no idea how to force it to be enabled so everything looks right. Update: The answer was the size of my photos on the page. They were too large for the screen size so they would not adapt properly causing the issue. In case anyone was having the same issue. I resized each image to 320px and everything works fine now.

@spoonman9584 4 жыл бұрын

You pretty much compressed my 11 week web design class into a zip file in one video.

@mastermindinclude7198 2 жыл бұрын

Even for me...

@samueljackson5182 Жыл бұрын

Great job, but the 11 weeks was not a waste of time, cos it helped you to understand every single thing he was doing there...if you hadn't taken the class,there is no way you will understand what he is doing...so KZfaq is mainly to help you with a few areas where you need help with what you already know

@rsmith1_ Жыл бұрын

Me too 😂😂😂

@momawhothat 10 ай бұрын

im self taught and is understanding everything he's saying you for sure grasp it quicker through a course or college though yes, but sometimes that isn't free @@samueljackson5182

@UmarFarooq-rt7yn 4 ай бұрын

Am I the only one watching in 2024?

@Dani_Krossing 4 ай бұрын

No everyone else are over at my new HTML course ;) this one is my older one

@resolvetec Ай бұрын

No, I’m also watching this in 2024

@tinashemeza8456 Ай бұрын

Nope i'm here too

@francischishimbe2058 Ай бұрын

@@Dani_Krossing where is your new one

@collinsmking5369 29 күн бұрын

Nope

@MattMcGurk 4 жыл бұрын

Literally the best explanations. Not just a code along, you're the first instructor who actually explains what the lines of code mean. Superb job Dani, Thank You!

@thegreenroom5820 2 жыл бұрын

And he didn't strech it into a 20 hour video series like many others. Dude is a ninja

@sukhvindersingh6185 4 жыл бұрын

I've been searching for this for ages and I got You ... Thanks, brother

@louzynerd129 3 жыл бұрын

when i change options from another display it changes it for all displays, what am i doing wrong?

@diwakardayal954 3 жыл бұрын

@@louzynerd129 check your pixel values of mediaquery

@Thebrokenrobot273 4 жыл бұрын

Despite this video being a few years older, this has helped me so much in my classes as I learn to be a web designer. Thank you so much

@louzynerd129 3 жыл бұрын

when i change options from another display it changes it for all displays, what am i doing wrong?

@pxCode 3 жыл бұрын

You don't have to Hand-Coding anymore if you use pxCode to build Responsive Webpage, and it's for free. Try it out www.pxcode.io , there's tutorials on our channel as well ;)

@farvillage Жыл бұрын

hi, I'm in 2023 and it has helped me a lot too

@RainOnline 4 жыл бұрын

Im just gona comment again showing how much I appreciate this, THANK YOU from the bottom of my heart.

@nylivehc9008 5 жыл бұрын

8:23 fudge thanks for that. i didn't know there is such thing. that will save me a lot of time.

@marianag843 6 жыл бұрын

Thanks man, your the best. The only one that knows how to explain this things

@tifftiff1230 4 жыл бұрын

Thank you 🙏🏻 I was scared to try responsive web and thought it was gonna be hard but you made it so easy to learn it.

@kikatabratt1846 3 жыл бұрын

From these 21 minutes I learned more then for a whole year at school studying the subject (HTML&CSS). Thank you a lot, you put great work into the video and earned my subscription too!

@PoboyMusic Жыл бұрын

Thats why school is a scam.

@motivees3934 4 жыл бұрын

this is the shortest and best explanation i have ever seen

@DINO92AVFC 4 жыл бұрын

5:53 small tip: you can avoid going to external web site just to copy lorem ipsum text, there is a shortcut inside Atom to do just that. You type something like "lorem" where X is the number of words you want to generate (for example, lorem30 or lorem120), and then go either enter or double tab (I use VS Code, so I don't know how is it in Atom).

@kiwicami287 4 жыл бұрын

Does that work for VS code too ? Edit: i should research before asking question like that, yes you can, with "loremNum"

@kimothe2nd Ай бұрын

You dropped this 👑 I have been struggling with responsive design for a while but you just gave the BEST explanation so far! TYSM ❤

@elluzion. 4 жыл бұрын

The Video is some years old, but when it First came out this series really boosted my knowledge when it comes to HTML and CSS, and even programming in general!

@kuntahouen3835 4 жыл бұрын

Thank you! This is more comprehensive and helpful than my university classes.

@smylmvv 2 жыл бұрын

Thanks for the tutorial! I didn't remember a lot about so much about hot to make a responsive website, but now I remembered again it!!

@BummerSlug 4 жыл бұрын

I am self taught and only have a basic understanding of java, objective C and JS (arrays and such but not much exp) I really appreciate the explanation you give for “why” you are doing what you do. It helps so much more for me to hear why you did various parts (ie padding). I had to sub and am off to watch ever one of your videos now TYVM! Great instructions

@codeinswahili9505 4 жыл бұрын

For the first time I have learnt responsive web design even after going through many tutorials. Very brief and clear.

@user-sm4vq7jp3s Ай бұрын

Man, 6 years ago and still sinks in like it was from yesterday, some epic explanation there! Great job!

@Fraguille94 6 жыл бұрын

You're great Daniel thank you bro! I thought I was good enough at CSS and HTML but your courses always teach me something new. Awesome content my man!

@jspr-rnty 4 ай бұрын

going back to this tuts, because I almost forgot everything and I love how Dani teach such content.

@Dani_Krossing 4 ай бұрын

I have a newer 2023 course on my channel 🙂 which is a better version of this course

@akramer83 4 жыл бұрын

This is perfect instruction for the subject matter! Subscribed!

@AngelTorres-ot6mb Жыл бұрын

I really enjoy this project. As a beginner you explained it very well and it was easy to follow you. I want to learn from you. Great job! Thank you..

@LesterShipMirOleg1992 5 жыл бұрын

Great! Enjoying your tutorials here from a Caribbean exile living here in Tokyo, JPN.

@chavesoutradimensao2513 5 жыл бұрын

I remember when I subscribed and you had around 40k subs and look at you now 🙌🏽 I’m so proud of you! You were very gifted, you make it so easy for us to understand. Thank you!

@praveenpsg77 5 жыл бұрын

This is so sweet feel how things can be done with you. May god bless you !!

@marcelclaude5438 5 ай бұрын

FANTASTIC.........SENSATIONAL, you came at the right time, thank You very, very much!

@HanulakTV 6 жыл бұрын

Great tutorial as always. I study in IT college and thank by you from subject on which we using JS, PHP, CSS, HTML I have best marks - 6. I waiting for more tutorials like this which learns me more think's. Love you ❤️ #nohomo

@saquibiqbal2350 6 жыл бұрын

Thanks Daniel you deserve more than 88k

@abrarahmad9265 4 жыл бұрын

Great sir now i dont have to learn a new language like bootstrap to make my design responsive this is great.I do not know this before that we can make design res with css.

@thenikhiltailor Жыл бұрын

I cleared my confusions related to the responsive web designing after watching this video...

@biplobguragain5685 6 жыл бұрын

Keep it up lad! It hurts to see that you only got 50k subs, you deserve a lot more.

@KimKongKun1337 6 жыл бұрын

That's because only 50k people code and actually have a future

@notmeiko 5 жыл бұрын

you can double it bro

@aadilgoyal4198 3 жыл бұрын

@@KimKongKun1337 because of your comment their are now 305k subs

@yoshiro1698 Жыл бұрын

THIS HELPED ME ALOT LIKE SERIOUSLY, I WAS SEARCHING FOR REPONSIVE WEBSITE TUTORIALS BUT I CANT UNDERSTAND SOME THEM. BUT THIS VIDEO EXPLAINED EVERYTHING CLEARY. THANKS SO MUCH

@bjmgraphics617 2 жыл бұрын

I think it's easier to cut down than to build up. I am a graphic designer and I make visual experiences the whole enchilada and it's all gorgeous. I use the "do without" logic when I scale down for lesser devices. Thanks

@andrewwarren654 Жыл бұрын

Great video, presentation and content. Thanks. :)

@triplea0070 5 жыл бұрын

man really really thank you you can teach better than some teachers in my engineering college well to be honest you are a legend

@tradingwithazoak 8 ай бұрын

I did not attend class all semester because of some serious issues, exam is tomorrow and I have already made my project to submit. thank you

@Dani_Krossing 8 ай бұрын

Hope you managed to make a good project in time. 🙂

@mohamedesalem 4 жыл бұрын

thanx very very much the (media rules) are very useful 💖💖💖💖💖💖

@nuggets5787 Жыл бұрын

Thank you🙏. I have been avoiding this for a year now lol.

@aldrinjenson 4 жыл бұрын

Hi, small doubt. Instead of using pixels can't we use percentages so that the paddings and all will be having a constant ratio irrespective of the device on which we view it?

@allenjoshua7692 2 жыл бұрын

one of the best thing i learned in this video.. "toggle soft wrap" it's called word wrap in vs code

@rawrsophiex 2 жыл бұрын

thanks!

@dennismutemi4479 3 жыл бұрын

this is great bana,,,,,thanks alot👍👍👍👍

@jg.7838 4 жыл бұрын

THANKS!!! I looked at multiple pages and sites but this finally put it all in context!! Thanks again!!

@SEMHRAY 6 жыл бұрын

Love your work bro i Am just Student so i dont know much but Am studying hard

@proudmuslim9139 3 жыл бұрын

dude, amazing work. i make websites for fun. Now i got a chance to make website for school and only problem i faced was it not being responsive. this helped me out a lot! i would definitely recommend others

@manimaranbhuwaneshwaran5617 4 жыл бұрын

Wonderful approach for responsive site, Thanks buddy

@Oppositemirror96 Жыл бұрын

man after all these years you saved my life and time much love keep it going

@penny-ii6oi 3 ай бұрын

the tutorial is awesome! thanks a lot for demonstrating!

@Fisayobabalola1 Жыл бұрын

This is an extraordinary explanation.

@Dani_Krossing Жыл бұрын

Thank you 🙂 My new “2023 HTML course” is much better and more updated. It’s linked in the pinned comment I believe, if not then it’s on my channel if you are curious

@user-rp7fk7vn7y Жыл бұрын

Thank you, Really Helpful

@gonzalohernan4169 4 жыл бұрын

Muy bien explicado, muy claro! Muchas gracias, me sirvió un montón.

@naveensg6712 2 жыл бұрын

Thanks a lot brother I've been struggling with css for 3 days now I got it...

@googleuser6875 3 жыл бұрын

Great! Thank you Dani, now I finally understand. Thanks for teaching an old dog some new tricks.

@luckyhappy65 4 жыл бұрын

You are so great! Thank you! I was a web designer like 8 years ago....and now I need to design a website but the rules have changed a lot! Your lesson is just great for me!

@amanfaridi7997 3 жыл бұрын

u are amazing. u have teached 3days lesson in just 21 mint

@RussellTeapot 4 жыл бұрын

Excellent video! Not only for learning responsive design, but for designing in general: there were some ideas that helped me grasping the general picture about widths and content organization. I will watch the other videos of this list too, I'm sure that there will be some other gems. Subscribed!

@shikharsinghkushwaha8246 2 жыл бұрын

No. 1 Video for responsive design ❤️❤️🙏🙏. Shukriya

@ritaiheanacho1388 3 жыл бұрын

You are simply my best teacher . Thank you Dani Krossing

@Noellenoelle1526 4 жыл бұрын

I am new to design. Did not realize it would much easier to create the mobile version first. I created a really nice project in desktop version and now that I am trying to convert it to mobile version, it is quite difficult. Lesson learned.

@azraewolfina 2 жыл бұрын

this video useful and educated so much even after 3 years

@afiqmuhsin584 5 жыл бұрын

thank you so much for making this tutorial, i appreciate it so much as.

@brianredman5569 4 жыл бұрын

Thank you. I had no idea how complicated I was making my own website. I will be following you for a long time. You are very helpful and your video makes it look so simple.

@panka33 6 ай бұрын

This is an unbelievably good video, Videos like this help tremendously.

@otete3020 4 жыл бұрын

Thank you for concise explanations 😊 It was easy to understand!

@aliuabdulmanaf353 9 ай бұрын

You have really made my day, i was stacked

@jawwadrehan2866 4 жыл бұрын

I want to give BIG THANKS to Daniel. You explained it really well man

@lfaloumlil7175 3 жыл бұрын

very helpful thanks

@revvnijaa4177 3 жыл бұрын

5years wasted my college life but i now am very eager to learn Thanks for u bro

@aleksandarbutulija739 5 жыл бұрын

You are amazing, thank you bro

@helenameadows8143 2 жыл бұрын

You're AWESOME!! Many thanks for your lessons!

@pharouqyadi6077 2 жыл бұрын

Your videos gonna propel me outta the trenches soon… BELIEVE💜 Great job Dani👍🏽

@mofurry8430 4 жыл бұрын

Man this was super helpful! super easy explained and easy to follow! Thanks a lot man!

@apbosh1 3 жыл бұрын

Nice tip with the inspect and set different devices! Thanks

@CarlosEnriqueDuarteOrtiz 25 күн бұрын

Great man, thank you very much!

@mortenlund1418 3 жыл бұрын

Fantastic series!!

@maryam2348 Жыл бұрын

Wowww! You make it so easy!!! Thank you🥰

@Izukamma 6 ай бұрын

God bless you sir. i really needed this

@GfoxSim 10 ай бұрын

Very helpful! Super easy to understand. Thank you so much.

@nikolag9543 6 ай бұрын

Very useful and the best explanation i liked the video and it helped me a lot. Big thanks!!!

@musicwithcode1322 2 жыл бұрын

Great content! I was able to follow along easily and have changed my website accordingly. Thanks so much!!

@henrythomas7112 6 ай бұрын

Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!

@gaurisharma2253 4 жыл бұрын

Thank you so much Daniel.....I've looked into many , literally many videos but the concept could not go into my head....but ur video made it so crystal clear to me Thanks a lot!!!

@theotheluo6546 2 жыл бұрын

i love your videos and the detailed explanations for CSS code

@jacobsiegel9144 6 жыл бұрын

I loved the video!! I feel like the media query thing puts people who don’t know about conditionals in JS at somewhat at a disadvantage. When I tried learning it before I knew about it, I was like whaaaa? Also, some feedback: if you can, try to type. Copying and pasting doesn’t work well on mobile. That’s where I’m taking notes :\.

@user-vl3pz3ss4g Жыл бұрын

GOD BLESS YOU

@MrVipulLal 2 жыл бұрын

Brilliant video. Many thanks mate

@brett3554 4 жыл бұрын

Fantastic tutorial mate

@puspamadak 4 жыл бұрын

I have been learning web development since class 10 onwards and your videos are really very helpful for me.

@arib8367 3 жыл бұрын

You're the best Dani!

@RorenMovies Жыл бұрын

Very nice video. I like that you explain all the steps so we know what it will do when we write it in there. A lot of people don't do that. Very easy tutorial, very useful tutorial. :D

@naina.. 6 жыл бұрын

It's was awesome and easy to understand..

@sylviaeguzoro7978 2 жыл бұрын

Thank you, Dani. Thank you!

@gibran5208 2 жыл бұрын

Nice thank you very much! this is great help even 4 years after!

@WorldTimeLineChannel1 4 жыл бұрын

AWESOME VIDEO. YOU HELPED ME MAKE MY SITE MORE RESPONSIVE ON ALL DEVICES LISTED ON CHROMES DEVICE TEST. THANKS. 100,000 THANKS.

@nba1shorts 3 жыл бұрын

im loving the responsive website woo thanks bro more power to you

@brianahunter1825 2 жыл бұрын

Loved this video, I already knew this information but needed a refresher thanks!

@ajc155 5 жыл бұрын

your gift of teaching is an asset to the humanity

@rebeccakwon9992 Жыл бұрын

thank you!!!!!

@joybanks 4 жыл бұрын

I've started taking an SD course and these are a few things I'm confused about: 1. The course says that semantic is better practice than non-semantic (using divs for everything), so why most websites seem to use non-semantic? I rarely see codes that include things like: article, aside, section. Most just use divs. 2. Rem, px and %: I read that rem is great because it scales code according to root element, but then why most codes just include px and %? I've never actually seen a website with "eg. padding: 2.5rem;"

@retro2712 4 жыл бұрын

someone pls answer this pls

@sanatasmiashaikh6566 3 жыл бұрын

Absolutely right que....