- A resource for web developers


How to build a HTML5 website from scratch – Part 1

GD Star Rating

Required knowledge level: intermediate

In this responsive web design tutorial we will create an awesome responsive HTML5 website starting from scratch. I tried to include as many different features as possible, so we will be dealing with a jQuery slider, CSS3 transitions and animations, CSS Media Queries and so on. This part of the tutorial will show you the HTML structure and the required scripts in a step by step tutorial. The second part will then show you how to style it using CSS3 features to create this stunning HTML5 cross-browser responsive website.

Lingulo HTML5 CSS3 Tutorial


HTML5 responsive website


Download it from GitHub7kB82065Times downloaded

Please note that this tutorial is made for people who already have an intermediate knowledge level. Some parts of the tutorial will not be described in detail as it is assumed that you know how to e.g. include a CSS file. If you have any questions you can always use the comment section and I will try to help you.

Structure of the HTML5 website

First of all let´s have a look at the basic structure of our website. Click on the image on the right side to see how our website will be arranged. I recommend to always draw a layout before starting to build a website. Having this overview of our structure will make it a lot easier to create the page.

Creating the head – Doctype and Meta Tags

Let´s begin by defining the HTML5 doctype and creating our head section with the required scripts and CSS files. The doctype declaration in HTML5 is fairly easy to remember compared to previous HTML/XHTML versions.


In our head section let´s set the charset to UTF-8 which is also easier now in HTML5.

<meta charset="UTF-8">

As we would like to create a responsive design which should work on all kind of devices and screen resolutions we need to add the viewport meta tag which defines how the website should be displayed on a device. We set the width to device-width and the initial scale to 1.0. What this does is set the width of the viewport to the width of the device and set the initial zoom level to 1.0. That way the page content will be displayed 1:1, an image with a size of 350px on a screen with 350px width would fill out the whole screen width.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Note that there are multiple different opinions about using initial-scale and width=device-width. Some people say not to use initial-scale at all as it might lead to incorrect behavior in iOS. In some cases a zoom bug occurs when rotating the device from portrait to landscape. As a result users have to manually zoom the page back out. Removing the property initial-scale might sometimes fix that bug. If it does not there is a script which disables the user’s ability to scale the page allowing the orientation change to occur properly.

However there are also people saying only to use initial-scale and not width=device-width. Raphael Goetter for example wrote in his blog post:

initial-scale=1.0 fits the viewport to the dimensions of the device (device-width and device-height values), which is a good idea because the size of the viewport fits the dimensions of the device regardless of its orientation.

width=device-width size the viewport to always corresponds to the (fixed value) width of the device, and thus is distorted in landscape orientation because que right value should be “device-height” not “device-width” in landscape (and it’s worse on iPhone5 whose device-height value is 568px, compared to its 320px device-width).

Therefore, I would rather recommend to use initial-scale alone, not associated width=device-width. Because the combination of the two is problematic, and moreover I think than even only width=device-width is problematic.

In conclustion there is no general instruction on which properties to use. 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. In case that still does not solve your problems try using the script I mentioned above until your responsive design is displayed correctly on all devices.

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. If you want you can also divide this CSS file into two and separate the basic layout styling from the rest of the stylesheet.

If you look at the preview of our website and click on one of the small images in the main content section you will see that a larger version of the image will show up on top of the page. The script we use to achieve this is called Lightbox2 and is an easy way to overlay images on top of the current page. For this tutorial you will need to download Lightbox2 and include the CSS file “lightbox.css”.

The last stylesheet (Google WebFonts) will let us use the fonts Open Sans and Baumans. To find fonts and include them into your project visit Google Web Fonts.

Please note that when using multiple CSS and Javascript files the amount of HTTP requests increases which results in longer page loading time. For the live version of your website you could combine all CSS and Javascript files into a single one. If you know that you are not going to change your CSS code again then this would be a good solution. If you however want to be able to change your CSS and JS files from time to time I would recommend not to combine the files manually as this will probably make things confusing and more difficult to look through. 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 and can be found here.

Creating the head – Javascript / jQuery files

Now that we have included the CSS files let´s add all the required scripts. As we are using HTML5 and CSS3 features we need several scripts to make the features visible in all browsers. 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. Modernizr.js also comes with html5shiv which enables HTML5 elements in Internet Explorer. To download Modernizr.js click here and be sure “html5shiv” and “Modernizr.load” are checked.

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. Click here to download it from GitHub.

To be able to use i.e. lightbox.js we also need to include the jQuery library. The best way to do this is by letting Google host your jQuery file and use a fallback in case the Google jQuery file fails to load.

For Lightbox2 we need to include the lightbox.js located inside the js folder in the lightbox directory.

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.

Your file should now look like this. Note that in the course of this tutorial we will add further code to our head section.

<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='|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=""></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>

Creating the body – Introduction

HTML5 offers several new elements which help us create more structured and accessible web pages. One of the main advantages of HTML5 is the possibility to structurize your web page and tell screen readers or search engine bots what is on a page which helps them to read only the parts they want.

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.

Each of the sectioning elements in HTML5 should almost in any case contain a heading. By giving each section a specific heading you are creating a new section in the HTML5 outline. This is important as a proper outline does not only improve accessibility but is also good for SEO. To create a correct HTML5 outline you can use the Outliner Tool. In case you see an “Untitled Section” which corresponds to a section element in your HTML code you might want to specify a heading for the section. For further information on the document outlining algorithm be sure to check out Derek Johnson´s blog post.

If you have a look at the website we will be creating you will probably think: “Didn´t he just say that we need a heading for each sectioning element? I don´t see any heading for the header, the navigation, the footer or some of the sections.”. Obviously displaying a heading for each of the sectioning elements does not really make any sense.

On the other hand we need to define headings for every section to create a proper outline. Not using sections in our document at all would somehow destroy the whole purpose of a HTML5 structured document.

A solution for this is to add headings for each section into your HTML code and then hide them with CSS. You should not hide them with display:none though as this would also remove them from the outline. Rather use the CSS property clip to hide the headings which is also the best way not to get banned by search engines for hiding content. If you would like to read more about it check out this answer.

Creating the body – Building the website structure

Let´s start creating the HTML5 elements on the basis of our layout overview (click here to open the structure image in a second tab so you can switch between tabs while coding).

The first thing we need is a header. The header will include our navigation and our logo. Inside the header we put the main heading h1 and a paragraph. The main heading could be your website´s name or logo and the paragraph a motto or phrase describing the website. Depending on whether the subheading contains the main keywords and is an important part of the site you might in some cases also use a h2 instead. Apart from the heading and the paragraph let´s also put our navigation into the header. Inside the navigation section we put an unordered list with all the navigation links as list items. Your header code should now look like this.

<h1>Lingulo HTML5</h1>
<p>A responsive website tutorial</p>
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Porfolio</a></li>
<li><a href="javascript:void(0)">About</a></li>
<li><a href="javascript:void(0)">Contact</a></li>

