HTML5

HTML Template

In this tutorial, I show you how to create a website with HTML and CSS. This HTML template provides you with a basic layout so that you can add your own look and feel.
2 Columns, Left Menu with Header & Footer

Step 1 – Add HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML Layout with Float</title>

</head>
<body>
	<main>
	  <header>Header...</header>
	  <nav>
      <ul>
        <li><a href="">Home </a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
	  <article>Article...</article>
	  <footer>Footer...</footer>
	</main>
</body>
</html>

Step 2 – Add CSS

/* Global */
* {
  box-sizing: border-box;
}
body {
    margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
/* Layout  */
main {
	width: 100%;
	}
header, footer {
	background-color: #576574;
  padding: 20px;
  font: 25px sans-serif;
  color: #fff;
  text-align: center;
	}
article, nav {
	height: 80vh;
	float: left;
	}
footer {
  clear: both;
}
article {
	width: 70%;
	}
nav {
	background-color: #cae0d0;
	width: 30%;
	}