Lingulo.de - Eine Quelle für Webentwickler


11.05.2013

Wie man eine HTML5 Webseite aufbaut – Teil 1

GD Star Rating
loading...

Benötigte Kenntnisse: mittel

In diesem Tutorial werden wir Schritt für Schritt eine hübsche moderne responsive HTML5-Webseite erstellen. Ich habe versucht so viele Features wie möglich in das Tutorial zu integrieren. Wir werden uns mit einem jQuery Slider, CSS3-Transitions und CSS3-Animationen, CSS Media-Queries und noch einigem mehr beschäftigen. Der erste Teil des Tutorials wird Dir zeigen wie man die grundlegende HTML-Struktur aufbaut und welche Skripts für eine browserunabhängige Darstellung der Webseite benötigt werden. Im zweiten Teil werde ich Dir dann zeigen wie man die Seite mithilfe von CSS3-Features gestaltet, um dann am Ende diese umwerfende HTML5 Cross-Browser-Webseite zu erstellen.

Lingulo HTML5 CSS3 Tutorial

Vorschau

HTML5 responsive Webseite

Download

HTML5 Webseite als Zip-Datei7kB48750mal heruntergeladen




Bitte beachte, dass dieses Tutorial für Leute gemacht ist, die bereits über einen gewissen Kenntnisstand verfügen. Einige Teile des Tutorials werden nicht im Detail beschrieben, da ich davon ausgehe, dass Du z.B. weißt wie man eine CSS-Datei einbindet oder ähnliches. Falls Dir etwas unklar ist oder Du Fragen hast, schreibe diese bitte als Kommentar unter diesen Beitrag und ich werde versuchen, sie so gut wie möglich zu beantworten.

Struktur der HTML5-Webseite

Zuallererst lass uns einmal einen Blick auf die grundlegende Struktur der Webseite werfen. Klicke auf das kleine Bild rechts, um zu sehen wie unsere Webseite aufgebaut ist. Ich empfehle Dir, immer erst einmal ein Layout zu zeichnen bevor Du anfängst zu programmieren, da es die Arbeit wesentlich erleichtert, wenn Du einen Überblick darüber hast wie Deine Seite aufgebaut sein soll.

Erstellen des head-Bereichs – Doctype und Meta Tags

Lass uns anfangen, indem wir den HTML5 Doctype definieren und unseren head-Bereich mit den benötigten CSS- und Javascript-/jQuery-Dateien erstellen. Die Doctype-Deklaration ist in HTML5-Dokumenten erfreulicherweise einfacher als in früheren Versionen und lässt sich leichter merken.

<!DOCTYPE HTML>

In unserem head-Bereich setzen wir nun den Zeichensatz auf UTF-8, was in HTML5 ebenfalls einfacher geht als in vorherigen HTML-Versionen.

<meta charset="UTF-8">

Da wir ein responsive Design erstellen möchten, das auf allen Geräten und mit allen Bildschirmauflösungen gut aussieht, müssen wir das viewport Meta Tag hinzufügen, das festlegt wie die Webseite auf einem Gerät dargestellt werden soll. Wir setzen die width (Breite) auf device-width (Gerätebreite) und die initial scale (Anfangs-Zoom) auf 1.0. Dadurch wird die Breite des Darstellungsbereichs auf die Breite des Geräts gesetzt und die Webseite 1:1 angezeigt. Ein Bild mit einer Breite von 350px auf einem Bildschirm mit einer Breite von 350px würde also die gesamte Breite einnehmen.

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

Bitte beachte, dass es verschiedene Meinungen dazu gibt, ob initial-scale und width=device-width genutzt werden sollten. Einige Webentwickler sagen, dass auf initial-scale verzichtet werden sollte, da es in iOS zu einer fehlerhaften Darstellung führen kann. Beim Rotieren des Gerätes wird die Webseite in manchen Fällen über die Breite des Gerätes hinaus skaliert. Die Folge ist, dass der Benutzer manuell herauszoomen muss. Um dieses Problem zu beheben, gibt es verschiedene Scripts, die beim Rotieren des Gerätes das manuelle Zoomen deaktivieren und dadurch den Fehler beheben (hier eines dieser Scripts). Es gibt wohl auch Fälle, in denen schon das Entfernen der Eigenschaft initial-scale ausreicht, um den Fehler zu beheben.

Auf der anderen Seite gibt es einige Webentwickler, die genau das Gegenteil sagen. Raphael Goetter zum Beispiel schrieb in seinem Artikel:

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.

