marshallhouston / css-layout-challenges Goto Github PK

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.

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;
}

When you have completed all the layout challenges and saved a pen for each, make a gist with links to all your CodePen solutions (also called 'pens'). In your gist include the challenge number, and a brief explanation of the approach/thinking you used to solve each layout challenge. The structure of your gist content should be written in Markdown, a simple text formatting syntax that you can use when you write a gist. Here's an example of what the structure of your gist should look like:

##### Challenge Number // this is an h5 title in Markdown
Description of approach // this is a paragraph is Markdown
[Challenge number](link to code pen here) // this is a link in Markdown.

Example:

##### Challenge 5

I used these elements and specified these styles to make this thing happen. I chose to use white text color because you can't see it if it's black. (duh). (When you write this make your actual description more meaningful...)

[Challenge 5](http://www.google.com)

Which will come out looking like this in your gist:

I used these elements and specified these styles to make this thing happen. I chose to use white text color because you can't see it if it's black. (duh). (When you write this make your actual description more meaningful...)

Challenge 5

Here is a gist to use as a template for your own gist.

• 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!