On the website structure image the next area below the header is called “Slider-Images”. As you can see when you look at the preview of our website this area will contain a large jQuery image slider which changes the image every 6 seconds. There are plenty of jQuery Sliders out there but in this tutorial we will use the responsive slideshow plug-in SlideJS which you should download now.

As you can see in the example files of SlideJS the Slider needs a new div called “slides” which contains the images you want to be slided. As we are going to show content boxes on top of the images we will wrap the div “slides” into a new section “container” and add the content for each image into a separate article which we call “slider_content1”, “slider_content2”, “slider_content3″… We are using IDs instead of classes here because we want to address each article with jQuery later on and need to be sure that each one appears only once on the page. The reason why we used articles for the first three sections and then a simple div for the slides is that the articles contain our independent content while the div only contains our three slider images and mainly has a styling purpose. If you are looking for royalty-free images that you can use in your web project please visit

<section class="container">
<h2 class="hidden">Lorem Ipsum</h2>
<article id="slider_content1"></article>
<article id="slider_content2"></article>
<article id="slider_content3"></article>
<div id="slides">
<img src="img/slide1.jpg" alt="Some alt text">
<img src="img/slide2.jpg" alt="Some alt text">
<img src="img/slide3.jpg" alt="Some alt text">

Now let´s add the slider content into our markup. “slider_content1” will be the content which is shown when the image “slide1.jpg” is displayed, “slider_content2” for “slide2.jpg” and so on. Inside these articles let´s add a heading, some teaser text and a read-more link. Note that we also add a heading with a class “hidden” into the section as we want to create a proper HTML5 outline. If you have problems deciding which heading to use on your website my recommendation is to try to use a heading structure with elements of the appropriate rank for the section’s nesting level. Read this article if you would like to know more about proper use of headings in sections. You´re whole code for the slider should now look like this (I added some blind text into headings and paragraphs).

<section class="container">
<h2 class="hidden">Lorem Ipsum</h2>
<article id="slider_content1">
<h3>Lorem ipsum dolor?</h3>
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik.</p>
<a class="button" href="some_page.html">Mehr lesen</a>
<article id="slider_content2">
<h3>Nulla consequat</h3>
<p>Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>
<a class="button" href="some_page.html">Mehr lesen</a>
<article id="slider_content3">
<h3>Lorem ipsum</h3>
<p>Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.</p>
<a class="button" href="some_page.html">Mehr lesen</a>
<div id="slides">
<img src="img/slide1.jpg" alt="Some alt text">
<img src="img/slide2.jpg" alt="Some alt text">
<img src="img/slide3.jpg" alt="Some alt text">

Now that we have the HTML structure of the image slider let´s move on to the next element on our structure image. As you can see the next thing to do would be the spacer. I called it spacer although it is not actually a spacer, it is just some orange part below the image slider with a short sentence and a search field. For the spacer we use a new section with the ID “spacer”. The reason I used an ID instead of a class for all the sections on the website is that I would like to be able to directly link to a specific part of the website (e.g. directly scrolls down to the spacer). Inside the spacer we put a short sentence into a new paragraph and another div with the class “search”, which contains our search form.

<section id="spacer">
<h2 class="hidden">Dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit?</p>
<div class="search">
<form action="#">
<input type="text" name="sitesearch" value="Enter a word..."/>
<input type="submit" name="start_search" class="button" value="Search"/>

You are doing great, we already have almost half of the whole HTML5 code we need. Take a look at the structure image again. You can see that from now on we have almost only “articles”, which are wrapped inside containers.

Let´s continue with the next section which contains three articles with a heading and an icon next to it. The icons I used in my tutorial are from Visualpharm and can be found here. Also add a heading h3 and a paragraph p with some text to the articles. The br class=”clear” is used to clear the floating of the three articles which we will add into our CSS file in the next part of this tutorial.

<section id="boxcontent">
<h2 class="hidden">Adipiscing</h2>
<img src="img/some_icon.png" alt="alt text"/>
<h3>Lorem ipsum</h3>
Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen.</p>
<img src="img/some_icon.png" alt="alt text"/>
Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen...</p>
<img src="img/some_icon.png" alt="alt text"/>
<h3>Dolor sit amet</h3>
Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</p>
<br class="clear"/>

Now let´s create our next section again with a h2 heading and four articles in it. Inside the articles we put a hidden heading h3 and a new HTML5 element called figure. The figure element is used in conjunction with the figcaption element to mark up images or diagrams (among others) and should be an independent part which can be moved away from the main flow of the document. Create a figure element and add an image and a figcaption to it.

If you move your mouse over the images in the website preview you will see that they will become dark and there will be a magnifier icon on top. When clicking on an image Lightbox2 will open the image up in a larger version. We have already included the Lightbox2 script into our head part. To enable image resizing we now need to create an anchor around our image and give it the attribute rel=”lightbox”. The href attribute should point to the large image version.

The effect with the magnifier icon on mouse hover is created purely with CSS3 features. The HTML element used to create the half transparent black layer is a span element wrapped inside the anchor. We will style the span in the second part of this tutorial to make it invisible by default and only show it on mouse hover.

Your code for the section “four_columns” should look like this.

<section id="four_columns">
Lorem ipsum</h2>
<article class="img-item">
<h3 class="hidden">Dolor sit amet</h3>
<a href="img/example-slide-1.jpg" rel="lightbox" title="Some Title">
<span class="thumb-screen"></span>
<img src="img/example-slide-1sml.jpg" alt="Some alt text"/>
Photo by: Some Name</strong>
Als es die ersten Hügel des Kursivgebirges erklommen hatte
<article class="img-item">
<h3 class="hidden">Sit Amet</h3>
<a href="img/example-slide-2.jpg" rel="lightbox" title="Some Title">
<span class="thumb-screen"></span>
<img src="img/example-slide-2sml.jpg" alt="Some alt text"/>
Photo by: Some Name</strong>
warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen
<article class="img-item">
<h3 class="hidden">Dolor Sit</h3>
<a href="img/example-slide-3.jpg" rel="lightbox" title="Some Title">
<span class="thumb-screen"></span>
<img src="img/example-slide-3sml.jpg" alt="Some alt text"/>
Photo by: Some Name</strong>
die Headline von Alphabetdorf und die Subline seiner eigenen Straße.
<article class="img-item">
<h3 class="hidden">Lorem Ipsum</h3>
<a href="img/example-slide-4.jpg" rel="lightbox" title="Some Title">
<span class="thumb-screen"></span>
<img src="img/example-slide-4sml.jpg" alt="Some alt text"/>
Photo by: Some Name</strong>
Wehmütig lief ihm eine rhetorische Frage über die Wange.
<br class="clear"/>