Abschließend lässt sich zu diesem Thema wohl keine allgemeingültige Lösung finden. Ich würde zuallererst einmal versuchen, ob Probleme bei der Benutzung von sowohl initial-scale als auch device-width auftreten. Wenn es dabei zu Problemen in iOS kommt, versuche eine der beiden Eigenschaften zu entfernen und die Seite dann in allen Geräten zu testen (Android und iOS). Sollte es dann immernoch zu Problemen kommen, verwende das oben genannte Script.

Erstellen des head-Bereichs – CSS-Dateien

Wir werden für unsere Webseite vier verschiedene CSS-Dateien verwenden. Das erste Stylesheet heißt reset.css und setzt das Styling aller HTML-Elemente zurück, so dass wir frei gestalten können, ohne uns Gedanken um Unterschiede in verschiedenen Browsern Gedanken machen zu müssen. Für dieses Tutorial habe ich Eric Meyers “Reset CSS” 2.0 benutzt, das Du hier herunterladen kannst.

Das zweite Stylesheet heißt style.css und enthält unser gesamtes Styling. Wenn Du möchtest, kannst Du diese CSS-Datei auch in zwei Stylesheets aufteilen und so das grundlegende Layout vom Rest des Stylesheets trennen.

Wenn Du Dir die Vorschau der Webseite anguckst und auf eines der kleinen Bilder im Hauptinhalts-Bereich klickst, wirst Du sehen, dass sich das Bild in einer größeren Version über der gesamten Seite öffnet. Das Skript, das wir hierfür verwenden, heißt Lightbox2 und ist eine einfache Möglichkeit, Bilder über der aktuellen Seite anzeigen zu lassen. Für dieses Tutorial musst Du Lightbox2 herunterladen und die CSS-Datei “lightbox.css” einbinden.

Das letzte Stylesheet (Google WebFonts) ermöglicht uns die Benutzung der Schriftarten Open Sans und Baumans. Um Schriften zu finden und sie in Dein Projekt einzubiden, besuche Google Web Fonts.

Bitte beachte, dass die Anzahl an HTTP-Requests sich vergrößert, je mehr CSS-Dateien Du in Deine Webseite einbindest und dies zu längeren Ladezeiten führen kann. Für die Live-Version Deiner Webseite solltest Du alle CSS- und Javascript-Dateien in jeweils eine Datei zusammenfügen. Das Problem dabei ist allerdings, dass die Übersichtlichkeit sehr stark darunter leiden und Dir die zukünfitge Arbeit mit den CSS- und JS-Dateien erschweren wird. Wenn Du Dir sicher bist, dass Du die Dateien in Zukunft nicht mehr verändern wirst, macht es Sinn die Dateien manuell zusammenzufügen. Möchtest Du allerdings auch in Zukunft noch Änderungen vornehmen, empfehle ich Dir das Skript Minify.js zu verwenden, das automatisch alle Deine CSS- und JS-Dateien zusammenfügt, sie minimiert und sie serverseitig cachet.

Erstellen des head-Bereichs – Javascript- / jQuery-Dateien

Jetzt da wir alle CSS-Dateien eingebunden haben, lass uns die benötigten Skripts hinzufügen. Da wir HTML5- und CSS3-Features in unserer Webseite nutzen, benötigen wir einige Skripts, die die Benutzung in allen Browsern ermöglichen. Das erste Skript, das wir benutzen werden, ist Modernizr.js, eine Feature-Erkennungs-Bibliothek für HTML5 und CSS3. Mithilfe dieses Skripts lässt sich auf einfache Weise feststellen, ob ein Browser ein bestimmtes Feature unterstützt oder nicht. Außerdem beinhaltet das Skript auch gleich html5shiv, das die Benutzung von HTML5-Elementen im Internet Explorer ermöglicht. Um Modernizr.js herunterzuladen, klicke hier und achte darauf, dass “html5shiv” und “Modernizr.load” ausgewählt sind.

Das zweite Skript, das wir benötigen, ist Respond.js, das responsive Design im Internet Explorer und in anderen Browsern, die keine CSS Media Queries unterstützen, ermöglicht. Klick hier, um es von GitHub herunterzuladen.

Um z.B. lightbox.js nutzen zu können, benötigen wir ebenfalls die jQuery-Bibliothek. Am besten nutzt Du eine externe jQuery-Version von Google und bietest eine lokale jQuery-Datei an, falls die externe nicht geladen werden kann.

