Leitfaden zum Lernen

Wie gehe ich am besten vor?

  Hier ist ein roter Faden mit Lernschritten durch den Web Astronaut. Er ist für Leute gedacht, die noch keine Erfahrung im Schreiben von HTML- und CSS-Code haben.


Teil 1

Level I - Einstieg HTML-Code

HTML-Rubrik "HTML baut Texte auf"

Du beginnst HTML-Tags zu schreiben. Du brauchst dafür "nur" den Browser, deine ersten Schritte wirst du in sog. Codepens wagen.


Level II - Einstieg CSS-Code

CSS-Rubrik "Tyopgrafie"

Du beginnst CSS zu schreiben. Du brauchst dafür "nur" den Browser, du schreibst den Code direkt in Codepens, die du schon vom Level I kennst.


Level III - Boxen

CSS-Rubrik "Box-Modell"
HTML-Rubrik "Seiten-Bereiche"
CSS-Rubrik "Farben"

Du lernst, wie Boxen in HTML definiert und mit CSS formatiert werden. Dieses elementare Wissen brauchst du, um HTML-Seiten aufzubauen. Auch diesen Level übst du in Codepens.

Am besten startest du mit den Erklärungen auf der Seite "Das Box-Modell". Dort findest du die Theorie über die "Schichten" der Boxen, die nötig ist, um diesen Level zu verstehen.

Box mit Stil
Seiten-Bereiche

Level IV - Boxen für Profis

CSS-Rubrik "Noch mehr über Boxen"

Der Level IV baut auf dem Level III auf.


Teil 2

Level V - Links & Medien

Voraussetzung für die Arbeit im Level V: du brauchst einen sog. Code-Editor auf deinem Computer.
Auf der Seite "Code Editoren" findest du Vorschläge dafür.

HTML-Rubrik "Links setzen"
HTML-Rubrik "Medien einbetten"

Weil das Setzen von Links in Codepens nicht so einfach geht, wirst du dieses Thema in einem separaten Paket auf deinem Compi üben, das du vorgängig herunterladen musst (Button unten). Beim diesem Paket handelt es sich um ein kleines Webprojekt mit zahlreichen Übungen, die direkt darin eingebaut sind.

Die Lösung der Übungen findest du hier. Versuche es doch zuerst selber zu lösen, bevor du "spickst".


Level VI - Links & Buttons

CSS-Rubrik "Links und Buttons"

Im Level V ging's um das HTML von Links und die Pfade, jetzt kommt noch das CSS hinzu, um das "Fleisch am Knochen" zu programmieren. Ein weiteres Thema sind "Rollover-Effekte auf Links.


Level VII - Selektoren

CSS-Rubrik "CSS fischt HTML"

Jetzt wird es etwas komplizierter. Es geht darum, wie man mit Hilfe von CSS-Selektoren HTML-Tags auswählen kann, um sie darauf zu formatieren.


Level VIII - Tabellen

HTML-Rubrik "HTML-Tabellen"
CSS-Rubrik "Tabellen formatieren"