Kurs · Modul 101
Webauftritt erstellen und veröffentlichen
Nach diesem Kurs setzt du einen kleinen Webauftritt selbstständig um, von der Planung bis zur Livestellung. Du leitest aus einem Kundengespräch Zielgruppen, Sitemap und Wireframes ab und begründest deine Struktur. Du schreibst sauberes, semantisches HTML, das der W3C Validator ohne Fehler akzeptiert, mit eigenen Titeln, Meta-Beschreibungen und Alt-Texten. Du setzt ein Corporate Design mit CSS-Variablen, lokal eingebundenen Webfonts, Box Model und Flexbox um und machst die Seite mit Mobile First und Media Queries handytauglich. Bilder bringst du auf die richtige Grösse, wählst das passende Format und lieferst sie mit srcset und Lazy Loading aus, sodass eine Seite unter 1 MB bleibt. Zum Schluss lädst du die Website per SFTP oder Git-Hosting hoch, verstehst die DNS-Einträge, aktivierst HTTPS, findest Fehler auf dem Server und weisst, was in Impressum und Datenschutzerklärung gehört. Vertiefte CSS-Techniken wie Grid und Animationen lernst du im Modul 287. Üben musst du selbst: Die zwölf Code-Labore, das Projekt mit fünf Meilensteinen und die Prüfungssimulation sind genau dafür gebaut.
Dein nächster Schritt
Vom Briefing zur Sitemap
Du leitest aus einem Kundengespräch Zielgruppen, Content-Inventar, Sitemap und Handy-Wireframe ab, begründest deine Struktur und legst Ordner und Dateinamen serverfest an. · 40 Min.
Dein KI-Lerncoach
Lernen mit KI, aber richtig
Der Tutor kennt dieses Modul, deine Lektion und deine Aufgaben. Er führt dich zur Lösung, statt sie vorzusagen.
Training
…
Aufgaben gelöst
Karteikarten
…
Karten im Kurs
Praxisprojekt
…
Meilensteine
Prüfung
…
bestes Ergebnis
Deine Kompetenzen
offen begonnen sicher gemeistert
Berechnet aus deinen gelösten Aufgaben. Ziel für den Kompetenznachweis: überall mindestens «sicher» auf Stufe 2.
| 1 · Grundlagen | 2 · Fortgeschritten | 3 · Erweitert | |
|---|---|---|---|
| A · Planung und Struktur | 0% | 0% | 0% |
| B · Aufbau mit HTML | – | – | – |
| C · Gestaltung mit CSS | – | – | – |
| D · Responsive und Medien | – | – | – |
| E · Veröffentlichen | – | – | – |
Abzeichen
Lektionen
- 1Vom Briefing zur SitemapDu leitest aus einem Kundengespräch Zielgruppen, Content-Inventar, Sitemap und Handy-Wireframe ab, begründest deine Struktur und legst Ordner und Dateinamen serverfest an.Gratis40 Min.
- 2HTML-Grundgerüst, Links und BilderDu baust Seiten mit korrektem Grundgerüst, Überschriften, Listen, relativen Links und Bildern mit gutem Alt-Text.40 Min.
- 3Semantische Struktur, Tabellen und KopfbereichDu gliederst Seiten mit header, nav, main, section und footer, baust saubere Überschriften und Tabellen, schreibst Titel, Meta-Beschreibung und Open Graph und validierst ohne Fehler.45 Min.
- 4CSS-Grundlagen: das Corporate Design umsetzenDu setzt Farben, Schriften und Abstände mit Selektoren und CSS-Variablen um, bindest einen Webfont lokal ein und rechnest sicher mit dem Box Model.45 Min.
- 5Flexbox-Layout und DevToolsDu ordnest Navigation, Karten und Footer mit Flexbox an, findest Abweichungen zum Entwurf mit den DevTools und begründest Gestaltungsentscheide.40 Min.
- 6Responsive mit Mobile FirstDu machst den Auftritt mit Viewport-Tag, Media Queries, relativen Einheiten und daumenfreundlichen Klickflächen fit für Handy, Tablet und Desktop.40 Min.
- 7Bilder und Medien optimierenDu bestimmst Pixelmasse und Format, schätzt Ladezeiten ab, lieferst Bilder mit srcset, sizes und Lazy Loading aus und belegst das Ergebnis mit Lighthouse.45 Min.
- 8Online stellen: Domain, DNS und HTTPSDu verstehst Domain, DNS und Hosting, lädst per SFTP oder über Git-Hosting hoch, aktivierst HTTPS und prüfst die Weiterleitungen.40 Min.
- 9Impressum, Datenschutz und AbnahmeDu grenzst Fehler auf dem Server ein, kennst die Grundlagen zu Impressum und Datenschutzerklärung in der Schweiz, prüfst die Barrierefreiheit und führst die Abnahme durch.45 Min.