Für Lightbox2 müssen wir die Datei lightbox.js einbinden, die sich im Ordner “js” des Lightbox-Ordners befindet.

Wir werden in diesem Tutorial einige CSS3-Features nutzen, die es erfordern, unterschiedliche Prefixe für die browserunabhängige Darstellung von Eigenschaften zu verwenden. Um nicht bei jeder Eigenschaft manuell alle Prefixe angeben zu müssen, werden wir das Skript Prefix Free nutzen, das automatisch alle benötigten Prefixe erstellt. So reicht es dann, die prefixfreien CSS-Eigenschaften anzugeben. Du kannst das Skript von hier herunterladen.

Das letzte Skript, das wir benötigen, ist der responsive Image-Slider SlideJS. Du kannst das Plug-In vonhier and herunterladen und musst dann die Datei “jquery.slides.min.js” einbinden.

Dein Code sollte jetzt so aussehen. Im Laufe des Tutorials werden wir den head-Bereich noch mit weiterem Code ergänzen.

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

Erstellen des body-Bereichs – Einführung

HTML5 bietet einige neue Elemente, die uns dabei helfen strukturiertere und zugänglichere Webseiten zu erstellen. Einer der Hauptvorteile von HTML5 ist die Möglichkeit, Deine Webseite zu strukturieren und Screenreadern oder Suchmaschinen einen besseren Überblick zu bieten, was genau sich auf der Seite befindet. Dadurch können diese sich genau die Teile heraussuchen, die für sie interessant sind.

Bevor wir mit dem Codieren beginnen, lass uns erst einmal die wichtigsten neuen Sektions-Elemente in HTML5 betrachten.

Das neue section-Element definiert einen Teil der Webseite mit zusammenhängendem Inhalt. Es sollte nicht als allgemeiner Container oder als reines Gestaltungselement verwendet werden. In diesem Fall sollte man eher auf das gute alte div zurückgreifen.

Ein article definiert einen unabhängingen Inhaltsbereich, der auch für sich allein stehend noch Sinn ergeben müsste.

Ein header-Element definiert einen Header für ein Dokument oder eine Sektion.

Ein footer wird verwendet, um den Footer eines Dokuments oder einer Sektion zu definieren.

Ein nav definiert eine Menge von Navigationslinks, die die Hauptnavigation der Webseite sein sollten.

Ein aside definiert eine Sektion mit zweitrangigem Inhalt. Wird ein aside innerhalb eines article platziert, so sollte der Inhalt sich auf diesen speziellen Artikel beziehen. Steht das aside jedoch außerhalb eines article, sollte der Inhalt sich auf die Seite als Ganzes beziehen.

Jedes Sektions-Element in HTML5 sollte in fast allen Fällen eine Überschrift enthalten. Durch das Definieren von Überschriften für jede Sektion erstellen wir eine neue Sektion in der HTML5 Outline. Dies ist deshalb so wichtig, weil eine korrekte Outline nicht nur die Barrierefreiheit verbessert, sondern auch für SEO von Bedeutung ist. Um eine korrekte Outline zu erstellen, kannst Du das Outliner Tool verwenden. Solltest Du in Deiner Outline ein “Untitled Section” für eine Sektion sehen, so hast Du für die Sektion keine Überschrift definiert. Für weitere Informationen bezüglich der Dokumentengliederung lest Euch bitte Derek Johnsons Artikel durch.

Wenn Du Dir die Webseite anguckst, die wir in diesem Tutorial erstellen wollen, wirst Du Dich vermutlich fragen: “Wieso sehe ich keine Überschriften für den Header, die Navigation, den Footer oder einige der Sections, obwohl gerade eben gesagt wurde, dass jede Sektion eine Überschrift benötigt?”. Es macht natürlich nicht immer Sinn, eine Überschrift für jede Sektion anzeigen zu lassen.

Wir müssen jedoch Überschriften für jede Sektion definieren, um eine korrekte HTML5 Outline zu erhalten. Überhaupt keine Sektionen zu verwenden würde den kompletten Nutzen eines HTML5 strukturierten Dokuments zerstören.

Eine Lösung ist es, die Überschriften für jede Sektion in Dein HTML5-Dokument einzufügen und diese dann mittels CSS zu verstecken. Beachte aber, dass Du dies nicht mittels display:none machen solltest, da dadurch das Element auch aus der Outline verschwinden würde. Besser ist es die CSS-Eigenschaft clip zu verwenden. Dies ist auch der beste Weg, um nicht von Suchmaschinen fürs Verstecken von Inhalten bestraft zu werden. Wenn Du mehr darüber lesen willst, lies Dir einmal diese Antwort durch.

