Skip to content

Latest commit

 

History

History
76 lines (52 loc) · 2.06 KB

readme.md

File metadata and controls

76 lines (52 loc) · 2.06 KB
title length tags
Responsive Layout Challenge
css, layout, responsive

Responsive Layout Challenge

As a front end developer, you will often be handed comps from a designer that you then have to build. You will need to be able to take a graphic file and recreate it with code. This means that you'll have to be able to think through how you're going to get all the elements in that comp where they need to be, and that requires a solid understanding of how to build responsive layouts.

Getting Started

Clone down the repository, and cd into the directory responsive-layout-challenge.

In this exercise, we'll take a series of simple comps and recreate each locally. You will make the appropriate number of semantic tags with the correct numbers / content indicated in the comps, give them a <height>, <width>, and background-color and then make them match the layout in the comp.

The Comps

Recreate the following comps using media queries to match the layouts on large, medium, and small screens,

Responsive Layout Challenge Set 1:

challenge 1a

challenge 1b

challenge 1c

Responsive Layout Challenge Set 2:

challenge 2a

challenge 2b

challenge 2c