No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images
readme.md

readme.md

title length tags
CSS Layout Challenge
css, layout, positioning

CSS 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 position HTML elements with CSS.

Getting Started

In this exercise, we'll take a series of simple comps and recreate each in CodePen. You will make the appropriate number of <div> tags with the div numbers indicated in the comps, give them a <height>, <width>, and background-color and then make them match the layout in the comp. Here's an example of what this might look like in your HTML and CSS:

Your HTML:

<div class="div1">
  div1
</div>

<div class="div2">
  div2
</div>

Your CSS:

div {
  width: 100px;
  height: 100px;
  background-color: black;
  color: white;
}
.div1 {
  float: right;
}

.div2 {
  float: left;
}

Tips:

  • Remember, we've talked about several ways to position elements on the page. These include but are not necessarily limited to display: block and display: inline-block, position: relative and position: absolute, margin, padding, and the infamous float.
  • If the layout dictates, some of the divs may be nested within other divs. Use your best judgement!
  • See how many different ways you can achieve the same result and consider the pros/cons of solution!

The Comps

Challenge 1:

challenge 1

Challenge 2:

challenge 2

Challenge 3:

challenge 3

Challenge 4:

challenge 4

Challenge 5:

challenge 5

Challenge 6:

challenge 6

Challenge 7:

challenge 7

Challenge 8:

challenge 8

Challenge 9:

challenge 9

Challenge 10:

challenge 10

Challenge 11:

challenge 11

Challenge 12:

challenge 12

Challenge 13:

challenge 13

Challenge 14:

challenge 14

Challenge 15:

challenge 15