Responsive Web Design Tutorial #3 - Intro to the Viewport

Yo gang, sorry for the slight delay in getting this up.

In this Responsive design tutorial, I'll be introducing you to the viewport and how it affects how our websites look on mobile devices. The viewport on mobiles is much larger than the device itself, so that is why most websites that don't override the viewport width appear squashed on mobile screens.

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

========== Social Links ==========

[aiswaryagarlapati]

I love your videos, and how you explain everything! It's crisp and very learner friendly! :D

Great explaination. Was getting a headache trying to understand this by reading articles. Much better to just see it in action.

[RameenFallschirmjager]

Thanks for mentioning this confusing issue about mobile device res and real phone res mess. I was troubled my whole life about this! Tonight eventually I can sleep!

[mohittheanand]

Such a simple explanation. Thank you so, much.

[neerajmahapatra]

VERY GOOD THIS IS EXACTLY WHAT I WANT TO KNOW !!!

[giacomorossin]

Can responsive web design be done even if the website is not completed yet?
I mean the website has an html and css sheet with many codes but there're still lots of things to do and I don't know if future changes can damage responsive web design codes done previously

[scooble]

I'm pretty new to CSS and stuff, however, is the viewport tag actually needed if you have designed media queries that adjust to all types of mobile device screens?

[chidambaram]

Kindly clear my doubt
What is viewport actually
If I shrink the window size the content inside the webpage also gets shrinks without giving viewport .the browser automatically shrinks the content as the window shrinks (I have used all sizes in % and not used bootstrap and all but the content shrinks so tiny ) I cannot understand why we specify width=device width as the window shrinks the browser automatically reduces the width to the device
Why viewport meta tag, or it says to use bootstrap like that or what
Iam totally confused

[LadanSoodmand]

I wish Firefox had the option to choose between the devices like Chrome has up top there.

[AbhijeetDolai]

So if we override the veiwport then some portions of the website would be cut off when viewed on a mobile phone?

[TheRealFaceyNeck]

I really miss the old at the beginning. It sucks you had to take it out because it was scaring people away. :-/

[Anna-lsej]

2:16 I can't find the device, how can I find it?

[PcHabitat]

Hello, I love your videos. Im trying to create a 1 page portfolio with a single background image. The thing is that I've seen it done a million and 1 ways and Im just so confused on how to do it. Can you explain for me. Thank you.

[sami]

Nice tutorial ... just cant like the ending (hour long) bg music .... well done ...

[NishfaanNaseer]

hi net ninja, I cant access your website.. Im getting some errors

[tritonus]

i absolutly dont get it. Its the thousend tutorial for the viewport, and it just dont fit my brain. And iam into web development for years now :D. I feel so stupid :D