An iPhone is browsing a webpage. As you can see, the webpage is too wide for the screen. The user has to scroll up and down and left and right to see the whole page. It is so awkward!
On a bigger device like an iPad the page looks like this. Perfect! No horizontal scrolling.
Wouldn't it be great if each element on the page collapsed so that when we view the page on a smaller device, we can see everything by only scrolling up and down:
Imagine if we could divide our webpage into rows.
Inside each row are columns, like bricks in a wall.
We can view all of the columns on medium size devices or bigger.
But for small devices, the columns collapse into individual rows.
Check out this simulation to see an example.
There are some very nice frameworks which will allow us to create responsive webpages.
A very famous one is called Bootstrap.
Another one belongs to our good friend W3 Schools.
In this tutorial we will use W3 Schools. Both generally do the same things.
Download this web document to get started. Save it in your focus-10 project folder.
Go to W3 Schools. Can you find this magical line of code? It is a link to a CSS file which has loads of rules for responsive web design.
Paste it into the <head> section of focus-10.html
We put images into the columns but they are not responsive!
To make the images responsive, W3.CSS has a class called w3-image. Apply this class to each image and see what happens.
Submit your project folder as instructed by your tutor.