24 | MAKE A WEBSITE RESPONSIVE FOR ALL DEVICES | 2023 | Learn HTML and CSS Full Course for Beginners

Today I will show you how to make your website responsive using media queries in CSS. 🙂 Making our website change to fit different devices is crucial, since everyone uses their mobile and tablet devices now a days when surfing the internet. It is therefore important that you make sure your website is made responsive, so all your content looks good no matter the screen size.
➤ TIMESTAMPS
00:00:00 - Introduction
00:00:12 - Design for mobile or browser first..?
00:01:27 - Showing you my example
00:02:12 - Mobile tool build into the browser
00:06:02 - How to set up media queries
00:08:26 - How to define a width break point
00:12:03 - All the standard break points
00:14:26 - "only screen and"
00:15:46 - Landscape and Portrait
00:18:08 - How to add two width parameters
➤ 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

[@irealityseek]

Not going to lie, this helped me a lot with responsiveness. Things explained by other people can be really messy, it's surprisingly simple! Thank you a lot, leaving a comment. Hope it helps this video gain a few more views. 😊

[@SurfingTheMentawais]

Dani you are the hardest working person on KZbin in the field of web design tutorials.

[@RichardMikesell]

Very well done. Thank you!

[@SinaMedicalAnimation123]

Very nice video

[@yousifky]

The way you explain things.. is AWESOME ❤👌

[@nnaimsanchez9400]

You explained it better and sharper than my Udemy BootCamp professor, thank u so much pal.

[@jamespaulchibole266]

Thank you, Dani, Just at the right time.

[@kieranwentworth]

Thank you so much for this video I have been struggling to understand how to easily do it and you’ve explained and showed it so well

[@parkgunggung6597]

thank you very much

[@henrythomas7112]

What a brilliant video. Great advice, simple and practical.

[@dantoneliezer9403]

very informative

[@SlowlyMotivate]

Woah thx, I like the different css style sheets great idea

[@Pareshbpatel]

An excellent tutorial that explains the basics of Responsive Web-Design. Thanks, Dani {2023-02-12}

[@Sir_ekereke]

I actually learnt something new from watching your video. keep it up😍

[@Stoney_Eagle]

Responsiveness is one of the most frustrating things to deal with for me in css. Are you turning this site into a PWA at the end? would be really cool 😊

[@Dani_Krossing]

I have never build a PWA before, but from what I heard it isn’t too difficult, so it might be fun to do at some point. 🙂

[@javedalimzai]

Thanks man

[@AlThePal78]

the only thing I would do different is @media (width < 600px) vs the min max this way it makes more sense. I know it don't work on some browsers but most modern browswers I use instead LOL

[@igu642]

❤❤

[@DevinGeegh]

Loved the Training! Thank you! I did find that when I do a responsive view and adjust the width manually it would "Break" back to the default root font when it was in the adjustment from one media REM to another media REM. I was able to figure this out and I adjusted my Media px's to the same number, instead of going one pixel difference. IE: (min-width: 600px) and (max-width:768px), (min-width:768px) and (max-width:992px)... notice I used 768px twice in this code. Setting the max to the min of the next one seemed to fix this "Bug". What do you think teacher? Do you see any issues with this?

[@DearSadiq47]

Brother you look like 'ELON MUSK'.

[@yuriyzadorozhnyi3849]

Щиро Вам дякую за такий подарунок !

[@Dani_Krossing]

Det var så lidt! 🙂

[@cruzinsweetsntreats]

WordPress changed their programming thoughts of scaling at version 5.x to be mobile first, then up to desktop. Whereas up through version 4.x, it was desktop first, then down to mobile devices. 04/13/23 0002 PT

[@AlThePal78]

I never knew that they had that feature of the phones and shit like that wow awesome thank you so much for that

[@mattgrimaldi13]

I completed the first course from 4 years ago recently and then started this one. I've learned a lot but as of this episode 24 I am starteing to feel like the first 22 episodes are maybe going to not be continued as the information about scaling to a phone don't seem to be working well... Please let the original lessons/work be continued so they fit on a phone as well as a pc.. . please.../I guess I will find out in episodes 25+.............

[@4ndySingh]

Hi Mr.dani , I have a little request = please make a full video on how to publish a website . Plus add google ads to make money through it .

[@Dani_Krossing]

I have a excellent video showing how to upload a website in my previous course. 🙂 Regarding Google ads, this isn't something I will get around to do in the nearest future unforunitaly.

