How does front-end code work?

HTML is just a nested tree structure

Each item, or "node", or "element" is contained within a parent

<table class="show-table">
    <tr>
        <td>(0,0)</td>
        <td>(1,0)</td>
    </tr>
    <tr>
        <td>(0,1)</td>
        <td>(1,1)</td>
    </tr>        
</table>

Our table

Each tag pair is just a box that we can style.

Another example

<div class="box1">
    <p>Im in a box!</p>
</div>

<div class="box1">
    <p>Im in a box!</p>
</div>

.box1 {
	background: red;
	border: 2px solid orange;
	color: black;
}

Putting the box in a 'wrapper'

<div class="box-wrapper">
    <p>Im outside of the box :)</p>
    <div class="box1">
        <p>Im in a box</p>
    </div>
</div>

Nesting boxes allows us to start building layouts

<div class="box-wrapper">
    <p>I'm outside of the box :)</p>
    <div class="box1">
        <p>I'm in a box</p>
    </div>
</div>

.box1 {
	background: red;
	border: 2px solid orange;
	color: black;
}

.box-wrapper {
	background: white;
	border: 4px red solid;
	color: blue; /*Notice what this does?*/
}

Box Model

The reason first-year dev students never get any sleep

Every 'block level' element has 3 basic layout rules.

• Padding
• Border
• Margin

Ok, I'm lying. There are a lot more than 3...

In this example, the picture is the content area of the image-box

<div class="image-box">
	<img src="images/smile-face.png">
</div>

By the way, the picture is still just a box on it's own.

It only looks round due to the transparent corners.

Give the image-box background (so we can see it)

.image-box {
	background: white;
}

Now a border and some padding

.image-box {
	background: white;
	border: 5px solid red;
	padding: 25px;
}

Margin pushes the elements around the image-box farther out

.image-box {
	background: white;
	border: 5px solid red;
	padding: 25px;
	margin: 60px;
}

Up next: floats!

.image-box{
	background: white;
	border: 5px solid red;
	padding: 25px;
	margin: 60px;

	float: left;
}

"Mobile First"

• There are over 1.2 billion mobile web users worldwide
• In the U.S., 25% of mobile Web users are mobile-only (they rarely use a desktop to access the web)

Mobile networks suck.

In short

Provide the most important content in the least amount of data.