Kurs · Modul 293
Webauftritt erstellen und veröffentlichen
Nach diesem Kurs baust du eine mehrseitige Website mit sauberem, semantischem HTML und gestaltest sie mit CSS so, dass sie auf dem Handy genauso funktioniert wie am Bürobildschirm: mit Variablen, Flexbox, Grid und Media Queries nach Mobile First. Du erklärst jeden Darstellungsfehler mit Box-Modell und Spezifität, statt Werte zu raten, baust zugängliche Formulare, prüfst Kontrast, Tastaturbedienung und Ladezeit mit Lighthouse und stellst die Seite über GitHub Pages und bei einem Schweizer Hoster mit Domain, DNS und HTTPS online, inklusive Impressum und Datenschutzerklärung. Du lernst in 8 Lektionen am durchgehenden Beispiel des Café am See in Nidau, übst in 15 Code-Laboren direkt im Browser, wie Web-Logik funktioniert, baust die Website im geführten Projekt selbst und prüfst dich in einer Simulation des Kompetenznachweises. Rechne mit rund 20 bis 25 Stunden. Der Kurs wirkt, wenn du das Projekt wirklich selbst baust: Lesen allein ersetzt das Ausprobieren im Browser nicht.
Dein nächster Schritt
Das HTML-Grundgerüst: von der E-Mail zur ersten Seite
Du legst eine HTML-Datei mit korrektem Grundgerüst an, zeichnest Inhalte mit den wichtigsten Elementen aus und verlinkst Seiten mit relativen Pfaden und sicheren Dateinamen. · 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 · Struktur mit HTML | 0% | 0% | – |
| B · Gestalten mit CSS | – | – | – |
| C · Responsive Design | – | – | – |
| D · Formulare und Zugänglichkeit | – | – | – |
| E · Veröffentlichen | – | – | – |
Abzeichen
Lektionen
- 1Das HTML-Grundgerüst: von der E-Mail zur ersten SeiteDu legst eine HTML-Datei mit korrektem Grundgerüst an, zeichnest Inhalte mit den wichtigsten Elementen aus und verlinkst Seiten mit relativen Pfaden und sicheren Dateinamen.Gratis40 Min.
- 2Semantisches HTML: Struktur, die alle verstehenDu gliederst Seiten mit Landmarks, section, article und figure, setzt Überschriften als Inhaltsverzeichnis, baust zugängliche Tabellen und prüfst alles mit dem W3C Validator.40 Min.
- 3CSS-Grundlagen: Selektoren, Kaskade und Box-ModellDu schreibst CSS in einer externen Datei, verstehst Spezifität und Kaskade, rechnest mit dem Box-Modell und pflegst Farben und Abstände als CSS-Variablen.45 Min.
- 4Layout mit Flexbox und GridDu baust Navigationen mit Flexbox und Kachelraster mit Grid, rechnest fr-Spalten nach und entscheidest begründet, welches Werkzeug zu welcher Box passt.45 Min.
- 5Responsive Design und Mobile FirstDu setzt den Viewport-Meta-Tag, baust Layouts nach Mobile First mit Media Queries, machst Bilder und Breiten flexibel und begründest Breakpoints mit dem Inhalt.45 Min.
- 6Formulare: die Catering-AnfrageDu baust ein zugängliches Formular mit label, passenden Eingabetypen und Validierung, verstehst GET und POST und weisst, warum der Empfänger die Daten erneut prüfen muss.45 Min.
- 7Barrierefreiheit und schnelle LadezeitenDu schreibst gute alt-Texte, prüfst Kontraste nach WCAG, machst die Seite per Tastatur bedienbar, optimierst Bilder und liest Lighthouse-Ergebnisse richtig.45 Min.
- 8Online stellen: Git, Hosting, DNS und HTTPSDu veröffentlichst über GitHub Pages und per SFTP beim Hoster, verbindest die Domain per DNS, grenzt Fehler mit nslookup ein, aktivierst HTTPS und ergänzt Impressum und Datenschutzerklärung.45 Min.