[@4ndySingh]

@@Dani_Krossing awesome ,thanks

[@AlThePal78]

quick question, should all my original code just work for a site 600px and then start using the media query, so I would not need the @media (max-width:600px)

[@ardavural4649]

I couldnt find the lesson material, maybe im blind but i would rly love to download them because ur lectures are rly helpful for me.

[@Dani_Krossing]

It should be linked at the bottom of the description. 🙂

[@oluwajomilojuajagbe5928]

I have a question, When you closed and opened inspect, the Iphone 13 pro looked like you could zoom it out and it would look normal. that is the same issue i am having now. if i save on my vs code, it appears to be zoomed in so i dont know which one to work with. I hope you understand my question

[@cobycole23]

min-width- starting from, max-width- up to

[@tenderlyehwehwehwe4358]

first time watching a youtube tutorial! I enjoyed your teaching a lot. it was fun! Thank you very much! looking forward to me

[@bombermanpc]

Can u please reply to me the whole code of this video that u just wrote because its way too much for me to write if possible

[@prachikesarkar8400]

How to make a website responsive having various images set at different positions on a single webpage

[@JP-co3hu]

good eve may i ask what is the possible reasons why in IOS my breakpoints I do I feel is correct but when my friend visit my website the navbar doesn't look nice in IOS?

[@Xooou_]

Hello Mr Dani how or where i can know the width breakpoint of all devices

[@Dani_Krossing]

I show all major breakpoints in this video 🙂 if you are asking for breakpoints for ALL devices on the market, then I wouldn’t recommend attempting that, since it would become extremely messy and unnecessary.

[@davidtesno3384]

I thought it’s best practice to stick to either min or max width and not use both. 🤔. Also could you do a video on how to use bootstraps media queries?

[@maybe1350]

MR BEEEEEEAAST

[@user-ti8ui2ko5o]

Tell me why I shouldn't follow u, with this amazing video 📷

[@davidolaye5771]

I’m going be honest , I got lost when you we’re talking about max and min width

[@dancristian3673]

there´s no link to download sources

[@Dani_Krossing]

I just double checked, and the link in the description for is working. 🙂 it’s at the bottom.

[@dancristian3673]

@@Dani_Krossing my bad. Thank you!!!

[@scottonanski4173]

Mobile first is a throwback to the advent of the iPhone when it first showed up. Corporations were clamouring over each other to get their hands on the profits that could be made by constant online access. This is where mobile first came from, and is was horrible fucking concept. Content consumption on desktop is for viewing beautiful layout and design; to have an artistic experience where you connect with the appreciation of the aesthetics they present to you. Consumption of content on your phone is for when you're taking a shit. They are not the same. Design for desktop first. Make it beautiful. Fuck those neanderthals on their phones. Give them a few boxes with text and a button

[@Dani_Krossing]

Well it’s really not that straightforward. It all depends on the purpose and context of a website, and who you are targeting with it. 🙂 It should never be “browser vs mobile first ALWAYS” discussion… it should be individually determined based on the current website. And while the iPhone may have started this philosophy, it is in NO way not relevant today. The reason this mindset came out at that time, was because the iPhone introduced the new browser functionality in phones, and made it available to the common folks. Which is STILL the case today. So it is VERY relevant to still consider a mobile first approach. 👍 But again, by considering the target group of the website first, in order to figure out if a browser first, or mobile first approach is better.

[@thirumavalavan7028]

Are you using framework for css ? If it is what framework do you use ? And where and when you use these framework in your project ? Plz Clear my doubt as soon as possible and ! Important 👨‍💻....

[@Dani_Krossing]

In this course we will not be using a framework, since it focuses on the core languages of HTML and CSS. 🙂 If you are interested in frameworks, you can always look into Bootstrap or Tailwind CSS. In regards to "when you use frameworks", you will typically see these used whenever a commercial site is created. Frameworks are here to optimize our code, speed up the production process, or make a project easier to share among multiple developers. This is also why if you go on any job site, companies require that you know specific frameworks depending on what they prefer using at that company. 🙂 Of course a framework isn't "required" whenever you wanna make a website, but it has a lot of benefits that should be considered. Any person who wanna make websites for a living SHOULD learn at least one framework.

[@AlThePal78]

then those people don't deserve to see your site lol

[@ganderson6620]

you talk too much and say nothing

[@Dani_Krossing]

Im sure there are other channels out there for you then. 🙂