Erstellen des body-Bereichs – Programmieren der Webseitenstruktur

Jetzt können wir anfangen, die HTML5-Elemente anhand unseres Layout-Überblicks (klicke hier, um den Layout-Überblick in einem neuen Tab zu öffnen, so dass Du zwischen den Tabs hin und her wechseln kannst während Du programmierst) zu erstellen.

Die erste Sektion, die wir benötigen, ist der Header. Er wird unsere Naviagtion und unser Logo beinhalten. In den header setzen wir die Hauptüberschrift h1 und einen Paragraphen. Die Hauptüberschrift könnte z.B. der Name Deiner Webseite oder ein Logo sein, der Paragraph ein Motto oder Satz, der Deine Webseite beschreibt. Abhänging davon, ob die Unterüberschrift wichtige Schlüsselwörter enthält oder für die Navigation der Seite von Bedeutung ist, könnte man hier auch eine h2 verwenden.

Zusätzlich zu der Überschrift und dem Paragraphen fügen wir auch unsere Navigation in den header ein. In das nav-Element fügen wir eine ungeordnete Liste ul mit allen Navigationslinks als Listenelemente li ein. Dein Code für den header sollte jetzt so aussehen.

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

Auf dem Bild mit dem Layout-Überblick lässt sich erkennen, dass der nächste Bereich unterhalb des Headers “Slider-Images” heißt. Wenn Du Dir die Vorschau der Webseite anschaust, siehst Du, dass an dieser Stelle ein großer jQuery Image-Slider seinen Platz finden wird, der alle 6 Sekunden sein Bild wechselt. Es gibt eine Vielzahl von unterschiedlichen jQuery Sliders, aber wir werden in diesem Tutorial das responsive Slideshow-Plug-In SlideJS nutzen, das Du Dir jetzt am besten herunterlädst.

Wie Du in den Beispieldateien von SlideJS sehen kannst, benötigt der Slider ein div mit der ID “slides”, das die Bilder enthält, die Du anzeigen lassen möchtest. Da wir ja kleine Inhalts-Boxen auf den Bildern hinzufügen möchten, legen wir um die div “slides” eine neue section mit der Klasse “container” und fügen den Inhalt für jede der Inhaltsboxen in einen eigenständigen article mit den IDs “slider_content1″, “slider_content2″, “slider_content3″… Wir verwenden an dieser Stelle IDs anstatt von Klassen, da wir später mit jQuery jeden article ansprechen und sicher sein möchten, dass diese jeweils nur einmal auf der Seite vorkommen. Wir nutzen für die ersten drei Sektionen articles und dann eine einfache div für die Slides, weil die articles unseren unabhängigen Inhalt enthalten, während die div nur unsere drei Slider-Bilder enthält und hauptsächlich zur Gestaltung der Seite genutzt wird.

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

Als nächstes fügen wir den Inhalt in “slider_content1″, “slider_content2″ usw. ein. “slider_content1″ enthält den Inhalt, der angezeigt werden soll, wenn das Bild “slide1.jpg” zu sehen ist, “slider_content2″ für “slide2.jpg” und so weiter. In diese articles fügen wir jetzt eine Überschrift, einen Teaser und einen “Mehr lesen”-Link, dem Du die Klasse “button” zuweist, ein. Beachte, dass wir auch eine Überschrift mit der Klasse “hidden” in die Sektion einfügen, da wir eine korrekte HTML5 Outline erstellen wollen. Wenn Du Probleme dabei hast zu entscheiden, welche Überschrift Du am besten nutzen sollst: ich empfehle Dir, Überschriften mit dem Rang zu verwenden, der zu der Verschachtelung der aktuellen Sektion gehört. Wenn Du mehr über die korrekte Verwendung von Überschriften in Sektionen wissen möchtest, lies Dir bitte diesen Artikel (englisch) durch. Dein gesamter Code für den Slider sollte jetzt so aussehen (ich habe in die Überschrift und Paragraphen Blindtext eingefügt).

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

