-
Responsive Web Design Tutorial #1
18-
Lecture1.1
-
Lecture1.2
-
Lecture1.3
-
Lecture1.4
-
Lecture1.5
-
Lecture1.6
-
Lecture1.7
-
Lecture1.8
-
Lecture1.9
-
Lecture1.10
-
Lecture1.11
-
Lecture1.12
-
Lecture1.13
-
Lecture1.14
-
Lecture1.15
-
Lecture1.16
-
Lecture1.17
-
Lecture1.18
-
Responsive Website Example
Hey gang, in this responsive web development tutorial I’ll show you an example of a responsive website (thenetninja.co.uk). And ok, ok, maybe it is not the best website on the planet :P. I’ll show you Google Developer Console tools to check how websites look on different devices and also introduce you to breakpoints.
Things You Should Know
- it is important to make Device Emulation a part of your development tools
- defining breakpoints is easily done through shrinking and expanding your page in Device Emulation
- breakpoints are defined through css media queriesEnable the browser to test whether a device supports a particular media type and desired features, like a screen that has a minimum width of 780 pixels. In response, the browser loads different CSS which changes the way the content appears. Adding support for media queries to the CSS3 spec is what m...
- it is important to understand that the HTML stays the same at the breakpoints – it is the css that changes the layout
– Created by The Net Ninja