CSS

How to build a HTML5 website from scratch – Part 1

Google+ Pinterest LinkedIn Tumblr

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.

Preview: Check out the result
Download: Get it from GitHub


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.

<!DOCTYPE HTML>

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 click on the large “Build” button in the top right corner. Then click on “Download” next to “Build”.

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.

<!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>

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.

<header>
<h1>Lingulo HTML5</h1>
<p>A responsive website tutorial</p>
<nav>
<ul>
<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>
</ul>
</nav>
</header>

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 Open-Image.net.

<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">
</div>
</section>

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>
<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>
<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>
</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">
</div>
</section>

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. http://www.lingulo.com/tutorial-content/html5/#spacer 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"/>
</form>
</div>
</section>

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

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">
<h2>
Lorem ipsum</h2>
<article class="img-item">
<h3 class="hidden">Dolor sit amet</h3>
<figure>
<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"/>
</a>
<figcaption>
<strong>
Photo by: Some Name</strong>
Als es die ersten Hügel des Kursivgebirges erklommen hatte
</figcaption>
</figure>
</article>
<article class="img-item">
<h3 class="hidden">Sit Amet</h3>
<figure>
<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"/>
</a>
<figcaption>
<strong>
Photo by: Some Name</strong>
warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen
</figcaption>
</figure>
</article>
<article class="img-item">
<h3 class="hidden">Dolor Sit</h3>
<figure>
<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"/>
</a>
<figcaption>
<strong>
Photo by: Some Name</strong>
die Headline von Alphabetdorf und die Subline seiner eigenen Straße.
</figcaption>
</figure>
</article>
<article class="img-item">
<h3 class="hidden">Lorem Ipsum</h3>
<figure>
<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"/>
</a>
<figcaption>
<strong>
Photo by: Some Name</strong>
Wehmütig lief ihm eine rhetorische Frage über die Wange.
</figcaption>
</figure>
</article>
<br class="clear"/>
</section>

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">
<h3>
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>
</article>
<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>
<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>
</article>
</section>
</section>

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).

<footer>
<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>
</div>
&copy; Copyright 2012 by <a href="http://www.lingulo.com">Lingulo</a>. All Rights Reserved.
</div>
</section>
<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>
<article class="column midlist">
<h4>Consectetuer</h4>
<ul>
<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>
</ul>
</article>
<article class="column rightlist">
<h4>Dolor sit amet</h4>
<ul>
<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>
</ul>
</article>
</section>
</footer>

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.

I am a frontend and backend web developer who loves building up new projects from scratch. In my blog "Lingulo" me and some guest authors regularly post new tutorials, web design trends or useful resources.

