Focus 10

responsive web design

Responsive Web Design

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.

Responsive Web Design

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.

Starter Video

Tip! do what the video does. Don't just watch it!

Set up - Part 1

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

Set up - Part 2

Download these 6 images and save them in your project folder:

   Task #1

In focus-10.html divide the document into 1 row - remember to use the <div> tag and apply the w3-row class.
Divide the row into 6 columns. Design for medium devices. Each column should have a space of 2. Hint: apply the w3-col class and the m2 class to each <div> tag.
Inside each column, insert one of the image elements. Test your result. Change the size of the browser window. Does everything look good?

responsive images

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.

Save your solution as focus-10_v1.html

   Task #2

Can you figure out how to create this layout? This time there are 2 rows.

Save your solution as focus-10_v2.html

   Task #3

Can you figure out how to create this layout? This time there are 4 rows. Guess the column widths, don't be afraid to try and then change your idea.

Save your solution as focus-10_v3.html


Submit your project folder as instructed by your tutor.


browser file tags body save h1 html h4 folder structure refresh image organisedexport embed