7 Schritt-für-Schritt Tutorials zum Erstellen einer HTML5-Website

Heute gibt es mal eine eigene Zusammenstellung aus exzellenten Tutorials, wie man Schritt für Schritt eine HTML5-Seite erstellt. Ich habe bei der Auswahl darauf geachtet, dass möglichst viele verschiedene Websites mit unterschiedlichen Designs und Elementen dabei sind. So ist für jede Fortschrittsstufe was dabei und man kann sich daraus genau die einzelnen Schritte bzw. Code-Teile herauspicken, die für die Umsetzung eines eigenen Designs in HTML5 und CSS3 notwendig sind.

stepbystep 7 Schritt für Schritt Tutorials zum Erstellen einer HTML5 Website

Smashing Magazine: Coding a HTML5 Layout from Scratch

smashing 7 Schritt für Schritt Tutorials zum Erstellen einer HTML5 Website

Quelle: http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

Als guter Einstieg mit vielen Erklärungen zu den neuen Tags bietet sich ein älteres Tutorial aus dem Jahr 2009 vom Smashing Magazine an. Das Design sieht vielleicht nicht mehr top-modern aus, dafür lässt sich der Aufbau der Seite und damit die Strukturierung der Tags sehr gut nachvollziehen.

Build a HTML5/CSS3 Website Layout Without Images – Part 1

onextrapixel 7 Schritt für Schritt Tutorials zum Erstellen einer HTML5 Website

Quelle: http://www.onextrapixel.com/2010/06/02/build-a-html5-css3-website-layout-without-images%E2%80%93part-1/

Passend zum gestrigen Artikel über ein schickes Layout ohne Grafiken hat der Blog onextrapixel ein Tutorial im Angebot.  Das Design ist zwar Geschmackssache, aber man lernt hier einige Möglichkeiten der Gestaltung mit CSS3.

Create a Grid Based Web Design in HTML5 & CSS3

line25 7 Schritt für Schritt Tutorials zum Erstellen einer HTML5 Website

Quelle: http://line25.com/wp-content/uploads/2011/optik/demo/index.html

Hier kommt ein sehr aktuelles Tutorial von Line25. In dem Artikel findet man auch gleich einen Crosslink zum Photoshop-Tutorial des Designs. Heraus kommt eine schicke und moderne Seite für eine imaginäre Brillenmarke.

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

pvmgarage 7 Schritt für Schritt Tutorials zum Erstellen einer HTML5 Website

Quelle: http://www.pvmgarage.com/2010/04/touch-the-future-create-an-elegant-website-with-hmtl-5-and-css3/

Wer’s lieber eleganter mag, der sollte sich das Tutorial von pv.mgarage mal genauer ansehen. Hier gibt’s zudem einige Infos zum Thema HTML5 und CSS3 sowie eine nette Linksammlung am Ende des Posts.

Coding a CSS3 & HTML5 One-Page Website Template

tutorialzine 7 Schritt für Schritt Tutorials zum Erstellen einer HTML5 Website

Quelle: http://tutorialzine.com/2010/02/html5-css3-website-template/

Ein eher einfaches und schlichteres Design wird in dem Tutorial von Tutorialzine umgesetzt. Auch hier wird Schritt für Schritt jeder einzelne Bereich des Layouts sowohl im HTML5- als auch im CSS3-Code erklärt.

HTML5 – A tutorial for beginners

html5 tutorial 7 Schritt für Schritt Tutorials zum Erstellen einer HTML5 Website

Quelle: http://www.html-5-tutorial.com/

Für HTML-Neulinge bietet sich das Tutorial vom html-tutorial.com an. Hier wird von Anfang an erklärt, was HTML ist oder wie Client-Server-Kommunikation funktioniert, was ein Doctype ist, wie man ihn deklariert… sehr gut für Einsteiger.

How to Make an HTML5 iPhone App

tetris 7 Schritt für Schritt Tutorials zum Erstellen einer HTML5 Website

Quelle: http://sixrevisions.com/web-development/html5-iphone-app/

Wer schon etwas weiter ist, gerne für mobile Endgeräte wie iPhones oder Androiden entwickeln möchte, der findet in diesem Tutorial von Six Revisions eine Anleitung für’s Erstellen eines kleinen, JavaScript-basierten Tetris-Spiels.

Los geht’s

Ich denke dieser Post bietet einen guten Einstiegspunkt für die Entwicklung in HTML5. Also ran an den Speck, probiert es doch einfach mal aus und postet einen Link zu eurem Ergebnis.

Sicherlich gibt es noch viel viel viiiiiel mehr Schritt-für-Schritt Tutorials zum Entwickeln einer HTML5 Website. Wenn ihr ein tolles kennt, von dem ich wissen sollte, dann hinterlasst die URL doch in den Kommentaren zu diesem Artikel.

 

4 Kommentare to “7 Schritt-für-Schritt Tutorials zum Erstellen einer HTML5-Website”

  1. Georg sagt:

    Das ist ja alles schön und gut. Nur, die Tutorials scheinen alle in Englisch zu sein. Für viele im deutschsprachigen Raum und auch gerade für die dortigen Anfänger, wären deutschsprachige Tutorials wohl um einiges attraktiver.

    • czery sagt:

      Ich denke gerade im Umfeld der Webentwicklung kann man voraussetzen, dass Englisch zumindest verstanden wird. Sonst kommt man in dem Bereich nicht sehr weit, da man immer wieder darauf stoßen wird.

  2. spintrick sagt:

    Prima Zusammenstellung! Ansonsten mal das deutschsprachige Tut von ScreendesignWhykiki bei YouTube checken. Der hat sich da sehr viel Mühe gegeben.

  3. Kurtis sagt:

    Hier noch ein gutes Schritt-für-Schritt-Tutorial auf deutsch für die Erstellung einer responsive HTML5-Seite: http://www.lingulo.com/de/tutorials/css/how-to-build-a-html5-website-from-scratch

Antworten