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.
Smashing Magazine: Coding a HTML5 Layout from Scratch
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
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
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
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
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
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
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.
Weitere interessante Artikel zu diesem Thema
CSS3 zur Suchmaschinenoptimierung
Gestern habe ich diesen Blog ein wenig für Suchmaschinen optimiert. Hierfür benutze ich wie so viele andere WordPress-Blog-Betreiber einige Plug-Ins, lege aber auch manuell noch ...
Geniale HTML5-Webanwendungen
Es ist schon erstaunlich, was manche Programmierer aus verschiedensten Webtechnologien herauskitzeln können. Es gibt eine ganze Reihe von tollen und nützlichen Anwendungen, die komplett im ...
Frameworks, Tools und Templates
Wie aktuell die Themen HTML5 und CSS3 sind, merke ich immer wieder daran, wie viele Blogs sich zur Zeit mit diesem Thema beschäftigen. Fast täglich ...