436 Comments

  1. Pingback: Responsive Navigation – Patterns, Tipps und Best Practices - mediaworx bloggt

  2. John Hembrom Reply

    Hello Chris, you are doing very good job..I am very beginner to learn this..from where I can get the “Beginnners’ page” to learn from Scratch…. like how to add css in one project.?? I will be happy to receiving your answer…

  3. Great article thank you ,i think to learn website developer
    1. first: you have to learn html,css,javascript
    2. second : choose your approach responsive or adaptive
    responsive design is always the best choice because
    Responsive web design aimed at allowing desktop webpages to be viewed in response to the size of the screen or web browser one is viewing with. offering the same support to a variety of devices for a single website, content, design and performance are necessary across all devices to ensure usability and satisfaction
    check example: http://www.ammanu.edu.jo/Learn/Learn3.html

  4. Hi, Thanks for this awesome tutorial (!).

    I’m a beginner with html5 and css. Question: why do you use this ‘Home‘ instead of ‘Home‘.

    • You mean why I use the javascript:; instead of a simple #? The reason is just that when clicking on a # link the browser will jump to the top of the page while when using javascript:; it will remain at its current position.

  5. Thanks a bunch! This tutorial has so far been comprehensive and concisely instructive with wide ranging guides, I have been provided with a better understanding of some tags and a greater perception of the different layout/design possibilities

  6. Eines der besten Tutorials, wenn nicht sogar das Beste, im Bereich Responsive Design, die ich bisher im Netz gefunden habe!!
    Vielen Dank dafür! 🙂

  7. Pingback: Yr 2 graphic design | Pearltrees

  8. thanks for your site, i’m not a programmer but I’ve learned responsive website through your sample.

  9. Thanx for these Creating the head – Doctype and Meta Tags information .
    May i use these for my small business website 🙂

    Reply me soon.
    Thanks in advance.

  10. Thank you for this great article! Very simple and comprehensible. Indeed, nowadays graphic designer is an interesting and one of the most popular profession if not the most popular one. So, as written up above, you should learn how to introduce and advertise yourself in this competitive market. And of course you need your own website for that. One of great examples, that I found recently on the net- Here you can learn about designing web pages, it’s usefull and well-structured.

  11. Hello, thank you for the very helpful tutorial. I am trying to do something that I thought would be simple. Add more slider content. In your tutorial there are 3. I thought to add another, all I had to do was add #slider_content4 to list in slidesjs function callback start, add a 4th article section, and add a 4th img in the slides div section. When a run the html, I see the new text out of place right away (it’s not over the image) and it doesn’t wait until the 4th image is displayed. Any idea what I need to do?

    Thanks!

    • Hi Oliver,

      you would need to also copy the CSS code and change it to #slider_content4. So open the style.css file and search for “#slider_content1”, then wherever you find a rule you would need to add “#slider_content4”.

      Hope that helps! 🙂

      Best regards

      Chris

  12. What an awesome post, I really love to read such kind of informative articles that you have written. Well these techniques are very useful and amazing.
    Thanks for sharing this information with us.

  13. Hi Chris, Not to worry, I’ve fixed it now. I used your files, and then merged in my changes and it’s worked, although I’m still not sure why! I always appreciate what you can learn along the way when you’re stuck anyway.

    Thanks again for your work!

    Kind regards,
    Kylie

  14. Hi Chris, thanks so much for the tutorials – they’re excellent! I’m currently halfway through and stuck on getting the lightbox working, hoping you might be able to help?

    It’s a problem with the script within a script to include 1.7.2.jquery.min :

    window.jQuery || document.write(”)

    It seems to be breaking at the first – you can see the ‘) appear on the top of the page. But the lightbox works fine.

    When I add an escape \ , or ‘+’ , the lightbox doesn’t run.

    Quite frustrating – I was wondering if you can offer any suggestions?

    http://www.kyliestewart.com/

    Kind regards,
    Kylie

    • Hey Kylie,

      sorry for my late answer. By now I think you managed to fix the problem, haven’t you? At least I don’t see any errors in the console.

      Best regards

      Chris

  15. Chris Reply

    Thank you everyone for so many positive comments and great feedback!

  16. Chris this is an amazing article – I have been looking for something like this to get me on the HTML5 ladder for ages – big Kudos my friend.

    I am only just starting to migrate my site to HTML5 but as you can see my old site http://gothai.land is well outdated and hates mobile devices!

    I have an extra challenge and I will keep you posted how it goes – I am also integrating the code you have provided with ProcessWire for a Thailand real estate agent

    It is only currently in development and not very integrated yet! The development site is http://m.gothai.land – there is still a lot of work to do you will see if you have a chance for a look!

    100% I will be putting a credit on to yourself and lingulo.com for getting me started – I always like to acknowledge someone else’s hard work.

    Keep up the good work.

    Paul

    • Thanks a lot for your comment, the website already looks good! 🙂 Looking forward to checking it out again when it’s ready!

      All the best

      Chris

  17. I already knows how to build an HTML page from Scratch. But now looking for the advance PHP tutorial to build personalized CMS. Great info! Thanks for sharing!

  18. Laura Macias Reply

    Hi.

    Where is the link to download the style.css file?

    Thanks

  19. I have tried this with already download html5 template. Now learning it to convert in WordPress. Can this be done.

  20. hallo,
    bin grade angefangen mich einzuarbeiten….und stelle fest dass die Slider auf der Demo-Seite gar nicht laufen, sowohl bei FF als auch Chrome???
    Die Seite scrollt also nicht automatisch zu entsprechenden Bereichen.
    oder verstehe ich das nur falsch??

    lieben gruss

    • Du meinst die Links oben in der Navigation? Diese haben in der Beispielseite keinerlei Funktion, das stimmt. Mit Slider sind aber die großen Bilder unterhalb der Navigation gemeint, die hin und her “sliden”.

  21. Hi Chris, great article to follow I was looking for a such article since a long time. The write up was nicely published with a descriptive presentation anyone from HTML background can easily understand. The whole article gives me a excellent input on usage of HTML5 and CSS3 to website to upgrade. Looking for some inputs for our web solution blog http://www.clickpointsolution.com/
    Thanks for sharing such invaluable article….

  22. the content you written that’s was awesome. and the explaintion is too easy and understanble.thanks for this tutorials.
    i gain soo much knowledge after try this tutorial.
    thank you sooooo muchhhhh

  23. Mohammad seraj uddin Reply

    This is a very nice tutorial on HTML5 and css3. It is not only interesting but also instructive. It is informative and useful.

  24. randomGuyOnFreeWIFI Reply

    just a usability thing.. but the link to slider.js on your tutorial is broken.

    the site’s correct URL is: slider.js (no www)

  25. Great Tutorial, but does not render good on IE9 at work. Am I doing something wrong? Code seems to be just fine on Chrome. Would like a reply 🙂

    • That’s right, there seems to be some problem, I will have a look at it. Thanks for the info! 🙂

  26. Hello Chris,
    with the javascript for the slide content. do we create a new javascript or append to the jquery.slides.min.js?

    • Don’t add anything to the jquery.slides.min.js as this file might need to get updated by time so if you want to add code to your website always do it in a seperate file or inline in the HTML document 🙂

  27. I KNOW HTML LANGUAGE SCRIPT BUT I DO NOT KNOW HOW WEBSITE DEVELOP SO PLEASE GIVE SOME GUIDE

  28. Many thanks Chris. I really enjoyed your tutorial on building a responsive html5 website from scratch. It was informative and straight to the point. No unnecessary details. I believe I am going to use what I learnt as a template to build my own website (s) in the future. I have only gone through the part 1, but I hope to study the part 2 and other informative articles on your site to help me in my goal to become a web developer. However, I found some of the code challenging, in the slider and article sections. I am going to study them again and again to make sure the ideas are burned into my brain. Once again, thank you for a job well done.

  29. Hallo Chris eine tolle Arbeit,
    kannst du uns noch verraten wie man die Höhe von dem Slider in dem Slider ändert?
    Ich habe alles versucht die kann ich nicht höher machen.
    Danke dir im voraus!!

    Mfg

    ahi1975

    • Hallo, vielen Dank! Hast Du schon probiert die Höhe im Sliderjs-Code zu ändern und Bilder mit geringerer Höhe zu verwenden? $('#slides').slidesjs({height: 235,

  30. Now that Modernizr.load and yepnope.js have both been deprecated, what is the recommended replacement code to work around this problem?

    • There is no need to include Modernizr if you don’t need to use its feature detection purpose. What you need is html5shiv and Respond.js (the first to enable HTML5 sections in IE <= 8 and the latter to enable media queries.

  31. On sub-sites (eg. ‘about’) using the same design, the slider image and the spacer jumps a little bit unless the content on the page is exactly the same. Is there a way to make everything above the spacer fixed in place in case you decide to use a different content layout below the spacer?
    The goal is to have the page appear ‘seamless’ when the user clicks on a menu as if only the content below the spacer is changed.

    Regards, Joseph

    • If you don’t change the content above the spacer then the top part shouldn’t be changing when removing elements from below the spacer. Could you provide an example?

  32. Pingback: 20 Best Free Websites to Learn Webdesign Coding

  33. Pingback: 30+ Free Resources & Tutorials to Learn Web Design

  34. Hi. I’ve checked at least three or four times now but when trying to get the modernizr file, though there’s a html5shiv checkbox, there’s no modernizr.load checkbox anywhere.

    What can I do?

    • You don’t need any modernizr functionality (for finding out whether a feature is supported by the browser) in our example, so choosing html5shiv should be enough.

  35. I really enjoy reading your website. The content is great and informative. I have bookmarked your website because I’ll visit it regularly after this. Keep up this great work.

    India . vastu

  36. Hi Chris, thanks for simple and great tutorial. One question though, where to put all the jpg images? In a folder? Or any file?

  37. 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

    Keith

  38. 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.

  39. i have try to make responsive but can’t be responsive. how that possible
    pls give any solution or responsive learn website adress

  40. Where will I check modernizr.load? I can only see the html5shiv… I appreciate your time.

  41. please help. i am having trouble, basic trouble. before i type out my question are you still responding to this post? thanks.

  42. 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

  43. 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!

  44. 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).

  45. Thank you for such a detailed tutorial. It has given me the much needed boost to start coding again 🙂
    Looking forward to tutorials on routing concept as well.

  46. Edwin Carter Reply

    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!

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

    HTML5 Validation – https://html5.validator.nu/?doc=http%3A%2F%2Fwww.lingulo.com%2Ftutorial-content%2Fhtml5%2F

    CSS3 Validation – https://jigsaw.w3.org/css-validator/validator?profile=css3&warning=0&uri=http%3A%2F%2Fwww.lingulo.com%2Ftutorial-content%2Fhtml5%2F

    Accessibility Validation – http://wave.webaim.org/report#/http%3A%2F%2Fwww.lingulo.com%2Ftutorial-content%2Fhtml5%2F
    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.

  48. Too much comment, the tutorial was only 3 pages. and the rest is a full comments !! WTF.

  49. This is really a great tutorial on for begining the journey on html5. Thanks a lot and looking for similar good tutorials in the days to come.

  50. 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 ..as 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.

  51. Pingback: How To Build A Website Using Html5 | Adsense

  52. that is so true. people dont understand that these days. good stuff needs work and that has to be financed.

  53. 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!

    • You can choose from thousands of beautiful free or payed themes for WordPress or design your own layout.

  54. Thank you 🙂

    I found it very helful!

    I’m waiting for the second part 😉

  55. 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.

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

  57. Your tutorial is great. Am finding difficulty to download the js. Pls can you send me the complete tutorial file? Am a beginner

  58. benson rex Reply

    Pls I don’t understand german pls use english in ur coding nice work

    • I am sorry that you think it is too much of adverts. However I am dependent on those ads because they help me finance the server costs. I hope you can understand that!

      Best regards

  59. I really love d site and is helping… sir please I we love you to help by sending dis full tutorial code to my email [email protected]
    I really love this responsive design code please thank you.

  60. Hi,

    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!

  61. 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. http://www.BuyRareSeeds.com

  62. Beautiful and perfect Tutorial with well explanation, Thankful for you, i will defiantly share it with my fresher employees.

  63. Sambi Reddy Reply

    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?

  64. Hi,
    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.

    Greetz
    tom

  65. Du bist ein Hero – ein wahrer Held – vielen lieben Dank für die Mühe, die Du Dir gemacht hast, um uns “Nichtwissenden” etwas die Augen zu öffnen. DANKE!

  66. 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 .

  67. 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 !

  68. Hi

    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.

    Cheers
    Eric

  69. 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

  70. 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.

    Thanks,

  71. 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,
    Uli

    • 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

      Chris

  72. Super erklärt. Bin noch Anfänger und habe alles gut umsetzen können und konnte dabei gut lernen.
    Vielen Dank!

  73. hi you !

    How to i can convert site vipmax.com.vn to responsive .

    This is use joomla 2.5 and template not support responsive

  74. Beautiful tutorial, thanks so much for sharing your information. You can be sure it is being well utilized. Thanks again

  75. 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: http://caniuse.com/#search=section)

    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

      Chris

  76. Thanks for this article… I really love it !! You have tried to explain every new html 5 feature and all the right additions required for a cross browser html 5 css3 website.
    Great wonderful points.
    Great work !! 🙂

    Thanks and Regards,
    Sergey Let.
    http://nextaz.com/

  77. Nicht nur ein schönes Design, auch ein tolles und verständliches Tutorial. Super, danke!
    Not just a beautiful design but a great and coherent tutorial. Thank you so much!

  78. Excellent tutorial, nice work. You can also create an awesome modern & stylish website and blog at simplesite.co using a professional responsive theme.

  79. Jan Schmidt Reply

    Hallo,

    ich hatte ein übersichtliches, aktuelles Tut für meine (Berufs-) schüler gesucht — und: gefunden. Super, das hast Du toll gemacht.

    Viele Grüße

    Jan

  80. 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?

  81. Killer tutorial – really appreciate you putting in the effort to detail the steps in creating website templates as it’s never easy for beginners when they start out.
    Looking forward to the rest of the series!

    Devin

  82. Pingback: Robin Khatri (robinkhatri) | Pearltrees

  83. Hi Chris,
    Really a great tutorial. When I tried, in the footer section I’m getting copyright as the first and rest 3 articles as last. Please can you help?

  84. Stephan Potengowski Reply

    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:))

    Stephan

  85. Karl-Heinz Reply

    So – Fehler gefunden. Bei “callback” muss noch “content4” zugefügt werden. Da hatte ich ein Brett vor dem Kopf 🙂

  86. Karl-Heinz Reply

    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.

  87. 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?

    • Hey Rudi,

      Du musst dafür entweder mit einer Programmiersprache Deine eigene “Suchmaschine” programmieren oder Du nutzt ein CMS wie WordPress. Wie man dieses integriert kannst Du in meinem anderen Beitrag lesen.

  88. Danke für das Tutorial zu HTML5. Genau das habe ich gesucht. Allerdings verhält sich meine Anwendung im Webview anders als im Browser… Da muss ich noch etwas weiter suchen.

  89. I just read your comments.. will you please provide me an easy html5 media query tutorials.. please reply me on mail..

    Thank you

  90. javelina187 Reply

    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…

  91. javelina187 Reply

    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.

    • Hey Javelina, did you try using images that are similar sized as the ones used in the example?

  92. Great Tutorial!!

    I think you ment instead of in line 21 of the code for the footer?

  93. 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?

  94. 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!

  95. Ich würde JQuery immer als erstes einbinden da einige Frameworks zb Bootstrap nicht richtig funktionoieren wenn JQuery erst danach kommt.

  96. Great tutorial…

    But I cannot find style.css file
    where is the css folder??

    thanks
    kjn

  97. Hi,

    I read half of it and tried looking it on my Nokia Lumia 521, Javascript is not working and Contact us links are not displaying.

    Thanks,
    -PM

  98. 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!

  99. Hey
    thank you so much for this tutorial!
    It is very helpful 🙂

    Keep up the great work!

  100. 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 🙂

  101. Pingback: Web Responsive | Pearltrees

  102. 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 ?

    Thanks

    • It’s a mixture between responsive and adaptive. I am currently writing on a new tutorial concerning responsive web design, more infos soon…

  103. Are you kidding?
    You are spoon feeding and spoiling your readers.
    Awesome guide, tutorial, tips or whatever it is.

    Nice intro to HTML5 and Responsive Design

    Thanks for it.

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

  105. 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..!

  106. Himanshu Arora Reply

    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.

    • Due to copyright reasons I would ask you to download the assets from the sources described in my tutorial.

      Best regards!

  107. 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.

    Thanks!

  108. 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.

  109. @Chris: Sure, we can write it togehter. Just contact me, when you finished your studies and when you have time.

    Best regards

    Magic

  110. Kilungya James Malika Reply

    thanks a lot for solving a problem that was causing headache…keep up the same

  111. 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.

    @Magic

    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 http://jw.org website

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

  112. @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

    Magic

    • 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.

  113. 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.

  114. 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!

  115. 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!

  116. Andy Guru D Reply

    Hi,
    I just love it.
    Using the scripts was a mystery to me. Now I get it. Thanks to you.

  117. Helmut Kohl Reply

    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.

  118. westhamben Reply

    This tutorial is fantastic, the best and easiest i have come across. Im very much looking forward to the second part of this tutorial..
    Many thanks..

  119. Pingback: 10 Useful HTML Tutorials to Create Beautiful Website

  120. Chandrasekhar Reply

    This will help me a lot to upgrade my skills on responsive design.

  121. Pingback: Bullseye Locations Releases Responsive Store Locator Software | Bullseye – Store Locator Software

  122. 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.

  123. 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 🙂

  124. 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.

  125. 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!

  126. Brilliant tutorial. The scripts used in order make several features work in all browsers were a revelation to me. Very handy. Thanks

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

    has no closure and a has no starter.

    regards
    bearskin

    PS sorry for the bogus emailaddress. 😉

  128. This is great, thanks. Just what I’m looking for! However it doesn’t look right in Firefox? Is there a fix for that?

    • Hey Mandy,

      I tested the site in several different Firefox versions. Which version are you using and what problem is there?

      Best regards

  129. 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

  130. 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?

    Thanks,
    Gabrio

  131. 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.

  132. 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.

    • Thank you for your comment 🙂 I have just checked the site in IE11, however it looks fine on my browser. Could you maybe provide a screenshot?

  133. Pingback: Responsive design | Pearltrees

  134. Roland Thomas DeCruz Reply

    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!!!

  135. 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 🙂

  136. 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!

  137. Please explain the below code:
    ———————————————————————–

    window.jQuery || document.write(”)

    ———————————————————————–

    Thanks!

    • We can’t see the code, please use jsFiddle or another online testing tool to share your code.

      Thank you and best regards

  138. Roland Thomas DeCruz Reply

    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.

  139. thank you, Christoph, for your time! I spent great time reading this interesting article with a clear and thoughtful style (travelling from css2 to css3).

  140. Pingback: How to build a responsive HTML5 website - a step by step tutorial - appgong

  141. 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 ?

    • Yes you would need to add the jQuery file. I didn´t include any of the scripts because then I would need to update the downloads each time a script has been updated.

  142. Really good tutorial. I have already developed responsive website : http://egsoftnet.com using some other techniques and hopefully it is working fine, but google ads on it are not acting as responsive. Can you provide your suggestions for this ?

  143. John Simpson Reply

    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

  144. Na, das ist ja mal eine sehr umfangreiches Anleitung. Und dann noch ein Layout, was sich wirklich sehen lassen kann. So vollkommen habe ich noch kein HTML5-Tutorial gesehen.

    Hochachtungsvoll
    Steve

  145. Fantastic Tutorial. Saved me countless hours of headache and confusion! Keep it Up!

  146. Basanta Dhakal Reply

    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?

  147. 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.

    • Hey Simon,

      I will try to add that part of the tutorial as soon as possible, it´s actually quite simple to accomplish that responsive menu 🙂

      Best regards

      Chris

  148. 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.

  149. Pingback: The Best Responsive Web Design Tutorials - WeDesignBlog

  150. Do you design website as a bussiness, please i have a project. Can u help design and how much. Thanks

    I will be expecting your reply

  151. Miguel Cr Rojo Reply

    Its A really Great Effort From Your Side to explore html5 in new ways.
    Thank you so Much ! 🙂

  152. Jessica H. Reply

    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.

    • Hallo Jessica,

      vielen Dank für Deinen Kommentar, gerne kannst Du das Tutorial für Deine Seiten verwenden. Lediglich der Verkauf oder das Anbieten als Download ist nicht erlaubt.

  153. Nicolas Barrionuevo Reply

    What would I have to change to make the slideshow available on a mobile device?

    • You would need to remove top: -1500px; from our container class in the media query.

  154. 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.

  155. 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.

  156. Alanna Hurley Reply

    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?:

    * http://www.wikihow.com/Make-a-Website
    * http://blogerr.net/how-to-build-a-website-from-scratch/

    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

  157. Very informative, thanks for sharing.

    I’m not able to download the zip file. I have tried many times to download however every time it fails.

  158. howdy. thx for the tut. I’m hung up on the alt nav for mobile and you mentioned a better solution than selection box. what would that be?

    I’m OK w html5 and css3 but don’t have .js figgered out yet 🙂

  159. 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!!!!

  160. 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

  161. 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

  162. 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 slidesjs.com it always stays visible (and adapted) in all browser sizes.
    Did not find the trick yet.
    Tom

  163. Christophe Reply

    And I didn’t mention — the animations work for me on Firefox, but not in Chrome (even though yours does).

  164. Christophe Reply

    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.

  165. Hallo!
    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

  166. Pingback: Is responsive web design still relevant and important?- Sweetmag

  167. 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

  168. Could you please post a blank page for an about us / portfolio page? or contact us page?
    thanks.

  169. 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!

    Shampie

    • Hey Shampie,

      das hab ich ja noch nie gehört 😀 kannst Du uns vielleicht einen Link zu Deinem Projekt schicken?

      LG

  170. 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.

  171. 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…

    • Hey sarah,

      thank you! You need to do all the steps written down at the very top of the index.html file to make the site work.

      Best regards

  172. I now noticed that it has something to do with the section “text_columns”, but I can’t figure out what’s wrong.

    • There was a typo in the source code, thank you! I updated the code, now everything should be fine. 🙂

  173. 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

    • Thank you! The other tutorial has not yet been finished. I will add the link as soon as I have finished it.

  174. Hi! I made a testwebsite using this tutorial, but I noticed there is something wrong with the footer. It doesn’t spread over the whole width of the screen… (see http://jv-design.coffeecup.com/) What is wrong here? It’s exact the same code as in the tutorials.

  175. Respeckt, sehr viel Arbeit das so ausführlich zu posten. Mich freut es das auch noch andere Webmaster gibt die deutsche Tutorial posten. Weiter so!

  176. 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

  177. I followed the tutorial, though it seems I have done something wrong in the footer, It is not sized right.

  178. 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() {
    $(‘#slides’).slidesjs({
    height: 235, <———— (been changing this but it doesnt do anything to image size)
    navigation: false,

  179. Excellent tutorial, nice work. You can also create an awesome modern & stylish website and blog at simplesite.co using a professional responsive theme.

  180. 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!

  181. Hallo,

    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.

  182. Pingback: How to build a responsive HTML5 website - a ste...

  183. Have you checked your own preview? http://www.lingulo.com/tutorial-content/html5/

    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.

  184. 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:

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

      Best regards 🙂

  185. 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 🙂

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

    …it leaves a BIG PROBLEM UNDERSTANDING HOW RESPONSIVE DESIGN WORKS (at least for me).

    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?

  187. This is a very good tutorial and a nice starting point for html5, css3 programming.
    Thanks for sharing to the world!

  188. Pingback: 18 Detailed HTML5 Website Layout Coding Tutorials - Designbeep

  189. Pingback: Das passt immer: Responsive Design ›› Simon Pokorny

  190. Pingback: Wie man eine responsive HTML5-Webseite baut – ein Schritt für Schritt Tutorial | Ein See voller Ideen

  191. Sorry, I meant you close section with id “copyright” with div closing tag. )))

  192. There is a mistake in the “footer” (in this tutorial, not in the code source). You close with … I spent 1 hour to understand what is wrong ))))

  193. wow. amazing tuturial.
    Its so helpful chris, specially to someone like me
    that new to this field. Thanks you very much.:)

  194. Hi, kleine Frage …. warum ist der erste Teil auf deusch und der zweite in englisch ….ansonsten sehr gutes Tutorial

    thx
    rainer

    • Hey Rainer,

      ich habe bisher leider noch keine Zeit gefunden, den zweiten Teil ins Deutsche zu übersetzen. Werde das aber nachholen. 🙂

  195. Pingback: How to build a responsive HTML5 website - a ste...

  196. Reuben Chovuchovu Reply

    Can you please explain why you are using href=”javascript:void(0)” instead of href=”#”?

  197. Pingback: Wie man eine responsive HTML5-Webseite baut - e...

  198. Very good tutorial. I will use lots of things from this tutorial. I will put a link in my personal web page to your tutorial.

    Vielen Dank!

  199. 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!!

  200. 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?

    Thanks

    • 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.

  201. Ich danke für dieses tolle Tutorial.

    – super geschrieben
    – super erklärt

    Ich freu mich auf das Ergebnis!
    Weiter gehts zum 2. Teil –>

  202. Pingback: Do you want to learn a step by step responsive web design? | VEMAZE.COM

  203. 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.

    • Thank you John! What kind of online tuts are you looking for? For HTML, CSS, JavaScript, PHP… or just general web development resources?

      • 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?

  204. 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

  205. 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. 🙂

  206. 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.

  207. Jean Marie Reply

    Thanks for the tutorial.

    You included “style.css”. where is this file

  208. Hi

    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
    Luke

  209. Pingback: How to build a responsive HTML5 website - a ste...

  210. It’s help me much, is there any tutorial for parallax effect? Look forward to it.. Appreciate this post, Thx.

  211. very nice tutorial, I so love it much, Im waiting for the second part, I hope ya can do it soon as possible, cause it makes me excited.

  212. 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.

  213. Hi,
    Sorry for poking you again but please can you make the second part of this awesome fantastic tutorial live?

    Thank you and TC

    • Hey Dpot,

      I am trying to finish it as soon as possible. Please have a few more days patience 🙂

      Thank you,
      Chris

  214. Hi!

    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?

    Br,
    Michaël

  215. Pingback: Web design | Pearltrees

  216. me to,
    I couldnt find any better tutorial and I’m stuck now 🙂

  217. Pixelschubser Reply

    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 🙂

  218. 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.

  219. 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: http://stackoverflow.com/a/4005439/1032472

      Feel free to add further questions if you have any 🙂

  220. 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,
    Daniel

    • 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,
      Chris

      • Thats great news Chris! Best of luck with your exams, and well done again for creating this site!

  221. 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.

  222. Chris, this is an unbelievable resource! Thank you so much for sharing and keep up the great work! I look forward to your second instalment with great interest!

  223. 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.

  224. Thank you, I appreciate your concise and comprehensive work – looking forward to the second part of the tutorial which I hope will be as helpful as the first.

  225. 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 !

    • Thanks a lot! Yes, I am currently creating the second part of the tutorial and hope to be able to finish it within the next 7-14 days.

      • 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!

  226. Denver Tastet Reply

    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.

Write A Comment