Skip to content

turingschool-examples/responsive-layout-challenges

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

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

About

A series of responsive layout challenges

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages