HTML5 Schema and CSS Styling Correct?

Question

I've started my personal website with HTML5. I would like to get it review to see if I am using the correct schema.

I am looking to get feedback about the structure of HTML5 elements. I think I am overdoing some of the things in the code.

html,
body {
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 font-size: 12px;
 padding: 0;
 margin: 0;
}
a {
 cursor: pointer;
}
#container {
 margin: 0 auto;
 width: 1000px;
}
#midcontainer {
 margin: 0 auto;
 width: 1000px;
}
#midcontainer::before {
 clear: both;
}
#midcontainer::after {
 clear: both;
}
header {
 background: #ff4242;
 height: 30px;
 padding: 20px 0;
}
header span {
 color: #fff;
 float: left;
 font-size: 24px;
}
header span.your {
 font-weight: bold;
}
nav {
 line-height: 30px
}
nav ul {
 float: right;
 list-style: none;
 margin: 0;
 padding: 0;
}
nav ul li {
 display: inline;
 margin-left: 20px;
}
nav ul li a {
 color: #fff;
 text-decoration: none;
}
nav ul li a:hover {
 border-bottom: 1px solid #fff;
}
.intro {
 background: #f0f2eb;
 color: #333;
 text-align: center;
 margin-bottom: 50px;
 padding: 100px 50px;
}
.intro h2 {
 font-size: 48px;
}
.intro span {
 font-size: 32px;
 margin-top: -30px;
 margin-bottom: 20px;
 display: block;
 font-weight: bold;
}
.intro button {
 background: #f0f2eb;
 border: 2px solid #ff4242;
 font-size: 16px;
 color: #333;
 padding: 20px 30px;
 text-transform: uppercase;
}
.intro button:hover {
 background: #ff4242;
 border: 2px solid #ff4242;
 color: #fff;
}
.photography,
.code,
.graphicdesign {
 float: left;
 width: 33.3%;
 text-align: center;
}
footer {
 background: #333;
 color: #fff;
 clear: left;
 display: block;
 margin: 20px 0 0 0;
 padding: 20px 40px;
 text-align: center;
}
footer a {
 text-decoration: none;
 color: #fff;
 border-bottom: 2px solid #fff;
 padding-bottom: 3px;
}
footer ul {
 list-style: none;
}
footer ul li {
 display: inline;
 margin-right: 25px;
}
footer ul li a {
 text-decoration: none;
 color: #ff4242;
 border: none;
}

<header>
 <div id="container">
 <span class="your">YOUR</span><span>NAME</span>
 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About Me</a></li>
 <li><a href="#">Gallery</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Conact</a></li>
 </ul>
 </nav>
 </div>
</header>
<div class="intro">
 <h2>Who is this guy? </h2>
 <span>Dude, myth or mega designer!</span>
 <button>get to know me</button>
</div>
<div id="midcontainer">
 <div class="photography">
 <i class="fa fa-paint-brush fa-5x" aria-hidden="true"></i>
 <h3>photography</h3>
 </div>
 <div class="code">
 <i class="fa fa-code fa-5x" aria-hidden="true"></i>
 <h3>Code</h3>
 </div>
 <div class="graphicdesign">
 <i class="fa fa-camera-retro fa-5x"></i>
 <h3>Graphic Design</h3>
 </div>
</div>
<footer>
 <ul>
 <li><a href="#">Facebook</a></li>
 <li><a href="#">Twitter</a></li>
 <li><a href="#">Youtube</a></li>
 <li><a href="#">Instagram</a></li>
 </ul>
 <p>Designed by <a href="http://uname.com">your name</a></p>
</footer>

• 200_success: This page looks half finished, with missing content, empty <i> tags, and a useless <button>. What is this page for? Please state the purpose of the code — see How to Ask.
• BenC: @200_success The empty <i>s with fa-* classes are conventional usage of Font Awesome icons, but +1 to the other points.

Answer 1

Your code is basically correct, but you might want to look at a few things that have changed with HTML and CSS in the last years:

Web Fonts

font-family: Verdana, Geneva, Tahoma, sans-serif;

In the bad old days you could only use fonts in web pages that were already installed on the client system. Because theses pre-installed fonts differed from operating system to operating system, a list of similar looking fonts was specified. Here "Verdana" was typically found on windows machines, "Geneva" typically on MacOS, an "sans-serif" is a wildcard to finally use any sans serif font, if none of the named fonts are available.

Since about 2008 browsers can load fontssee history of web typography. Now you can specify exactly the font you want, and maybe add the wildcard at the end in case anything breaks. See google fonts for free fonts and for the code you need to load them.

So today you would typically write

font-family: 'Open Sans', sans-serif;

instead of the font list.

Layout

You use "float" to arrange divs side-by-side.

Since Spring 2017 you can use CSS Grid instead.

Use it to lay out the whole page on a grid. You will need fewer HTML tags and can forget about "clearfix".

Responsive Design

The Web has many different output devices. Even if we just look at screens, we have big differences in resolution and pixel density.

Your page is geared toward a screen width of 1024px. On smaller displays parts of your page will only by visibly when scrolling horizontally. On larger displays you will not use the space available in a meaningful way.

The answer to this is responsive design: start designing your page for a smartphone. Then add different CSS for larger devices using media queries.