Next thing we need is another section with a hidden heading, an article and another section in it. The second section contains a hidden heading and two articles which each contain also a hidden heading. Give the outer section an ID, for example “text_columns” and each of the columns a class, for example “column1” and “column2”. We could of course also not use classes and address the article and section directly. The reason I like to use classes though is that it makes it easier in case you want to change the HTML code later on without having to change the CSS code.
Inside the first column put a heading h3 and a paragraph p with some text. Into the second column we will put two articles or divs depending on whether the content is relevant and independent or not. Inside each of these two wrappers add a paragraph p and an image. The images need a class “rocket” and “clock” and will be animated later on in the second part of this tutorial.

<section id="text_columns">
<h2 class="hidden">Blindtext</h2>
<article class="column1">
Dolor sit amet</h3>
<p>Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>
<p>Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten.</p>
<section class="column2">
<h3 class="hidden">Lorem Impsum</h3>
<article class="row">
<h4 class="hidden">Dolor sit</h4>
<img src="img/icon.png" width="80" class="rocket" alt="Some alt text"/>
<p>Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.</p>
<article class="row">
<h4 class="hidden">Ipsum</h4>
<img src="img/icon.png" width="80" class="clock" alt="Some alt text"/>
<p>Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht.</p>

We have already reached the footer of our website. Into the footer we are going to put not only a hidden heading and a section with three articles for the upper three columns of the footer but also another section with the ID “copyright” which we are going to position at the bottom of our footer later in the second part of this tutorial. Into the “copyright” section we add a div with the class “wrapper” which will make sure the content is centered and does not exceed the maximum width (we are going to talk about that in the second part more detailed). The reason we are using a div here instead of an article is that in this case all we need is a container for styling purposes, there is no actual related and independent content inside. Into the “wrapper” div we put a copyright note as blank text and another div with the class “social” which contains all the social links.

The section which we just created at the beginning of the footer again gets a hidden heading and contains three articles with the class “column”. To the second and third article we need to assign another class so we can later on target each article separately in CSS. Add the class “midlist” to the second article and the class “rightlist” to the third one. To do so simply add a blank space after “column” and put the other class behind (<article class="column midlist">). Into the articles we need to add some content, into the first one let´s just put a heading and a text. Into the one in the middle and the one in the right also put a heading and an unordered list with a link inside each of the list items. Each link should be wrapped around an image and a span element. The span contains our text that we want to display. We are using a span to be able to position the text in any way we want and display it as a block element (more about that later).

<h2 class="hidden">Our footer</h2>
<section id="copyright">
<h3 class="hidden">Copyright notice</h3>
<div class="wrapper">
<div class="social">
<a href="javascript:void(0)"><img src="img/Social-Networks-Google-plus-icon.png" alt="google plus" width="25"/></a>
<a href="javascript:void(0)"><img src="img/Logos-Tumblr-icon.png" alt="tumblr" width="25"/></a>
<a href="javascript:void(0)"><img src="img/Logos-Youtube-icon.png" alt="youtube" width="25"/></a>
<a href="javascript:void(0)"><img src="img/Social-Networks-Bebo-icon.png" alt="bebo" width="25"/></a>
<a href="javascript:void(0)"><img src="img/Social-Networks-Xing-icon.png" alt="xing" width="25"/></a>
&copy; Copyright 2012 by <a href="">Lingulo</a>. All Rights Reserved.
<section class="wrapper">
<h3 class="hidden">Footer content</h3>
<article class="column">
<h4>Lorem ipsum</h4>
Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein.
<article class="column midlist">
<li><a href="javascript:void(0)">Die Copy warnte das Blindtextchen</a></li>
<li><a href="javascript:void(0)">Unterwegs traf es eine Copy</a></li>
<li><a href="javascript:void(0)">Doch alles Gutzureden konnte</a></li>
<li><a href="javascript:void(0)">Als es die ersten Hügel</a></li>
<article class="column rightlist">
<h4>Dolor sit amet</h4>
<li><a href="javascript:void(0)"><img src="img/example-slide-1sml.jpg" width="80" alt="some alt text"/><span>Unterwegs traf es eine Copy. Die Copy warnte.</span></a></li>
<li><a href="javascript:void(0)"><img src="img/example-slide-2sml.jpg" width="80" alt="some alt text"/><span>Doch alles Gutzureden konnte es nicht.</span></a></li>
<li><a href="javascript:void(0)"><img src="img/example-slide-3sml.jpg" width="80" alt="some alt text"/><span>Und es dann in ihre Agentur schleppten.</span></a></li>

That´s it already! Close the body tag and the html tag and we are ready with the basic structure of our webpage. To view the entire HTML code click here.

In the second part of the tutorial we are going to style our website to make it look like in the preview but we are also going to add some more HTML code when it comes to responsive design.

I hope you liked the first part of the tutorial, please feel free to tell me how you liked it in the comment section. To continue with the second (which is also the last part) of this tutorial, click here.

How to build a HTML5 website from scratch - Part 1, 8.7 out of 10 based on 1051 ratings

Hi – I’ve been working through your excellent tutorial on building a responsive website and am slowly getting there. I have a question, please: How do I increase the depth (height) of the SlidesJS
slide show? As my photos are getting cropped at the bottom. The height I am looking for is 492px
I have tried changing various numbers in your code, but can’t get anything to work.

many thanks for your help


Thank you for sharing youe know how.
In the above article you recommend to: “download Modernizr.js click here and be sure “html5shiv” and “Modernizr.load” are checked.” Neither of these items appear in their list, but rather a list of about two hundred items. Which am I to choose.
Thank you for your reply.

Please make sure you have clicked on html5shiv on the left side. Modernizr is used to determine whether a specific feature is supported by a browser. So in order to make sure every browser shows the website the way we want we need to choose every feature that we are using on our page and that might not work in some browsers (for example CSS Animations). You could then use Modernizr to determine whether a browser supports CSS animations and in case it doesn’t define a replacement animation using JavaScript.

Great Tutorial !! Lots and lots of new features and things to learn
Must be useful to all starters and advanced learners. I would name it as “Responsive Web Design for Dummies

Hi Chris! Thank you for the great tutorial! I’ve been through the entire kit and while reproducing your website I have run into a small snag. The mobile menu @ 500px is presented in its “expanded” state when reducing the browser window. I’ve tried to debug this but can’t seem to find the culprit. Any suggestions?
Again thank you for your time and effort putting this together. Exactly what I needed!

I want to publish a website is it okay to use these scripts on my website.. Website will be for commercial use.
Do i have to obtain a license for these scripts respond slider etc…

Hey neo, feel free to use this template for your website (however please don’t use it to create a theme that you will then sell on a platform like ThemeForest. Thank you!) but be sure to read the license agreement of all the used scripts (for example the slider).

Best Tutorial i’ve ever seen. the flow of things,the articulate nature ,the brevity.
Awesome Chris. Its been a lot of help to understanding the concepts.
Good work!

Did you ever run your template through HTML5, CSS3 or accessibility validators? I did and found some errors:

