Exercise 3: Responsive Web Design

The task in this exercise is to practice using the CSS layout techniques we’ve been looking at for the last few weeks

You should look at the CSS layouts below and attempt to build each one using as many different layout techniques as possible. You can use floats, flexbox, CSS-Grid, absolute/relative positioning, whatever methods you like. You should try to minimise the amount of CSS code required.

• As you build each version of the layout, pay attention to how difficult it is, how much code it needs, and how responsive the resulting layout is.
• Can you make the layout fully responsive?
• How many different ways can you find to build each layout?

Layout 1

Layout 2

Layout 3