title | length | tags |
---|---|---|
Responsive Layout Challenge |
css, layout, responsive |
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.
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.
Recreate the following comps using media queries to match the layouts on large, medium, and small screens,