HTML and CSS template of "Free .psd layout"

I have coded a free .psd layout for the first time. I did not make it responive because I would like to know if the code is correct.

The layout's appearance in Firefox and Chrome seems to be ok (though in Firefox there's a bit of white space), but I know sometimes your code can be incorrect even if it looks good. I don't have Photoshop so I used GIMP - that's why some graphical items look worse than their originals.



`html {
font-size: 62.5%;
}

body {
width: 1400px;
margin: 0 auto;
font-family: "Montserrat", sans-serif;
}

nav, header, main section, aside, footer {
padding-right: 230px;
padding-left: 230px;
}

body, ul, li, blockquote, p, h1, h2, h3, h4, h5, h6, .relax {
padding: 0;
margin: 0;
}

a {
text-decoration: none;
}

p, .relax ul li, .opinion, aside ul li {
font-family: "Roboto Slab", serif;
}

h1, h2, h3, h4, header p, .services p, .latest > p, .culture p, .clients p, .portfolio_btn, .learn_btn, .contact_btn {
text-align: center;
}

h1, h2, h3, h4, h5, h6, #site_nav ul li, .portfolio_btn, .learn_btn, .contact_btn, .framework a {
text-transform: uppercase;
}

#site_nav ul li a, .services p, .latest p, .culture p, .clients p, blockquote {
color: #777;
}

h2, h3, #site_nav ul li a:hover, .portfolio_btn:hover, .learn_btn:hover, .framework a:hover {
color: #222;
}

.portfolio_btn:hover, .learn_btn:hover, .contact_btn:hover {
background-color: #fff;
}

.amp, .framework a, cite, .contact_btn:hover {
color: #7cc576;
}

.portfolio_btn, .learn_btn, .next_project {
background-color: #7cc576;
}

.portfolio_btn, .learn_btn, .contact_btn, .service img, .sprocket, .framework a, .social_media a {
display: block;
}

.relax ul li, .latest, .framework ul li, .value_img, .contact_us ul li, .lposts ul li, .ltweets ul li, .social_media a {
background-repeat: no-repeat;
}

.services, .latest, .culture {
padding-top: 100px;
padding-bottom: 100px;
}

#logo {
padding-top: 40px;
padding

First of all, your HTML looks very clean and it seems that you don't use more elements then needed to achieve what you want. This is a very good thing.

Social media links

All links like ` don't have any content. Sure, one can see the icon, but what if you can't? Consider your page being presented using a screenreader or it's been visited by a search bot. In this case it's best to use the title-attribute to describe where this link is heading:



Icons

Try to reduce requests to the server. To achieve this you can put all your icons into one image sprite. Once this file is loaded all icons are served by this file - no need requesting each icon separately. Use this sprite as a background image and use background-position to place it like you want:

.service .icon-heart, .service .icon-device {
    background: transparent url('icons.png') no-repeat 0 0;
}

.service .icon-heart {
    background-position: 0 -40px;
}

.service .icon-device {
    background-position: 0 -80px;
}

To be retina- or high-density-ready double the size of your icons. If the icon is been displayed at 50 x 50px, create the image at 100 x 100px. If you use background images as described before, add the property background-size to make sure that the image is scaled properly:

background-size: 50%;

If you continue to use img-elements, set their width or height explicitly to the correct output size. This will assure that your icons look sharp not only on mobile devices, but also on computers/tablets with high density displays.

You can even take it one step further and save your icons as SVG. The premise is that they are vector based in your draft already. This will make them look sharp on any device and at any zoom level.

Outline and semantics

Your semantics look good. Keep in mind that this is a very broad and highly debatable part.

To start you can check the outline of your document. There's an online tool and even a Google Chrome extension that can help you.

You'll see some untitled sections and you might get a better understanding about the hierarchy of headings of the document. Sometimes it can get confusing, especially on long one-pagers, in which level of nesting is the part I'm working on. Maybe this helps you to enhance to document outline.

As a note: Remember that section-elements can start with h1-elements. Also, you introduce a h4 that is not below a h3 for a very important section "Ready to talk about your next project?". Maybe here's room for improvement.

Blockquote

As an advice, it may be better to place the cite-element within the blockquote as shown in this example on w3c. The footer-element in the example is optional, but none of the examples show the cite-element outside the blockquote-element. Here's another discussion about the cite and block quote´ elements on HTML5 doctor.

CSS

It's very good that you don't nest the CSS too deep and that you're using classes without a specific element.

In addition I would recommend using a CSS preprocessor like Less or Sass. With the help of a preprocessor it's easy to create and re-use mixins on multiple elements:

.text-center { text-align: center; }
h1 { .text-center; }
h2 { .text-center; }
.portfolio_btn { .text-center; }

The preprocessor will render it to something like:

h1, h2, .portfolio_btn {
    text-align: center;
}

You have written some rules, which look like this. As your site and your CSS grows, this will become unmaintainable, as you have to keep all those places in mind, where to insert the selectors for a certain rule.

With the preprocessor you can also use variables for colors, other re-useable values and keep a better eye on the hierarchy within elements etc.

Another approach is to create classes like text-center and use them in your HTML markup. This is how Bootstrap is doing a lot of things:

Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.

Head-element

Well, this is a personal preference, but as the title is the only mandatory element and some bots and APIs only fetch the first few bytes of a website I would start the head`-element like this:

    
    TreeHouse layout
    
    [all stylesheets etc. below]

StackExchange Code Review Q#140391, answer score: 5