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

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 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

[@Dani_Krossing]

NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: kzbin.info/www/bejne/rGnNdaF4jshjmNU&ab_channel=DaniKrossing

[@theexile4694]

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.

[@UmarFarooq-rt7yn]

Am I the only one watching in 2024?

[@Dani_Krossing]

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]

Nope

[@kikatabratt1846]

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.

[@naveensg6712]

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

[@mohamedesalem]

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

[@nuggets5787]

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

[@jg.7838]

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

[@luckyhappy65]

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!

[@puspamadak]

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

[@penny-ii6oi]

the tutorial is awesome! thanks a lot for demonstrating!

[@gaurisharma2253]

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!!!

[@musicwithcode1322]

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

[@GfoxSim]

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

[@luisantoniobedoya]

take my like, you saved my life. Now I can do my coursework btw, your explication was excellent! Thanks so much!

[@huseyinyaman4259]

Thank you so much bro, it was a very useful material

[@aliuabdulmanaf353]

You have really made my day, i was stacked

[@judyannmasungsong871]

This is definitely helpful for beginners in website design like me. Thank you so much for uploading this vid. 😭❤️

[@felipebrotto4373]

Amazing video mate, as a beginner could understand clearly how to handle responsive websites. Cheers!!

[@CarlosEnriqueDuarteOrtiz]

Great man, thank you very much!

[@anthonyzorilla5919]

all your web development tutorial is awesome thanks bro a have more knowledge in web development because of you thank you very very much :) thanks

[@siyanfilms]

very helpful video, thank you sir!

[@SnazzyNewt]

This is amazing!! thank you

[@yetsdj2563]

thank you i enjoyed the lecture

[@robch.2901]

You are awesome lad

[@sweetiei.8403]

subscribed! you explain it so well! XD thanks

[@eitanbellaiche1265]

great video thanks !!

[@kassiankassian]

Exactly what'h searched, thanks.

[@koushayeganeh1073]

Thanks for sharing.

[@brianjett1446]

Okay I have a question what about if you should have a header within you header you have a nav and picture/logo?

[@trilokimaurya1479]

This channel diserves more subscribers

[@mohmedessa6745]

Great work. Keep up the videos as you are creating great value for your viewers!

[@itzyuzuruclips]

Thx for this

[@ark2307]

this is REALLY helpful, love it!

[@Oumghizlene]

thanks

[@trilokimaurya1479]

Amazing contents

[@sevestravels]

How did you open style.css on sublime? Did you create a new file the same way that index.html was or is it supposed to pop up on sublime somehow....??

[@haneenbehery9973]

Why when I add media it changes all the web site for every device not only for ipad or phone ?

[@aryandesai6638]

Does higher resolution phones affect the pixels count?

[@limyensoon6189]

awsome

[@shuvoahmed5217]

I have face some problem when i use position absolute...In Every Break point the position of the content is moving.. What is the trick to position absolute content responsive in every Device

[@sammygamer5733]

5:57 Just Switch To VS Code ¯\_(ツ)_/¯ Build in emmet!!

[@hamahawlery7194]

well done bro

[@derialnmau]

For some reason, my picture is in the middle not on the left side, and text just goes on top of it and it looks crazy. Checked my code several times.

[@gejohans]

How can I get a fixed div responsive on cellphones?

[@mustafaamin873]

Maaaannn you are legend

[@mikekieser8380]

Is there an option to download a text/html of the lesson? would be nice to have a hard copy so you don't have to go back over and over to learn the code.

[@Dani_Krossing]

Yes all my newer videos have a link at the bottom of the video description :)

[@masteroutlier]

Hey man, I'm not sure you know this, but you can include LIpsum text by writing 'Lorem7' or 'Lorem20' for example - no need to copy-pasta. One more thing (6:30), that is actually a real language... ...it's called Latin... ...it is also a dead language btw.

[@Dani_Krossing]

Yes depending on your text editor there will be different macros to generate placeholder text 🙂 but since everyone uses different text editors, it seemed better to show a common way people could get their hands on it 😊 Oh and btw... Lorem Ipsum is NOT a real language 😅 Just so you don't look silly if you tell your college professor that it is hehe 😊 It's gibberish that is based on Latin, but it isn't Latin. It's half made up and half Latin, that is designed to appear as a real language. You can't write or speak it in a sensible way you could understand like you can with for example English, German, Spanish, OR Latin hehe 😉 Here is documentation in case you want proof: 🙂 www.makeuseof.com/tag/lorem-ipsum-case-wondering/#:~:text=While%20lorem%20ipsum%20text%20looks,32%20and%201.10. en.wikipedia.org/wiki/Lorem_ipsum

[@kingraidi1578]

hey but what happens if you zoom in? the whole layout gets messed up, doesnt it?

[@shannelleng2893]

May i ask does it work with wix editor? 😔😖

[@timeforrice]

Mine doesn't look the same at fullscreen.

[@Buzca]

Amazing tutorials. Thank you!

[@venkateshpachakolla8573]

hey thanks

[@catherinereyes5988]

What size of image have you used in your banner?

[@AmodeusR]

20:50 I don't understand, when I stretch my screen, the text and the image gets more and more distant one from another, instead of sticking together e_e

[@123masteryoda123]

BAM!

[@zakaria4094]

why did he float .img-info to the right ?

[@MattMcGurk]

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]

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

[@spoonman9584]

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

[@mastermindinclude7198]

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 KZbin is mainly to help you with a few areas where you need help with what you already know

[@rsmith1_]

Me too 😂😂😂

[@momawhothat]

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

[@Dani_Krossing]

