Responsive Design Tutorial - Tips for making web sites look great on any device 

hello there, this is the only place where i learned website developing from. its only been 3 days since i started learning and i've been watching your videos day and night, i never had a hiccup i kept learning easily and made it to your last video, now i have a website which is ready to go for desktop plus mobile and tablet. thankyou for the videos i hope you're doing well, you're way of teaching is very encouraging i have to mention that.

This is genius! I can't believe how helpful it is to get quick overviews like yours, having gone through much longer lessons on everything. Thank you!

This course is awesome! I really like your energy and humor, it’s light and fun. I learned so much with you videos that is very short ❤️❤️

Awesome clip. You showed me a few things that I have been trying to figure out for years. You actually brought me back to the same level of excitement I had when I was first learning web design back in 2005, and everything was new to me and seemed magical. The only feedback I can provide is that the term, mobile-first, applies to how a site loads on a mobile device, not whether you design the theme and layout for it first. Code that pertains to the mobile version of a website should be placed first so that loads on mobile devices faster.

Hi there, just wanted to say 5 Years down the line your videos are still relevant and very informative. Thank you!

"If you don't know this CSS tag, don't worry, you're not an idiot. Well, you may be an idiot, I just don't know for sure" 🤣🤣 Awesome format to these videos, just blasting through it! Easy to figure out the details later. Perfect for beginners, very well done!

your course is like a Super HTML course. You made it Damn Easy with few videos ... I first saw your video 2 years ago.. but still I keep coming back to your videos only to re-watch any topic...

just finished the entire css/html course and built myself a relatively simple but easy-on-the-eyes website; that I plan on editing and adding things to as this course progresses. Followed along and found all of this super helpful. One thing... you assigned us homework for rounding the button early on in the course, and never followed up. On to java!

from time to time you find an actually GREAT tutorial, good job and thank you!

Thank you! after your last video, I've been looking around to figure out how to make my site responsive but it's like everyone does it a different way. even though i made progress, It's way easier understanding this coming from you.

i watched this whole tutorial and it helped me so much! thank you.

God 😭 you're so good at explaining this .. watching your video for the first time and I have learnt alot thank you ❤️

Big Thanks for taking the time to explain in great detail web development. Awesome playlist!!

Thank you SO much for this video! So easy to understand and follow. So glad I found you. ❤

Thankyou for explaining how to make websites responsive, your style of teaching is excellent,

GLORY TO GOD you're back, please don't leave for so long.. my coding heart was in pain

Thanks for the Front End content!

Thank you for this great web developing series!

Very very good and comprehensive tutorial! My website looks so much better now on mobile!

Very educational,straightforward,friendly

I very much love how you narrate

FOR YOUR COURSE I CAN BE A WEB DEVELPOER. YOU R A SOCIAL WORKER, YOU R DISTRIBUTIVE YOUR KNOWLEDGE FOR FREE OF COST, LOVE YOU VERY MUCH. YOU R MY FIRST TEACHER

loved the series, well done

Thank you for your video, I really enjoyed it and learnt quite alot from it too!

Very well explained. Thank you!

Thanks for great tutorials!

This is exactly what I needed. Thank you so much!

Thank you so much man this really2 help me a lot, thank you👍👍

thank you for useful videos , i love your "tada"s

Thanks for this. You saved me having to read 3+ hours worth of text for a mandatory 15 lines of notes lol

Thank you for not using Bootstrap

Thanks a lot for this tutorials for 1 day I make my site way different form a peace scrab with no stlying my site become realy good and great with many efects and styling thanks a lot for making tutorials again! :)

Thank you for this awesome video

Thank you for this awesome video

Fantastic video!

Keep on making such nice videos, you are very good at explaining html and css. You are truely the best webdeveloper on RU-vid.

Great techniques., thanks man.

Just so you don't my mistake : @media screen and (max-width: 715px) make sure there's space after 'and'. I spent 1.5 hours not knowing what was wrong and tearing my hair.

Super and great video and fast.Nice.

Thank you for this video! btw what is the shortcut for that bullet

Awesome.... 🔥🔥🔥🔥🔥🔥🔥

Are you going to post soon ? you're the best!!

After carefully watching you videos. A request for you. "Using wix.com corvid tutorials." Yours are so easy to follow.. and easy to learn. Boom also mentioned...

Excellent! this was so helpful. I don't know when you would see this but please kindly reply when you do. How do I download the exact logo and images you made use of? I used different logo and images but shit is kinda messed up probably cos of the difference in sizes.

Thanks again for the good content! Needed that, why people try to make "responsive design" something complicated?

with flexbox you can easy make and order to show for elements and no need to repeat menu items to hide and show

Thanks!

