Willkommen

Willkommen zum Open Tech School HTML & CSS Workshop! Dieser Kurs is eine simple und zusammengesfasste Anleitung, um Beginnern beim Lernen von HTML und CSS zu helfen.

HTML oder auch HyperText Markup Language ist eine Beschreibungs-Sprache, um Webseiten und andere Informationen zu erstellen, die im Browser angezeigt werden können. Du kannst deine Webanwendung in jeder beliebigen Programmiersprache schreiben, doch am Ende wird es immer auf HTML hinauslaufen. Denn das ist die Sprache, die der Browser spricht. Es ist eine hierachische Sprache.

Ein wenig Historie HTML wurde am CERN in der Schweiz entwickelt. Der Erfinder ist Tim Berners-Lee. 1980 schrieb er sein erstes Hypertext-System für eigene Zwecke: Der Vorgänger von HTML. Mit dem ersten Browser und Server machte sich das sehr junge Internet mit HTML an seiner Seite auf, um die Welt zu erobern. 1992 wurden zwei Kopien eines freien Web-Browsers vom CERN-Server in die USA heruntergeladen. 1995 wurde dann der erste Internet Explorer veröffentlicht.

Und HTML5? Was ist das? HTML5 ist lediglich die neueste Version von HTML. Es ist in aller Munde, weil es viele Verbesserungen und neue HTML-Elemente beinhaltet, die das Schreiben von HTML-Websites einfacher machen.

Was ist mit CSS? CSS oder Cascading Style Sheets ist eine Sprache, die genutzt wird um das Aussehen und die Formatierung von HTML-Dokumenten zu bestimmen. Es ist stark mit HTML verbunden, da es den HTML-Elementen "Stil" gibt. Im Gegensatz zu HTML hat CSS keine Hierachie und kann in nahezu beliebiger Reihenfolge geschrieben werden.

CSS3 ist die aktuelle Version von CSS und enthält ebenfalls viele Verbesserungen. Zum Beispiel verleiht es die Möglichkeit, HTML-Elemente zu animieren.

Worum es heute geht

Heute werden wir lernen, wie man Websites mit HTML schreibt und mit CSS stylen kann. Unser Ziel ist es, ein persönliches Portfolio mit Präsentation und Kontakt-Seite zu bauen.

Wenn du mit dem Erstellen deines persönlichen Portfolios fertig bist, kannst du hier einige spannende Links entdecken gehen. Du findest sie hier unterhalb der "Extra"-Sektion. Wenn du nach dem Erstellen deines Portfolios besonders interessiert daran bist, weiterhin HTML und CSS zu lernen, werden dir diese Resourcen dabei helfen.

Der Kurs

Die Template-Struktur - Benutzt HTML um aus einer blanken Seite ein 'Hello World'-Beispiel zu machen.
Your first styled Hello World! - CSS Verständnis. Was ist eine Klasse, eine ID und ein Selektor.
Erstelle Dein perönliches Portfolio - Part 1. - HTML5-Elemente, float, Box Modell und Schrift-Gestaltung.
Erstelle Dein perönliches Portfolio - Part 2. - Positionierung, Web-Links und Formular-Elemente.
Erstelle Dein perönliches Portfolio - Part 3. - Tabellen und Listen
Effekte und Formular - Effekte und Formulare

Cheat Sheet

Cheat Sheets sind unschätzbar wertvolle Resourcen wenn man HTML und CSS lernt. Wir empfehlen dir, diese PDF Cheat Sheets geöffnet und griffbereit zu haben, während du dich mit dem Workshop beschäfftigst und insbesondere darüber hinaus.

HTML5 - Benutze diesen Cheat Sheet um neue HTML-Elemente auszuprobieren.
HTML5 in Kurzform (DE) - Benutze diesen Cheat Sheet um eine kurze Übersicht der wichtigsten Elemente zu erhalten.
CSS3 - Benutze diesen Cheat Sheet um neue CSS-Selektoren kennen zu lernen.
CSS (DE) - Eine kurze Übersicht der wichtigsten Selektoren.
CSS LINT - Diese Seite prüft deinen CSS Code und zeigt eventuelle Fehler auf.

Referenz-Materialien

Das Mozilla Developer Network (MDN), von den Leuten, die den Firefox Browser gemacht haben, beherbergt einige grossartige Materialien:

HTML-Portal - Guide, Intro, Tutorials, Referenzen, Elemente, Attribute...
HTML Reference - Listet jedes HTML-Element auf. Lerne über jedes einzelne und benutze sie!
CSS Portal - Tutorials für effektiven CSS Code, CSS3 Demos und vieles mehr.
CSS Reference - Mehr CSS-Eigenschaften und -Klassen als du dir vorstellen kannst.
Google Fonts - Hier kannst du mit Fonts herumspielen und sie in dein Projekt einbauen, ohne sie herunterladen zu müssen.

Lern-Materialien

CodeAcademy - Ein gutes "Hands-On" Tutorial, um weiterhin HTML zu lernen.