LAYOUT

NINJA

What is a view made OF?

HTML

USE

DOCTYPE

DON'T

<html>

<body>

</body>

</html>

DO

<!DOCTYPE html>

<html>

<body>

</body>

</html>

DEFINE

ENCODING

DON'T

<html>

<head>

</head>

</html>

DO

<html>

<head>

<meta charset="UTF-8">

</head>

</html>

Always close your tags!

DON'T

<ul>

<li> first item

<li> second item

<li> third item

</ul>

DO

<ul>

<li> first item </li>

<li> second item </li>

<li> third item <li>

</ul>

KEEP TAG NAMES

IN LOWERCASE

DON'T

<DIV>

<h1>Title</h1>

</DIV>

DO

<div>

<h1>Title</h1>

</div>

USE LISTS FOR NAVIGATION

DON'T

<div>

<a href="#">Home</a>

<a href="#">Blog</a>

</div>

DO

<ul>

<li>

<a href="#">Home</a>

</li>

</ul>

USE RELEVANT

TAGS

DON'T

<span class="heading">

<strong>Title>/strong></span>

DO

<h1>Title</h1>

AVOID

DIVITIS

DON'T

<div class="container">

<div class="wrapper">

<span>Item</span>

</div>

</div>

DO

<span>Item</span>

CSS

ALWAYS PLACE

CSS LINK IN HEAD

DON'T

<body>

<link href="reset.scss">

</body>

DO

<head>

<link href="reset.scss">

</head>

USE A CSS

RESET

DON'T

<head>

<style>

* {

margin: 0;

}

</style>

</head>

DO

<head>

<link href="reset.scss">

</head>

NEVER USE

INLINE STYLES

DON'T

<p style="color: red;">

Text

</p>

DO

<p class="alert">

Text

</p>

USE

PROPER NAMING

DON'T

<span class="RED_BOX">

Alert!

</span>

DO

<span class="alert">

Alert!

</span>

ONE DECLARATION PER LINE

DON'T

span.alert, div.alert {

color: red;

}

DO

span.alert,

div.alert {

color: red;

}

USE

SHORTHAND

DON'T

div.content {

margin-top: 0;

margin-right: 0;

margin-bottom: 0;

margin-left: 0;

}

DO

div.content {

margin: 0;

}

DROP UNITS

FROM 0

DON'T

div.content {

margin: 0px;

}

DO

div.content {

margin: 0;

}

Resources

http://caniuse.com/
http://www.w3schools.com/
https://css-tricks.com/

PRACTICE