HTML5 Validation –

CSS3 Validation –

Accessibility Validation –
Some of the accessibility errors and warnings are understandable since the file is a template.

There are indeed some things that could be done better in terms of accessibility. However the HTML and CSS validator show rather minor errors which you could easily fix in your live version.

hello bro ,am beginner and started to create a websites from few months .and by browsing i came through your site and i found your site was quite interesting and learning how to create a professional site ..

i have one doubt u mentioned above that we have to include 4 css files in a head section and i downloaded one css file named reset.css through the link above mentioned and now i found difficult to include them because i got 2 files in a folder .. and got a confusion how to include and which file to include .. can u plz help me out in solving my problem … thanks in advance …

Thanks for your comment! When you download the whole project from GitHub you will already have all the needed CSS files in the ZIP file. There is no need for you to change any paths or add any files into a folder.

I LOVE this tutorial! Nice work man!! It was very informative. I have been searching on how to create a responsive website without having to rely on a framework like bootstrap or foundation. This is exactly what I was looking for. As a student, in web development, I find that most of the stuff I am learning comes from outside of school in tutorials like this. Keep up the great work! Thanks!

Aslo, you do not need to use the link provided to get the code. Just type reset.css meyer into google and you will find several direct links to the code and no need to register with any site or service.

Dear, I am a UI developer. I like to learn Php with wordpress from basic to you suggest me, where i can get best practice tutorials,notes,samples etc.


I hope you are having a wonderful day! I was wondering if you had another reference for the reset.css besides Eric Meyer’s “Reset CSS”? I registered with the cite and was never sent the code. Please advise!

I wanted to learn how to make a responsive design website and I found this tutorial. I learned so much and I love the way the page looks and runs. I almost have this home page finished and when I am sure that I do I will create a template from it to build the rest of my site. Thank you so much for this tutorial. I love my new website. I am not sure if they will put my URL in this post so I will type it here for anyone who wants to check it out.

Thank you so much!
I faced a problem when creating an application using labels and text boxes. When minimizing the screen, the label of second text box is shown after the first text box and second text box shown in the next line. I am start learning recently about Responsive web design. How can i solve it?

ich verstehe etwas nicht in folgender zeile:

window.jQuery || document.write(”)

(a) den gebrauch des backslashs
(b) das fehlen der extension bei “1.7.2.jquery.min”
Mein webstorm jedenfalls meckert.


Great Post to make html5 with responsive design . keep it up your good work . Really Nice Experience visiting your website . It helpful for beginners who are learning html 5 to make website responsive . Responsive Website is a really need for good webmaster to get mobile visitors .

This is an incredibly generous tutorial! thanks

I’m having difficulty with my jquery slider. The images (which are the same dimensions as yours) are not filling the width of the page. They sit in the top right hand corner about half size ?

Any ideas ?

Many thanks !


I am completely new to HTML5 and CSS3. I am interested in understanding how to create a simple responsive site with usage of images and where can I test it for different devices i.e. Mobile, tablet and Desktop (different OS as well) and for different sizes as well.

I am already working on creating the design according to your tutorial. Quite like the detailing.


Hey, thank you ! This is a great post, right now I’m starting making responsive websites and this is the kind of tutorial I was looking for ! An step by step tut on making the skeleton and later the CSS ! Are you planning to post the CSS explanation any time soon ? Thank you so much

hey Chris,

Thanks for this info. This help me doing my school works. Your tutorial help me a lot and from my simple project now, i still did not foud any troubls.
I will implement this on complex project soon, i’ll be back here if i found any difficult.


Hallo Chris,

eine tolle Anleitung.

Hab ein Problem entdeckt beim Testen mit iPad mini 2 Retina unter iOS 8.1.3.

Im Hochformat kann man Deine Demo-Seite (und die heruntergeladene) nach links und rechts über den Rand hinaus wegschieben, beim hochscrollen “eiert” die Seite daher hin- und her.
Im Querformat ist alles ok.

Woran könnte es liegen?

Es wurde ja schon ein paar Mal angesprochen – die Seite ist ja nicht voll responsive.
Hast Du schon Zeit für das weitere Tutorial finden können?
Wäre es mit der Umsetzung Deines Scriptes von den bisher absoluten Angaben (px etc) in relative Angaben getan?

Viele Grüße,

Hallo Uli,

danke für Deinen Kommentar! Komisch, ich habe es gerade auf einem iPad mini 2 Retina unter iOS 8 getestet, bei mir scheint es keine Probleme zu geben. Welchen Browser nutzt Du denn, Safari?
Ich habe schon länger geplant ein Video-Tutorial zu machen, in dem ich eine responsive Webseite mit Bootstrap erstelle. Leider bin ich momentan aber noch mit meiner Bachelorarbeit beschäftigt und finde daher keine Zeit :-/ kann also noch etwas dauern…

Wäre es mit der Umsetzung Deines Scriptes von den bisher absoluten Angaben (px etc) in relative Angaben getan?

Im Prinzip ja :) außerdem würde man bei den Schriftgrößen eher vermeiden px-Angaben zu nutzen, sondern eher mit em, rem oder vw arbeiten.

Viele Grüße


Ich lese an vielen Stellen, dass diese “neuen” Elemente der outline nicht richtig unterstützt würden, zumindest nicht von Screen-readern (browser support scheint ja schon seit langem grün:

Vielleicht ein Wort zur Verbreitung und dazu, wie sich deiner Erfahrung nach die Elemente mit Barrierefreiheit vertragen? Das wäre super

In der Tat werden die neuen HTML5-Elemente nicht von allen Browsern unterstützt (vor allem ältere IE-Versionen). Aus diesem Grund ist es ratsam einen Polyfill wie html5shiv zu nutzen, der diese Elemente auch in älteren Browsern darstellbar macht.
Ich denke, dass die Bedeutung von sinnvoll strukturierten Webseiten – auch fürs Ranking von Suchmaschinen – immer mehr zunehmen wird. Anstatt nur div-Elemente für Bereiche der Webseite zu nutzen, kann man mit Elementen wie section, article, footer, header, main, aside usw. Webseiten sinnvoll strukturieren. Das ist nicht nur für Screen Reader sehr praktisch, sondern hilft auch Google zu erkennen, wo sich relevanter Content befindet.

Viele Grüße


Hallo Chris!

Danke für die tolle Einführung.
Zwei Dinge noch:
Mir ist bei deiner Vorschau aufgefallen, dass lightbox das Image nicht automatisch verkleinert wenn ich die Browsergröße verändere. Kann man in deinem Bsp. auch mit Highslide (Js) arbeiten?
Welche Responsiv-Lösung brauche ich, wenn ich ein Pulldownmenü verwenden möchte, das sich automatisch an die Bildschirmgröße anpasst?

Ich zitiere mal pixelschubser: “Sieht aus wie das nützlichste Tutorial für Responsive Webdesign in deutscher Sprache.
Einfach toll an sowas praktisch herangehen zu können ohne pure graue Theorie….”

Danke für dieses großartige Tutorial:))


