# Lernleitfäden und Webseiten

Als Lernleitfäden oder Tutorial bezeichnet man Webseiten, die strukturiert Inhalte vermitteln. Dabei liegt die Qualität oft in der Art, wie Lernende zum Selbstlernen aktiviert werden. Ein gutes Tutorial zeigt an einem klar umrissenen Problem, wie es gelöst werden kann.

Tutorials sind oft auch als Blogbeiträge zu finden, im Folgenden sind komplexere Konstrukte zusammengestellt.

## HTML und CSS allgemein

- https://developer.mozilla.org/de/Learn | Die Mozilla Foundation engagiert sich für ein offenes und freies Web. Sie betreibt daher auch eine große mehrsprachige Website zu den Themen des Webs. Für den Einstieg ist besonders die Unterseite [Learning the Web](https://developer.mozilla.org/de/Learn) zu empfehlen.  
- https://www.html-seminar.de/einsteiger.htm | Erklärende Texte, Codebeispiele, Projekte
- http://learn.shayhowe.com/html-css/ | Erklärende Texte, Codebeispiele  
- http://www.afterhoursprogramming.com/tutorial/HTML/Introduction/ | Erklärende Texte, Codebeispiele, Testoberfläche  

## Layout

- http://de.learnlayout.com/ | ganz hervorragende Seite in Form eines kleinschrittigen Tutorials. Das Box-Modell wird dort auf sehr verständliche Weise erklärt. Auch die etwas trickreiche Positionierung mit `float` wird besprochen. Was fehlt, ist die neue Layouttechnik mit *Flexbox*.

## Listen, Menüs und Navigationen

- [Listamatic](http://css.maxdesign.com.au/listamatic/) | systematisches Onlinetutorial zur Gestaltung von Listen als Menüs und Navigationselemente. Veraltet, in den Grundlagen der Formatierung von HTML-Listen immer noch gültig.
- [CSS Navigation Bar](http://www.w3schools.com/css/css_navbar.asp) | Erstellung horizontaler und vertikaler Navigationsleisten mit CSS

## Nur CSS

- http://www.westciv.com/style_master/academy/css_tutorial/  
- http://www.cssbasics.com/  
- http://www.vogella.com/tutorials/CSS/article.html  
- http://html.net/tutorials/css/  

## Für Fortgeschrittene
https://dzone.com/refcardz/corecss-part1  

## Python mit dem Fokus auf Webdevelopment

- https://www.fullstackpython.com/ Sehr gute Übersicht allgemeiner Entwicklungsansätze und Differenzierung bekannter Frameworks wie Django und Flask