Nachdem wir nun die HTML-Struktur des Image-Sliders fertiggestellt haben, kommen wir jetzt zum nächsten Element auf unserer Layout-Übersicht, dem Spacer. Ich habe es Spacer genannt, obwohl es im eigentlichen Sinne kein wirklicher Spacer ist, sondern ein Bereich zwischen Slider und Hauptinhalt mit einer Frage und einem Suchformular. Für den Spacer nutzen wir eine section mit der ID “spacer”. Warum wir für alle sections auf dieser Webseite IDs anstelle von Klassen verwenden? Wir möchten später in der Lage sein, direkt auf einen bestimmten Bereich der Webseite zu verlinken (http://www.lingulo.com/tutorial-content/html5/#spacer zum Beispiel scrollt die Seite soweit herunter, dass der Spacer am oberen Bildschirmrand ist). In den Spacer packen wir jetzt einen neuen Paragraphen und ein div mit der Klasse “search”, die unser Suchformular enthält.

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

Du schlägst Dich wacker, wir haben jetzt schon fast die Hälfte des gesamten HTML5-Codes, den wir benötigen. Guck Dir noch einmal die Layout-Übersicht an. Wie Du siehst kommen von jetzt an fast nur noch articles in mehreren Containern.

Lass uns mit der nächsten section anfangen, die drei articles mit jeweils einer Überschrift und einem Icon daneben enthält. Die Icons, die ich in diesem Tutorial verwendet habe, stammen von Visualpharm und können hier gefunden werden. Füge außerdem noch eine Überschrift h3 und einen Paragraph p mit etwas Text in die articles. Das br class=”clear”, das Du im Code siehst, nutzen wir, um später die Floatierung der drei articles mit CSS aufzuheben (dazu mehr im zweiten Teil des Tutorials).

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

Jetzt geht es an die nächste section, in die wir wieder eine Überschrift h2 sowie vier articles einfügen. In die articles setzen wir eine unsichtbare Überschrift h3 und ein neues HTML5-Element mit dem Namen figure. Das figure-Element wird in Verbindung mit dem figcaption-Element genutzt, um Bilder, Diagramme oder ähnliches logisch auszuzeichnen und sollte auch für sich allein gestellt den ursprünglichen Informationsgehalt beibehalten. Erstelle ein figure-Element und füge ein Bild und eine figcaption hinzu.

Wenn Du mit der Maus über die kleinen Bilder in der Webseiten-Vorschau fährst, wirst Du sehen, dass sie dunkler werden und eine Lupe erscheint. Beim Klick öffnet sich eine große Version des Bildes über der ganzen Webseite. Wir haben ja bereits das Lightbox2-Skript in unseren head-Bereich eingebunden. Um Lightbox2 jetzt für die Bilder zu aktivieren, fügen wir einen Anchor a um unsere Bilder herum ein und geben ihm das Attribut rel=”lightbox”. Das href-Attribut des Anchors sollte auf die größere Version des Bildes weisen.

Der Effekt mit der Lupe beim Mouseover ist komplett mit CSS3-Features realisiert. Um den halb transparenten dunklen Hintergrund zu erstellen, fügen wir ein span-Element in den Anchor ein. Im zweiten Teil des Tutorials werden wir uns dann um das Styling des span-Elements kümmern, um es unsichtbar zu machen und nur bei Mouseover anzeigen zu lassen.

Dein Code für die section “four_columns” sollte jetzt so aussehen.

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

Als nächstes benötigen wir eine weitere section mit einer unsichtbaren Überschrift, einem article und einer weiteren section. Die zweite section beinhaltet ebenso eine Überschrift, die wir später mit CSS verstecken werden und zwei articles mit jeweils einer unsichtbaren Überschrift. Gib der section eine ID, z.B. “text_columns” und jeder der zwei Spalten eine Klasse, z.B. “column1″ und “column2″. Natürlich könnten wir mit CSS auch ohne Klassen auf den article und die section zugreifen. Ich finde es jedoch übersichtlicher und vor allem leichter wartbar, in so einem Fall Klassen zu verwenden. Sollte sich nämlich einmal etwas am HTML-Code ändern, z.B. ein article in ein div umgeschrieben werden, so muss bei der Benutzung von Klassen nichts an der CSS-Datei geändert werden. In “column1″ fügst Du eine Überschrift h3 und einen Paragraphen p mit etwas Text ein. In “column2″ fügen wir nun zwei articles oder divs ein, je nachdem ob der Inhalt von Relevanz ist und unabhängig für sich stehen könnte oder nicht. In jede dieser Wrapper fügst Du nun einen Paragraphen für den Text und ein Bild ein, das wir später im zweiten Teil des Tutorials animieren werden.

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

Wir haben jetzt bereits den Footer unserer Webseite erreicht. Wir fügen hier erneut eine unsichtbare Überschrift ein sowie eine section mit drei articles für die drei Spalten im oberen Teil des Footers. Außerdem setzen wir noch einen weitere section mit der ID “copyright” hinein, die wir im zweiten Teil des Tutorials am unteren Rand des Footers positionieren werden. In die “copyright”-section fügst Du ein div mit der Klasse “wrapper” ein, das wir benutzen, um den Inhalt zu zentrieren und eine Maximal-Breite zu definieren (wir werden darauf im zweiten Teil des Tutorials noch detaillierter eingehen). Der Grund, warum wir an dieser Stelle ein div anstelle eines article verwenden ist der, dass wir ja lediglich einen Container fürs korrekte Positionieren (also reines Styling) benötigen und dieser keinen wirklich relevanten oder unabhängigen Inhalt enthält. In das “wrapper”-div fügen wir einen Copyrighthinweis als Text und ein weiteres div mit der Klasse “social” hinzu, das unsere Links zu den sozialen Netzwerken enthält.

Die section, die wir zuvor bereits erstellt hatten, enthält drei articles mit der Klasse “column”. Zum zweiten und dritten article müssen wir noch eine weitere Klasse hinzufügen, so dass wir später jeden article einzeln mit CSS ansprechen können. Gib dem zweiten article die Klasse “midlist” und dem dritten die Klasse “rightlist”. Um eine zweite Klasse hinzuzufügen, setze ein Leerzeichen hinter “column” und schreibe dann die zweite Klasse dahinter (<article class="column midlist">). In die articles müssen wir nun etwas Inhalt einfügen, in den ersten eine Überschrift und einen Text. In den mittleren und rechten article setzen wir eine Überschrift und eine ungeordnete Liste mit einem Link in jedem Listenelement . Jeder Link sollte ein img- und ein span-Element enthalten, das den Text enthält, den wir darstellen möchten. Wir nutzen hier ein span, damit wir später in der Lage sind, den Text an jede beliebige Stelle zu positionieren und ihn als ein Block-Element darzustellen (dazu später mehr).

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

Das ist bereits alles! Schließe das body-Tag und das html-Tag und wir sind fertig mit der grundlegenden Struktur der Webseite. Um Dir jetzt einmal den gesamten HTML-Code anzuschauen, klicke bitte hier.

Im zweiten Teil des Tutorials werden wir unsere Webseite stylen, um sie so aussehen zu lassen wie in der Vorschau. Wir werden außerdem noch weiteren HTML-Code hinzufügen, wenn es ans responsive Design geht.

Ich hoffe, der erste Teil des Tutorials hat Euch gefallen, über Kommentare und Verbesserungsvorschläge würde ich mich freuen. Um mit dem zweiten (und auch letzten) Teil des Tutorials fortzufahren, klicke bitte hier.

Wie man eine HTML5 Webseite aufbaut - Teil 1, 8.8 out of 10 based on 654 ratings
199 Kommentare

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…

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.

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

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

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

Thanks in advance..!!

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

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

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

Thanks!

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.

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

Best regards

Magic

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.

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

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

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

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

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

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

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

Thanks again and best regards!

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

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

Thank you!

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

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

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

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

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

Hey Chris,

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

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

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

Is there a trick somewhere?

Thank you so much again!

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

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

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

Hi Chris,

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

Kind regards, John

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

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

Thanks,
Gabrio

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?

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

Thanks a ton!!!

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

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

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

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

window.jQuery || document.write(”)

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

Thanks!

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.

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

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.

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

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

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

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

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

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.

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

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.

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

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

Thank you so much !

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

Thanks for tht tutorial!

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

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

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

* 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

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.

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

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

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

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

can u explain which one is the correct file

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

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

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.

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

Hi Chris,

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

Hey Kevan,

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

Best regards

Lieber Chris,

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

Danke im Voraus!

Shampie

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

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

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

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

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

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

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!

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

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

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

PS: Guten Rutsch!

Gruß Micha

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

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

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

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!

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.

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.

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

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

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

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

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

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

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

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!

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

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

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.

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?

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

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

Hey Asim,

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

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

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

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

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.

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.

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

Thank you and TC

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

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

Werde die Seite bookmarken.

2.Teil soon, i hope :)

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

Very useful resource and very much appreciated.

Many thanks and keep up the very good work.

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

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

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

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

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

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.

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!

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.

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.

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!

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.

Kommentar verfassen