Hallo. Vielen Dank für die tolle Erklärung. Eine Frage habe ich noch:
Für den Slider sind drei Bilder angedacht. Gesteuert wird der Text-Inhalt jeweils mit slider_content1 bis 3. Ich möchte aber vier Bilder haben. Dazu habe ich im Style “slider_content4” eingebettet und im HTML eingesetzt und mit einem Bild erweitert. Alles prima – Bild taucht auf – content4 taucht auf – allerdings fadet content4 nicht aus – sondern bleibt stehen – auch wenn es wieder von vorn losgeht. Ich habe jetzt alles schon 10x geprüft, aber ich finde keinen Fehler.

Hallo Chris,
Welchen Code muss ich eingeben damit die Suchmaschine funktioniert. Wenn ich in die Suchmaschine ein Wort für einen Artikel eingebe und dann suchen lasse tut sich nichts. Falls das ganze funktionieren sollte, sollte die Seite zu den gesuchten Artikel springen. Ich weiß leider nicht wie das gehen soll mit dem #Spacer und so.

Vielleicht kannst Du mir weiterhelfen?

Yes, I tried using images of all sizes. The code seems to use only the top 1/2 of any image I use if I leave the container width on auto, and stretches the images to fill the area. It’s better, but not perfect if I comment out the javascript at the top of the .html and use size the container in the .css sheet. Guess I need to get new photos and size them all the same…

I have appreciated this tutorial and how to make a responsive site and for the most part I’m able to follow along. However, the biggest issue I’m having is sizing the photos in the slideshow. How do I size the photos so they aren’t stretched and only show the top of the photo?

Thanks so much.

Hi, I think I found a small mistake in the code.
In the German version of the footer-code instead of closing the first section you closed a third div-element which is not existing.

Or am I wrong?

Hey Chris, nice job u did there! Learned a lot working myself through your tutorials.

As I got now an index page, how would I implement loading content pages like “about” or “contact”? (And reuse header and footer without reloading) What would be good practice for a rather small website?

I tried using ajax and loading the content in a div, but somehow parts of the styling get lost ;O Well most of the style.css is used but for example, the specs for an image I implemented are not taken.

Anyway, Thanks for your effort!

Excellent tutorial, I know you said intermediate, I am a kind of beginner and I am finding that I am able to figure out missing steps by researching and reading. It is taking a long time but I am learning so much along the way. I am sure that I will make mistakes, but each and every one will be a learning experience. I am going to put together a test for myself on each step of the tutorial to make sure that I understand the purpose behind every aspect, in addition I plan on customizing the site and adding to it…Anyways, thanks so much!

I’m using Joomla, and you helped me very much! The reset css file helps me to surpress the annoying preset css styling from Joomla.

Also your explanation is clear and understandable and your tips and advices are generally very helpful.

Keep the good work up :)

Thanks for writing such an awesome tutorial. I just had a query regarding media attribute in link tag.

In the 2nd line of your Head Tag, you used “screen” as a value for media attribute. While according to this site, “screen” is the default value for media. So there is actually no need to assign the screen value to media attribute because it is already given by default. Am I right?

Also what about device-width? Do we have to assign any value to it or it will be set automatically according to the device? Is it something already built-in ?


very easy and readable ! keep it up and publish websites like this and you will gain name and fame and donation also !. Regards ! …………………………

Thank you ! Mr.Chris, This is a great post.
Intermediate Web Designers confusing how to use HTML5 elements into making webpage. This Article Helpful to all intermediate level. Thanks for your effort to Published this Article Mr.Chris..!

I came through this tutorial , I found it quite good for beginner in responsive web design. I just want to know that the difference between ordinary web design (using HTML 4) and responsive web design lies only in creating head section of the page?
Also whether is it possible to create Responsive Web Design using HTML4?
Lastly , please tell me what is the basic difference between ordinary web design and Responsive Web Design in terms of Coding , although I know it very well theoretically?
Is it only lies in Head section of the page while including CSS and JS?

Thanks in advance..!!

Thank you for your comment! Although responsive web design can be done with HTML 4, the W3C highly encourages every web designer to use HTML 5 to create responsive websites. You are right that the difference between responsive and non-responsive websites is not too big looking at the HTML code. The main part of creating responsive websites is adjusting the CSS code. Other than that you also need to keep in mind that responsive websites are mostly made for mobile visitors so you would need to improve page loading time even more than you would for an ordinary website.

I have a question regarding the resizing properties. In the tag I inserted an image instead of words. Is it possible to keep the image from sliding off to the left when the window is shrunk down?

Currently the logo looks fine but when you resize a window smaller, it slides to the left instead of losing space on the right as the window shrinks.


Really thanks about article… I have visited many sites, but did not saw article’s like this. Important things described here in a simple manner. This is what can help someone while building website using html5.

Thank you for the promised advanced tutorial on RWD using Bootstrap, etc. No doubt, you will include the alternative menu you promised earlier.

Let me use this medium to wish you the best of luck in your studies. I pray you come off with flying colors in your exams.


Thank you too for your willingness to impart knowledge on RWD to those desperately seeking it. Chris has already indicated that he is very busy at the moment and that he welcomes a joint effort on a blog post on the subject. So, do you care writing a guest post on RWD, including for example, some of the improvements you mentioned in your earlier comment? I can’t wait to read it. I’d also like to know how to create, for instance, the kind of border and the slider on the website

Best regards, my generous learned professors! I’m counting on you.

@Umukoro, B. K.

If Chris like it, we can do it. I also work as a lecturer and give seminars for RWD. There is a lot I can tell you, but I don’t want to spam this comment function. Just tell me, what you’d like to know and where I should post it…

Best regards


I am planning on writing sort of an advanced tutorial on RWD for people who have worked through this tutorial and want to create an entirely responsive website using Bootstrap or a similar framework. Since I am very busy at the moment finishing my studies I could need some help. So if you would like we could write a blog post together :)

I will get in contact with you when I have further planning.

I can’t thank you enough for how much you have taught me with this post and others on this great site. These skills must have cost and taken you a lot of time to acquire, yet, you freely share them with others. I cherish people like you who do not hold back on sharing important information like this with others. Many would rather keep it all to themselves.

Keep up the good work bro. More power to your elbow.

@@Magic: I learned from your constructive criticism too. Thanks. However, why not ‘participate’ by “writing your own article and show others what you know”, as Chris suggested on the Participate page above? I believe you two will make a great team and the world will, without doubt, remember you for your efforts.

As for Chris, his name is already engraved in gold in my heart because his posts have unraveled what had, before now, stood a distressing mystery to me.