I get A LOT of people trying to convince me that Lorem Ipsum IS a real language 😅 so just so I don’t have to copy paste the same answer over and over again... So just to make things clear... Lorem Ipsum is NOT a real language 😅 Just so you don't look silly if you tell your college professor that it is hehe 😊 It's gibberish that is based on Latin, but it isn't Latin. It's half made up and half Latin, that is designed to appear as a real language. You can't write or speak it in a sensible way you could understand like you can with for example English, German, Spanish, OR Latin hehe 😉 Here is documentation in case you want proof: 🙂 www.makeuseof.com/tag/lorem-ipsum-case-wondering/#:~:text=While%20lorem%20ipsum%20text%20looks,32%20and%201.10. en.wikipedia.org/wiki/Lorem_ipsum

[@victorfrancis1378]

Thank you so much bro. I'm new and I'm getting the hand of it with your help

[@briantw]

Nice try, but the words are real Latin words from a, you know, REAL LANGUAGE.. Your inability to pronounce "ut" and "viverra" is not simply brushed off by waving your hands and saying that it's not a real language; just admit you can't pronounce the Latin words and move on instead of doubling down on your justification. Saying those very real words aren't from a real language is very insulting to all the Latin friends I don't have.

[@tinaweiss3590]

Lorem Ipsum is not a language, but then, no text "is a language". An English text "is" not "a language", either. A valid question would be if Lorem Ipsum contains meaningful sentences in any language and another valid question would be if it contains words from any language. Obviously, the answer is no to the first question, but also, yes to the second question, because it does contain Latin words amongst others. Wise guy mode : end

[@Wuddigot]

I thought you were going to say: "So just to make things clear.... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. " 😂

[@razforceuniverse6091]

I like the fact that you used a wikipedia site as you proof, lol. Lorem ipsum is a real languange! Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

[@sukhvsin2]

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

[@louzynerd129]

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

[@diwakardayal954]

@@louzynerd129 check your pixel values of mediaquery

[@marianag843]

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

[@Thebrokenrobot273]

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]

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

[@pxCode]

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]

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

[@aldrinjenson]

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?

[@nylivehc9008]

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

[@joybanks]

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]

someone pls answer this pls

[@sanatasmiashaikh6566]

Absolutely right que....

[@tochkaarendiru]

Hello, Elon

[@kuntahouen3835]

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

[@tifftiff1230]

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.

[@Fraguille94]

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!

[@HanulakTV]

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

[@elluzion.]

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!

[@Jodnix]

bro help me plzzzzzz when ever i change my width in media query(means just for my phone resolution) it will automatically change all resolutions width

[@mohmmedsiddiq2431]

Hello thank you.. But i have a problem with responsive because its not charging when i change the size I only get the same Editing in the phone in desktop and ipad view

[@Ginfio]

Mohmmed Siddiq Can I see the code... ? Do you have a link or something...so I can see the code and see what I might be doing wrong.

[@andrewwarren654]

Great video, presentation and content. Thanks. :)

[@theoradicella1360]

Thanks for this video, really usefull! Anyway, when you define display:block; isn´t the width by default 100%? why would you specify it again

[@Mischkovonik]

You lost me at 2:24 "programm a website..." ^^ just kidding, cool video. Really have to look into this.

[@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..

[@einben]

I‘ve got a question: mobile first doesn‘t make sense to me because you don‘t know that you want to add the banner for desktops when you Design it for mobile. I hope someone can explain to me:)

[@daviddeleon3411]

mobile first coz some of the visitors or clients of your website uses mobile

[@motivees3934]

this is the shortest and best explanation i have ever seen

[@tristandruelinger2128]

I have tried this several times now, and I always have the same problem. When I try to put the image next to the text, they are floated left and right, but they are not aligned vertically. Any ideas?

[@alingamalan5708]

It is a good practice to apply a clearfix class to the elements you applied float in order to be perfectly aligned

[@angadsinghvirdi5689]

Add tag after each image, they will be aligned vertically

[@DINO92AVFC]

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]

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

[@jacobsiegel9144]

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 :\.

[@BummerSlug]

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

[@akramer83]

This is perfect instruction for the subject matter! Subscribed!

[@spartanwr11]

i know im alitte late here, but instead of lipsum.com if you type "lorem100" without the quotes and press tab that will produce the first 100 words of lorem lipsum! change the number for different amounts of words :)

[@SEMHRAY]

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

[@gonzalohernan4169]

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

[@saquibiqbal2350]

Thanks Daniel you deserve more than 88k

[@marcelclaude5438]

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

[@oibender]

Thank you for sharing. What is that toolbar with phone model selection? Is it a some kind of a browser extension?

[@Dani_Krossing]

It is the build-in developer tool that you can find in all modern browsers :) you can access it by pressing F12 in your browser.

[@oibender]

@@Dani_Krossing Thank you. I have found the tool, but I'm still confused with setting a web page element sizes for high resolution phones, like at 1440x2560 pixels, which is equivalent to my 27" monitor. If I select a phone with such a high resolution, the page becomes much bigger than true phone 2-dimensional sizes in the browser's developer tool view. What am I missing here? I believe such phones already existed in 2017 when you posted the video, but I'm having trouble applying the explained if the content is meant to be viewed on such a high resolution phone.

[@LesterShipMirOleg1992]

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

[@biplobguragain5685]

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

[@KimKongKun1337]

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

[@notmeiko]

you can double it bro

[@aadilgoyal4198]

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

[@smylmvv]

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!!

[@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

[@Odnal8253]

Hey Daniel! Thank you for your great videos. I wanted to know, which do you think is the best way to make a website responsive? Do you recommend this method, or bootstrap?

[@afiqmuhsin584]

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

[@abrarahmad9265]

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.

[@stepbystepscience]

That was a great video, clear and concise. Thank you very much.

[@RussellTeapot]

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!