My takeaway from the video: "@media (max-width:)" => web first approach "@media (min-width:)" => mobile first approach (ideal)

thankyou so much

Waiting for your next lesson

very nice ty

Nice teaching

There was a time when I was free on9, I will spend time watching kdramas but this is first time..Web d is so fun..

Nice tutorials! Can you make some tutorials to convert html to wordpress?

Would you do a tailwind or Boostrap tutorial too?

May I know what are those 2 extensions bottom left on your vs code .?

Shall I learn flexbox or bootstrap or both? If both then in what order?

this was very helpful, thank you for this!! This may be too general to pinpoint but do you have any ideas why the background color changing test works for me only when I input "min-width" as opposed to your "max-width"

I tried this but it didn’t work I went with desktop first approach to test but when in minimized nothing happened I did @media min width at the top of 601px and then a @media max-width at the bottom of 400px... where am I wrong.?

Hi, is it a way to make a layout responsive to screen size (so same resolution in terms of pixels but different physical sizes) ?

Can you share your Ergodox configuration?

sir everything is great but how did I get developer tool please tell me

1) I absolutely cannot get media queries to work no matter what I do. Even starting with the intro pink and red backgrounds, it hasn't functioned. - I've made sure I'm using the right index and css files opened with the Live Server and saving after every change. - Everything in the code is color coordinated like normal, and I'm not finding any syntax that is different than yours. - Spelling/Case type all matches index vs css. I can't figure this out. (Edit) I Figured it out after coming back to it later in the day. I had: @media screen and (max-width: 715px) { header .mobile { display: inline-block; } header .desktop { display: none; } } with no empty line in between header .mobile and header .desktop. That extra return between the closing bracket - where mobile is closed and desktop begins - seems to have been the problem. Now to work on the intro example. Sometimes semantics really are just a case of letting things be and coming back later. I found it about 5 minutes into my current attempt. (End Edit) 2) F12 will show your Dev. Tools in Google Chrome. The 3-dot menu button will then let you dock it at the bottom to match the video, if you prefer that.

Hello, would it be possible to base the display of the site on aspect ratio as well?

Hey i cant find Developer tools in view /... how to find it

hiiii i have a problem while trying to make my page responsive with the @ media tag, for example to 375px, the content in my actual website completely shifts how do i fix this?

Can u also do implementing Shopify?

It wasnt working at first so i switched the pixels to 500 and it started to work

Amazing video please i can't see size of page when i turn on developer tool, someone should please reply below to help me Thanks

Some browsers like Firefox auto-adjusting those nav bars during size shrink. So I am not able know when to and adjust it wrt mobile size.please help me. 🙏

if anyone is wondering the pixel break for windows 10 is 621

thx

Video on animation in css please?

I need help. I gave my navigational text a class of mobile but when I go to the website, it still shows the duplicate navigation. A response would be appreciated!

hello im using vs studio because atom shut down and i cant find how to see the pixle size of the website. if anyone knows and could help me out that would be great.

For internet explorer, where can you see the pixel size of the window using developer tool?

while showing will u show the full source code every time, it will be helpful for us..

should i start learning from the old tutorial or the new one

It's pity that the images in your google drive are not found. Nice course though!

Hey @media query is not working on my computer. Please help.

HELP! I clicked on VIEW and there is no Developer option to use. Is this an extension I need to get? Thanx!

my visualcode app does not show the developer tools button when i press view is it different?

May i ask what editor you are using ?

Hi everyone, for the latest version of VS code, where to get the developer tool to determine the website pixel??

Your google drive links are not working locally and on codepen.io

I dont see developer tools under the view menu, did I do something wrong during install?

that @media screeen and () thing does not work at all in my pc

How do i get that pixel demention

In a project how do I decide to design for mobile first or desktop first?

I have enjoyed watching ur vids and i even tried to learn web developing myslef, but this vid is far away from the last one you did as a tutorial and im soo sad from it because i have no idea what should i do and how to continue and where to learn all the skills. :(

What do you think I should use: CSS or SASS?

it's done here? there is no next video? thank you for your work!

i could not find the developer tools in my vs code help me please thanks.

can you please send a zip file with the entire code and the images cuz I can't get the images

Finally, can u answer me this tho? How do I center a button in the center of a page, I have a simple page I want to put out.

Hey I'm on Windows and I don't have View>Developer. There is no such word as developer within my View tab. ¿How do I open the developer tools for my website?

When I do the @media, before it turns to the mobile version the last text in nav gets broken. It puts it way down and the logo is still in the midddle. And then after a bit more it turns to the mobile version. How can i fix that?

How is this different from?:

I don't have the developer tools in my view tab. Can anyone help me solve this?

I always thought there was some mechanism to make separate websites for pc and mobiles.