This is great work, but this website isn’t responvise. It’s just adaptive, because its just breaks at certain breakpoints and if you scale it the width of all container stays the same (until it breaks), because they are in pixels. In real responsive design the are no fixed pixels (only %, em, rem). Also the font-size is in pixels, which is not responsive either. Images have fixed pixels, too and do not scale and icons are bitmaps not vectors. So, don’t get me wrong. This is very good work, but it can be improved.

Thank you for your comment, you are right the tutorial is rather about creating an adaptive site, however I used “responsive” as umbrella term for a website that scales with the device width. I might continue the tutorial in the future to show how to build a website with a fluid grid and adapting font sizes.

Thanks again and best regards!

Wonderful tutorial I am learning lots from you, however I’m really stuck on the slider. All my code is identical to yours but the pictures are 1600 *400px and they either disapear or appear one after the other.

It also gets rid of my nav bar and pushes my header over sideways.
It will not work for me, the pictures keep disappearing. How can I contact you to send a screen shot?

Thank you!

First i want to thank you for this amazing tutorial. I have learnt so much from this. God bless you. Just wanted to know how you managed to superimpose your preview website on the different screens of desktop, tablet and mobile on the image above? Have you used a photo editing software or there are some platforms for doing this? Ich freue mich auf deine Antwort.

It was time to update my website. Found your tutorial and knew it would be right for me. Was easy to follow. I learned a lot. So much more clean and modern than my previous site. Thank you so much.

Thank you so much, this way of explanation is very helpful to all developers or beginners new to HTML5 with Responsive web design approch. No one will demonstrate like this. Good work :)

Thanks so much for a great tutorials. I was really looking for something like this and bam i got right into you. I am from Ghana and i say your work is really good.

Hey Chris,

thank you so much for this great tutorial! It is just brilliant! :-) First time I understand a tutorial so quickly!

I have on little question though: how to you add an arrow before each item of the list in column midlist of the footer?

I tried to modify this line in the CSS file (L. 446) but it is does not work:
background:url(img/arrowright2.png) left 6px no-repeat;

Is there a trick somewhere?

Thank you so much again!

Hi, great tutorial. There seems to be a tag mistake in the footer:

has no closure and a has no starter.


PS sorry for the bogus emailaddress. 😉

Hi Chris,

Any news yet on the alternative nav / responsive menu for mobile you mention, this is eagerly awaited. HTML5 is new to me and I have found your tutorial a valuable learning tool.

Kind regards, John

Very good article indeed, actually lots of details, looking forward for the second part since i want to dig more into the very details about a website being responsive, this one was a very good HTML5 tutorial.

Can you ping me an email when you upload part 2?


This somewhat hard to learn all of those, I personally write this comment maybe my invented plugin will help others to make their websites an instant responsive.

Thanks for this post Chris.

Thank you for providing such a fantastic gift. I changed the design a little bit to suit my circumstances and was happy with the design – Today I noticed that the ‘slider text box’ has spanned across the browser width, thus covering the slider image.

I checked your example site and the same thing has happened. I’m using IE11 to view the site… wondering if IE did an update that has affected the design and how I can restrict the width of the slider text box?

Wonderful resource! I’ll be telling everyone about your tutorials. Thanks.

Thanks Chris!!! That in fact answers my question.
Going through the Part -II now and I’m loving it. Maybe more questions later… :)

Thanks a ton!!!

Thank you. I have the code mostly worked out and this is on my website now (linked to this site in the footer). I still need to figure out how to get more than 3 pages into the slider. Maybe you could do a 3rd tutorial? Yep. I’m greedy :)

thank you!!! I am redeveloping my website, and this tutorial has taught me more than a semester’s web design class did!

Is there any way to get more than 3 slides on the slider? Wait wait. I should find out in Part 2!

Please explain the below code:

window.jQuery || document.write(”)



Hi Chris,
I have just gone thru the Part I and found it simply brilliant!!!
Although I haven’t read the other comments, just wanted to understand why have you mentioned classes for some sections and ids for the other sections. Example: ,

Thanks a ton!!! I’m just getting ready for the Part II now

Hey Roland,

thank you for your comment! Please use jsFiddle or another service to share your code since we can not see it.

For the classes and IDs you could say that whenever it is not necessary to use an ID rather use a class. A reason for using an ID can be for example to get an element in JavaScript or to be able to scroll to a specific part on your website by simply adding #nameOfID to the URL.

Thanck you so much for this so precious gift !
it’s really grateful helping people.

I have a unique remark about this instruction :

window.jQuery || document.write(”)

doe’s we need to put the extension file for the 1.7.2.jquery.min.js package ?
or you just forgot it ?

Hi Chris,

Any news yet on the alternative nav / responsive menu for mobile you mention, this is eagerly awaited. HTML5 is new to me and I have found your tutorial a valuable learning tool.

Kind regards, John

Nice tuitorial for responsive web design.But when an image is clicked the light box plugin pop up the image but i cannot see the cancel button of the right side of image in smart phone .Could you please suggest me how can i address this issue?

Thank you so much for the work you have put into sharing this. It’s fantastic. I’m just wondering whether you might be willing to develop the responsive navigation a bit further with some tutorial notes? I tried to do this with a typical ‘3 bar’ menu icon that everyone seems to use on responsive sites using media queries and jQuery slideToggle() but it all went wrong on me.

An excellent set of tutorials, well structured and easy to follow, best I seen on the web. One question I have which I see others have posted, you mention an alternative nav for mobile and a better solution than selection box. Have you published details about, looked but cannot locate any reference to this. Your comments would be appreciated.

Das Tutorial hat mir sehr weiter geholfen! Danke schön! Es ist ein sehr guter Ein- und Umstieg auf HTML5!

Darf man das Layout, was hier erstellt wird, auch für seine eigene Homepage benutzen? Also wenn man die Seite online stellt? Das soll nur eine Frage sein und nicht heißen, dass ich es machen werde!

Dennoch gutes Tutorial, werde diese Seite weiter im Auge behalten. Sie müssen mir hier nicht antworten, sondern können es auch stattdessen per E-Mail machen, wenn Sie möchten!

Liebe Grüße

Jessica H.

Hey, thank you ! This is a great post, right now I’m starting making responsive websites and this is the kind of tutorial I was looking for !

Can you please suggest me which tool is best to create Responsive website? As I am confused between Notepad++ and Adobe Dreamweaver!

Thank you so much !

It doesn´t really matter whether you use Notepad++ or Dreamweaver. Dreamweaver however offers some more functions, for example you can easily create floating layouts. I personally use Sublime Text because it makes coding so much faster and has lots of cool features. If you would like to be able to see what your website looks like directly from inside the program I would suggest you use Dreamweaver but if you are coding everything by hand you could use any program.

Thanks for tht tutorial!

I look at the demo website, i love it!!
I love the go to top button, you have on the demo. But i didnt find it on the tutorial. How can i make it? I like it only appear when not on the top section of the website.

