Hier starten
- Einleitung
- Installation der benötigten Tools
Erste Schritte mit HTML
- Erste Schritte mit HTML
- Das HTML - Grundgerüst
- Links in HTML
- Überschriften & Absätze
- Bild in den "img" - Ordner bekommen
- Bilder einbinden
- Umlaute in HTML
Erste Schritte mit CSS
- Einführung in CSS
- Schrift & CSS
- Farben in CSS
- Das Box-Modell
- Floats in CSS
- #id und .class in CSS
- Wir entwickeln ein Layout mit CSS
- Layout zentrieren
- Exkurs: CSS-Selektoren mit Komma
- Exkurs: CSS-Selektoren mit Leertaste
Exkurs: Webdesign
- Einführung: Webdesign
- Farben im Web
- Schriften im Web
- Bilder im Web
- Icons im Web
- Tipp: Verwende ein Grid!
- Exkurs: Wir entwickeln unser eigenes Grid (1)
- Exkurs: Wir entwickeln unser eigenes Grid (2)
Projekt: Wir setzen ein echtes Design mit HTML & CSS um!
- Lade dir das Projekt als Bild herunter
- Was erwartet dich?
- Wir erleichtern uns die Umsetzung mit Skeleton (CSS)
- Ausblick: Header - Bereich
- Hintergrundbild vom Header - Bereich
- Navigation umsetzen (1)
- Navigation umsetzen (2)
- Header - Slogan
- Exkurs: Hintergrundbild mit GIMP optimieren
- Header finalisieren - wir sind mit dem Header fertig!
- Services umsetzen
- Icons & HTML
- Update: Font-Awesome
- Icons einbauen + Aufgabe
- Musterlösung: Icons einbauen
- Services finalisieren
- Ausblick: Icon-Auflistung (Feature) - Bereich
- Icon - Auflistung (Features) bauen
- Icon - Auflistung (Features) fertigstellen (1)
- Icon - Auflistung (Features) fertigstellen (2)
- Ausblick: Kundenmeinungen (Clients) - Bereich
- Kundenmeinungen (Clients) umsetzen
- Kundenmeinungen: Zitat
- Hinweise zu den nächsten paar Lektionen
- Exkurs: position:relative in CSS
- Exkurs: position: absolute
- Exkurs: position:relative in einem position:absolute
- Pfeil korrekt positionieren
- Pfeil erzeugen mit CSS
- HTML aufräumen mit Pseudo-Elementen
- Aufgabe: Kundenmeinungen
- Musterlösung: Kundenmeinungen finalisieren
- Ausblick: Team - Bereich
- Display: inline-block
- Team - Überschrift umsetzen
- Team - Bilder umsetzen
- Icons einbauen
- Team - Bereich fertigstellen
- Ausblick: Kontakt - Bereich + Aufgabe
- Lösung: Kontakt - Bereich umsetzen + neue Aufgabe
- Lösung: Icons vom Kontakt - Bereich umsetzen
- Kontakt - Formular entwickeln
- Exkurs: Spezifität von CSS - Selektoren
- Fußbereich (Footer) entwickeln
- Sprungmarken hinzufügen
- Ausblick: Auf Ereignisse reagieren (:hover und :focus)
- :hover und :focus + Aufgabe
- :hover und :focus (Musterlösung)
- Exkurs: Browserunterschiede bei CSS - Befehlen
- Einführung: CSS - Animationen
- Wir hübschen die Seite mit ein paar Animationen auf
- Achtung! Verschiedene Browser zeigen Webseite unterschiedlich an
- Beispiel: Internet Explorer, Seite dafür optimieren
- Wie du einen Internet Explorer unter Mac / Linux ans Laufen bekommst
- Tipp: Autoprefixer
- Beispiel: Elemente rotieren
CSS optimieren mit SASS
- Einführung: SASS
- [Nur Mac]: At-Zeichen kann nicht eingegeben werden
- Verschachteln von CSS optimieren mit SASS
- Mixins mit Parametern (SASS)
- SASS in unser Projekt einbauen (1)
- SASS in unser Projekt einbauen (2)
Responsive Webdesign (Webdesign für Desktop, Smartphone, Tablet)
- Einführung: Response Webdesign
- Erste Schritte mit @media - queries
- Wir fangen an, unser Design responsive zu machen
- Wir optimieren unsere @media - Queries mit SCSS
