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 YouTube 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 :)

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

[nnaimsanchez]

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

[yousifky]

The way you explain things.. is AWESOME ❤👌

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

[SurfingTheMentawais]

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

[henrythomas]

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

[jamespaulchibole]

Thank you, Dani, Just at the right time.

[Pareshbpatel]

An excellent tutorial that explains the basics of Responsive Web-Design. Thanks, Dani

{2023-02-12}

[tenderlyehwehwehwe]

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

[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

[SlowlyMotivate]

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

[TriumphantGideonUbuake]

BRO THIS IS THE BEST, VERY BEST AND MOST BEST
I CAN'T EVEN EXPRESS MY WORD ONN THIS GLORIOUS PIECE

[prachikesarkar]

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

[AlThePal]

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

[mattgrimaldi]

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

[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

[Sir_ekereke]

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

[oluwajomilojuajagbe]

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

[DearSadiq]

Brother you looks like 'ELON MUSK'.

[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