Chris, great tutorial! Very well-written and I appreciate that we can download the whole thing to see how it all works. However, I have a problem – when I unzip the files and preview the sample website, the whole thing looks messed up. :( I thought maybe the file I downloaded was corrupted or something so I tried again but I just can’t get the preview to look correctly. What do I have to do to get the sample website working?

I think this is way too over my head, LOL! Do you think it would be better if I start with the absolute basics? What do you think of beginner tutorials like these?:


Would you recommend I start with those first as a complete beginner and then move on to your tutorial?

Hey Alanna,

thanks for your comment. You will have to follow the instructions inside the index.html file at the very top in order to make the website work. I think that my tutorial is not made for complete beginners, so I would rather look for more basic tutorials like the ones you posted or this one.

Best regards

Gracias por todo amigo!!! he aprendido muchísimo de tu tutorial!!! mucha suerte en todos tus proyectos!!!.. That phrase is in Spanish and I want to say from Venezuela: “Thanks a lot my friend.. I have learnt so much with this tutorial.. good luck in all your projects!!!!

hey thank for all your effort i wanted to ask about the minifier i downloaded the file but i didn’t find inside it minify.js how do you get it and how i could use it
thanks again

can you explain how do i get the Respond.min.js file from the location u have mention. there are lot of files there. i pressed the download zip button on the right hand side. then i unziped to see it. it has many files

can u explain which one is the correct file

Thanks for this tutorial.
Only regret is that slider is not fully responsive on small screen resolutions (tried by resizing browser). Here it vanishes while on it always stays visible (and adapted) in all browser sizes.
Did not find the trick yet.

First – I called you Paul for some reason in my last comment. Thank you Chris for this tutorial.

Second – I figured out my two minor problems, but I’m still stuck on the animations of the rocket and clock. My CSS code for these is the same as yours. Hovering over the rocket, it stays in place and fades away. Hovering over the clock, it doesn’t do anything.

Ich habe den ersten Teil dieses tollen Tutorial durchgearbeitet,aber beim 2. Teil muss ich leider passen(kann kein Englisch)
Muss ich eben warten bis du die Zeit gefunden hast es zu übersetzen. Trotzdem erstmal *Herzlichen Dank* und weiterhin viel Erfolg
LG RoseMarie

Hi Chris,

Nice guide — however I tried to download your template in the ZIP (several times) and the images and js folders are empty — along with various other things — so the index file is broken.

Hey Kevan,

due to copyright reasons I can not offer images or JS files for download which I do not have the rights for. In the index.html file however there is an exact instuction what you need to do and I think it doesn´t take too much time to follow these steps. :)

Best regards

Lieber Chris,

erstmal danke für das Tutorial! Hat mir sehr viel geholfen :) Ein Problem hab ich aber: Die Bilder in meinem Slider werden irgendwie bläulich… Ich hab aber leider noch nicht den Ort gefunden, wo ich das ausschalten kann, dass alles eingefäbrt wird – kannst du mir da helfen?

Danke im Voraus!


Hi thank you for the tutorial. I was trying to make my own website, however, when I was writing the style sheet, i am unable to make the in spacer looks like the same as in your sample page.

When I make the browser smaller, the content in disappeared, I understand that it is because of margin-left: -450px, that’s why when i make the browser smaller, it disappeared, however, why in your sample site, the word move along with the browser? in the spacer section.

nice tutorial..
i try to download your sample website tutorial but after i download and preview your sample web, it become disordered.. what’s wrong in the sample? and what i have to do with disorder sample website? thans a lot..hope you want to answer my question…

Nice Blog to learn a responsive layout as well as HTML5. Thank you very much for this great tutorial.

Can I have a link of your another tutorial to learn “How to make a responsive wordpress theme” ??

Thanks in Advance

Sehr gutes Tutorial mit .zip-File zum Schnell-Lernen!

Hab mich anfangs über die fehlenden css/js-Files gewundert, dann aber deinen Kommentar gelesen und in der index.php nachgeschaut.

Hoffe du findest noch Zeit und Kraft Teil 2 zu übersetzen 😉

PS: Guten Rutsch!

Gruß Micha

I’m having a lot of trouble trying to get the image slider to work. For some reason the image is coming up really small (even though i sized the images 1600 x 401px, like the images you are using). Ive been going through the script back and forth and i can’t see why it’s doing that. I tried changing the height for the script below, but that only adds more space between the image and the next section , it does not increase the image size. Any idea on how this could be fixed? Thanks!

$(function() {
height: 235, <———— (been changing this but it doesnt do anything to image size)
navigation: false,

I am coming back to web design from waaaaaay back – HTML and css has changed! For the better IMHO and I am having a good time becoming reacquainted with coding.

This is a great tutorial – there are things I am still ignorant about but I know it will get easier as I keep going.

Thank you!


vielen Dank für dieses super Tutorial.
Ich habe jetzt denn ersten Teil durchgearbeitet und würde denn zweiten Teil gerne beginnen, leider sind meine englisch Kenntnisse schlecht.
Wie hoch sind denn die Chancen das es denn zweiten Teil auf deutsch geben wird?

MFG Matthias

Hallo Matthias,

ich bin momentan recht beschäftigt, versuche aber mein Bestes das Tutorial auch auf Deutsch anbieten zu können. Ich denke aber, dass es aufgrund des Arbeitsaufwands noch einige Zeit dauern kann.

Have you checked your own preview?

If you resize the window to test it… all sorts of problems occur in Chrome and FF.

horizontal scroll bar comes on (which it never should)
the copyright text pushes below the footer and leaves a bit of white
the top button (at the bottom) covers up the social links
the thumbnails (middle size) are not center aligned which looks wrong
the lightbox doesn’t resize at smaller sizes so you can’t see the photo

Could you please tell me exactly which browser version you are using? Is JavaScript activated in your browser? I know about the issue with LightBox though so you might want use a different plugin instead.

First off, I like the way you present and explain information. So, thanks. I’m halfway through my attempt at rolling this stuff in to a wordpress theme.

In the Footer section, shouldn’t the third down actually be a ?

( Closing the copyright section )

I think what he means is that in the example code of the footer in the first you are closing off with 3 ‘s while it should be 2 and then offcourse close the section by .

Cheers and thanks for this great tutorial :-)

Hej Chris,
this is a great tutorial. Thanx for that. I’ve just finished the first part and looking forward to style the website right now :)

I guess what Tobias meant is the section within the footer with the id copyright. You close the section part in your code as a div:

[section copyright]
[/div] <== must be [/section]
[section wrapper]

Best regards :)

Hi guys! i have created a framework that allow you to create a responsive site fast and easy with just clicking buttons or if you want you can add your html :).. you can create project, import, export projects or obtain the html that you can use for your site :).. tell me what you think about that! :D.. sorry if I was wrong to write in English :)

First off: this is a very helpful and all over great tutorial, but…


1) I really apreciate all the JS problem-solver-scripts you mention throughout the tutorial (pre fix free, modernizr, respond master etc)…

