Creating the head – Doctype and Meta Tags
<!DOCTYPE HTML>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
You might first try to include both initial-scale and device-width. If that leads to problems in iOS or Android try removing either one of the properties.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
You might first try to include both initial-scale and device-width. If that leads to problems in iOS or Android try removing either one of the properties.
Creating the head – CSS files
In our website we will use four different CSS files. The first stylesheet is called reset.css. What it does is resetting the styling of all HTML elements so that we can start to build our own styling from scratch without having to worry about cross-browser differences. For this tutorial I used Eric Meyer’s “Reset CSS” 2.0, which you can find here.
The second stylesheet is called style.css and contains all our styling.
For Lightbox “lightbox.css”.
The last stylesheet (Google WebFonts) will let us use the fonts Open Sans and Baumans.
You might rather want to use a minifier script which automatically combines, minifies and caches all your CSS and Javascript files into one single file. One of these scripts is called minify.js
Creating the head – Javascript / jQuery files
The first script we will be using is Modernizr.js, a feature detection library for HTML5 and CSS3. It let´s you easily detect whether a browser supports a specific feature or not.
The second script we need is Respond.js, a script which enables responsive design in Internet Explorer and other browsers which don´t support CSS Media Queries.
In this tutorial we will be using CSS3 features which require the use of different prefixes to work in all browsers. In order not to have to manually define the different prefixes each time we are using a CSS3 feature we will include the script Prefix Free, which automatically creates the required prefixes and let´s us write the unprefixed CSS properties. You can download the script from here.
The last script we will need is for the responsive Image Slider SlideJS. You can download the Plug-In from here and include the “jquery.slides.min.js” into your “js” folder.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>HTML5 responsive website tutorial</title>
<link rel="stylesheet" href="reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'/>
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
<!-- include extern jQuery file but fall back to local file if extern one fails to load !-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text\/javascript" src="js\/1.7.2.jquery.min"><\/script>')</script>
<script src="lightbox/js/lightbox.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/jquery.slides.min.js"></script></head>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>HTML5 responsive website tutorial</title>
<link rel="stylesheet" href="reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'/>
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
<!-- include extern jQuery file but fall back to local file if extern one fails to load !-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text\/javascript" src="js\/1.7.2.jquery.min"><\/script>')</script>
<script src="lightbox/js/lightbox.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/jquery.slides.min.js"></script></head>
Creating the body – Introduction
Before we start coding let´s first have a look at the most important new sectioning elements in HTML5
The new section element defines a part of a website with related content. It should not be used as a generic container element or for pure styling purposes. In that case rather use a simple div.
An article defines an independent piece of content which should be able to stand alone and still make sense.
A header defines a header for a document or a section.
A footer is used for defining the footer of a document or a section.
A nav defines a set of navigation links which should be the main navigation of your website.
An aside defines a section with secondary content. If an aside is placed within an article the content should be related to that specific article. If it is placed outside an article the content should be related to the site as whole.