But as I tried deactivating a few things, I came to the realization that it totally wouldn’t affect the responsiveness of the website we’ve just built.

I’v deleted all the JS (except the ones needed for the slider), deleted the “viewport” decleration and also deleted all “@media” stuff from the CSS file…

…and the Website STILL stays as responsive as before I’ve deleted all that stuff from the code.

I’ve only tested this on Firefox 25 and Internet Explorer 11 (maybe respond-master will have an effect on older browsers…)…

How can this be?
Shouldn’t all of this JS and CSS at least have some effect on the responsiveness?
What is going on here?

This is the great tutorial I ever Seen, actually i am new in web developing and wonder to learn more like this kinds, Thank you for very much for such a wonderful contribution, highly appreciated! I already bookmarked your side.. Well done!! Hat off You!!

Hi there, awesome tutorial, very clean and clear.
Just one question… I had some slides that are shorter in height than the one u used. Changing theslides produces a blank space betewen “slides” and “spacer”. I guess that the container height diference causes that to happen, but it´s seems to be fixed by some js function?


Thank you! You would need to change the “height” value in our jQuery function. Check out the part “Creating the JavaScript – Coding the slider content” so you know which function I am talking about.

I like your tut. alot, but I have one question. Can you recommend me a books, or online tut., for beginners and than something for intermediate level? Please, send it to my email, if you dont want to make that a public on your website.

Tnx for answering so fast, Chris. HTML, CSS, JavaScript, recommend me something for beginning and something for intermediate level? . When it comes to PHP, should I start from beginning with OOP, or first I need to learn procedural? , book, tutorial?

I am trying to implement it, One thing would like to know, is there any editor that shows exactly in view in seperate mode. Rightnow, Me using dreamweaver and when I put open the index.html file. It’s show text in different langauge like : “Consectetuer Der große Oxmox riet ihr davon a” and all the boxes are messup in there unless I do coding and go through all coding. Sorry if this is unprofessional question. Just too new with html5. Thanks

I am new to html5 and this tutorial is very helpful, however. There is missing files like JS and images that are missing in downloadable link. I know that we can place ours but It would be much helpful if we could have image and js slide show you are using for the view as well.

Hey Asim,

I can understand your concern but the problem is that I can not just offer images or JS files for download which I do not have the rights for. In the index.html file however there is an exact instuction what you need to do and I think it doesn´t take too much time to follow these steps. :)

Thank you so much for this!! Quick question what if I want the text and button that goes on top of the slider to be on the right hand side? I am trying everything and it will not move past a certain point. Thank you again this rocks!

If you want the content boxes to be on the right side simply change the rule for “#slider_content1, #slider_content2, #slider_content3” by removing the “left” property and replacing it with “right”. That way the boxes will be 15% from the right border.


Amazing tutorial I got through the html part starting css tomorrow. I would like to state that I’m only a beginner so these might sound a litte naive.

Why put copyright with socials at the top of the footer section is there a reason? Is there a diffrence if I just put the columns above the copyright?

In the footer copyright section you got 3 tags but only 2 that open them? Why is that?

And why no tags in the footer column_rightside or the column after tag? In the copyright you didn’t use the why is that?

Whats the diffrence between figcaption and is there any reason to use figcaption in a figure instead of ?

Sorry for these but they have moved my curosity. Hope you will find the time to answer.

Good Stuff Mate

Hi Chris,

Thanks for the awesome tutorial! I’m having a bit of trouble with the slider content buttons that fade in and out each pagination. I have added more images in the slides div and have updated the css file to include #slider_content4 through 15 with their respective h2, h3, p, etc. However, on the 4th slide, the slider content button sticks and the 5th slider content overlaps the 4th, and each subsequent slider content overlaps the previous one, so you end up with a bunch of them on top of another. This doesn’t reset when it gets back to the first slide either. Any ideas on what the issue could be?

Thanks for the help, Chris! I can’t wait for part two of this tutorial to come out!

Hey Zahid,

thank you for your comment! The only reason that I could think of is that you didn´t add “slider_content4”, “slider_content5″… into the “start” callback in our “slidejs” function. If you don´t add all the slider_contents there then they will not fade out when the slides change. Be sure to check out the second part of my tutorial where I am currently adding information on how to do the JavaScript part and add additional features.


For couple of weeks now i’m browsing all over the internet for 1 nice tutorial on how to go from PSD to HTML5. All i’m able to find are people who use grid960. However, I rly don’t like to use that as it takes away a big part of my freedom! I was rly wondering how i should get started. I’ve done it before many times…but not in HTML5. Could you give me some pointers?


Sieht aus wie das nützlichste Tutorial für Responsive Webdesign in deutscher Sprache.
Einfach toll an sowas praktisch herangehen zu können ohne pure graue Theorie.

Werde die Seite bookmarken.

2.Teil soon, i hope :)

I’m new to HTML5 and CSS3 but your website and this tutorial has provided me with a great starting block.

Very useful resource and very much appreciated.

Many thanks and keep up the very good work.

I’m fairly new at this and love your tutorial. First one I understand haha.

I do have 1 question though. Is it possible to block the image slideshow (slide1,slide2,slide3) and give it a static background, but keep the slider_conten1/2/3 sliding?

Thank you! Yes it is possible but in that case you would rather not use the Slides jQuery-Plugin but more likely put a static image in the background and then set a timeout with jQuery in which the slider content would change every for example 5 seconds. To see an example check this answer out:

Feel free to add further questions if you have any :)

Hi Chris, sorry to be a nuisance, but how are you getting on with part 2 to your series on building an html5 website from scratch?
I am really looking forward to the second part, as part 1 was so useful!
Understanding how the css you’ve assembled fits in with the html we’ve been through so far will be really helpful, and I think I can speak for all your readers when I say it will be really appreciated!
Thanks v. much for the tutorials you’ve provided so far and all the best,

Hey Daniel, I am sorry for the delay of part 2 of the tutorial. I am currently in the exam stage of my studies which require a lot of time. I have finished about 80% of the second part and will really try to finish it within the next week.

Best regards,

Realy good tutorial . you have tried to explain every new html 5 feature and all the right additions required for a cross browser ,cross device html 5 css3 website. Thanks a lot.

I found this very helpful and I have been playing about with the demo script to see what I can do with it. Thanks. Looking forward to the next part.

Hey, thank you ! This is a great post, right now I’m starting making responsive websites and this is the kind of tutorial I was looking for ! An step by step tut on making the skeleton and later the CSS ! Are you planning to post the CSS explanation any time soon ? Thank you so much !

Thank you so much ! I will be checking, bookmarked this and shared ! There are many tuts online explaining concepts about responsive design but none this straight ! Keep up the good work!

I just want to say I am just all new to blogs and certainly loved you’re web-site. Almost certainly I’m going to bookmark your blog post . You amazingly have fabulous stories. Bless you for sharing your website page.

Leave a comment