Bitte wählen Sie die Bereiche, die Sie exportieren möchten:
Schulung HTML, CSS und KI: Websites bauen, die man selbst versteht
Schulungsformen
Offene Schulung
- 4 Tage
- 5 gesicherte Termine
- Köln / Online
- 2.660,00 p. P. zzgl. MwSt.
- Dritter Mitarbeitende kostenfrei
- Learning & Networking in einem. Garantierte Durchführung ab 1 Teilnehmenden.
Inhouse-/Firmenschulung
- 4 Tage - anpassbar
- Termin nach Wunsch
- In Ihrem Hause oder bei der GFU
- Preis nach Angebot
- Lernumgebung in der Cloud
- Inhalte werden auf Wunsch an die Anforderungen Ihres Teams angepasst.
Individualschulung
- 4 Tage - anpassbar
- Termin nach Wunsch
- In Ihrem Hause oder bei der GFU
- Preis nach Angebot
- Lernumgebung in der Cloud
- 1 Teilnehmender = Fokus aufs Fachliche und maximaler Raum für individuelle Fragen.
Beschreibung
Dieses Seminar dreht die Reihenfolge und staffelt die Rolle der KI über vier Tage. Am ersten Tag wird von Hand gebaut, mit zwölf Bausteinen und einem einzigen neuen Werkzeug; die KI erklärt und erzeugt nichts. Am zweiten Tag wird aus der Seite ein Auftritt aus drei Seiten, und das erste Stylesheet kommt dazu. Am dritten Tag folgen Abstände und Anordnung, und die KI erzeugt dieselbe Gestaltung zum Vergleich mit der eigenen. Erst am vierten Tag, wenn die Teilnehmenden wissen, wie richtig aussieht, liefert sie vollständige Bausteine, die beurteilt, bereinigt und übernommen werden. Am Ende ist der eigene Auftritt veröffentlicht, und zu jeder Zeile darin gibt es eine Antwort auf die Frage, warum sie dort steht.
Weiterbildung mit noch mehr passenden HTML5 Trainings.
Schulungsziel
Wer das Seminar besucht hat, kann einen Auftritt aus mehreren verknüpften Seiten anlegen und ihn aus Überschriften, Absätzen, Listen, Verweisen, Bildern und Tabellen aufbauen, jedes Element in den Entwicklertools wiederfinden, ein gemeinsames Stylesheet anschließen, Abstände über das Box-Modell setzen, mit Flexbox und Grid anordnen, Farben und Schriftgrößen zentral über Custom Properties steuern, den Auftritt mit Medienabfragen und Container Queries auf jedem Gerät brauchbar machen, einen KI-erzeugten Baustein beurteilen und bereinigt übernehmen und den Auftritt geprüft veröffentlichen.Sie schreiben eine eigene Stilregel, nach der künftige KI-Entwürfe entstehen.
Details
Inhalt
- Ziele und Erwartungen der Teilnehmenden
- Klärung individueller Lernziele und Erwartungen für ein praxisnahes und relevantes Seminar
- Tag 1: Die erste eigene Seite
- 1. Die Seite anlegen und sich darin wiederfinden
- Einen Ordner anlegen, die Datei index.html erzeugen und im Browser öffnen
- Die fünf Zeilen, die jede Seite braucht: doctype, html, head mit charset und title, body
- Den ersten Text schreiben mit h1 und p, speichern, neu laden
- Was ein Element ist: öffnendes Tag, Inhalt, schließendes Tag
- Die Entwicklertools mit F12 öffnen und den eigenen Text im Reiter Elemente wiederfinden
- 2. Die Bausteine für Text und Bild
- Überschriften h1, h2 und h3, und wozu die Reihenfolge gut ist
- Absätze und Listen: p, ul und li
- Verweise mit a und href: innerhalb der Seite, nach außen und als mailto
- Bilder mit img, src und alt
- Nach jedem Baustein speichern und im Browser nachsehen
- 3. Die Seite in vier Bereiche teilen
- header, nav, main und footer als die vier Bereiche einer einfachen Seite
- Die Navigation als Liste von Verweisen innerhalb von nav
- Warum diese Namen besser sind als div
- Die KI als Erklärer nutzen: sich ein unbekanntes Element erklären lassen, ohne Code erzeugen zu lassen
- Die Bereiche in den Entwicklertools auf- und zuklappen
- Praxis-Übung (Tag 1): Eine eigene Seite mit den vier Bereichen anlegen, darin eine Überschrift, zwei Absätze, eine Liste, einen Verweis und ein Bild mit Alternativtext unterbringen und jedes Element in den Entwicklertools wiederfinden.
- Tag 2: Aus einer Seite wird ein Auftritt
- 4. Pfade, Dateien und Tabellen
- Relative und absolute Pfade, und wann welcher gebraucht wird
- Bilder in einen Unterordner legen und die Pfade richtig schreiben
- Eine Datei zum Herunterladen verknüpfen
- Einfache Tabellen für Preise und Öffnungszeiten: table, thead, tbody, tr, th, td
- Zeichen, die maskiert werden müssen, und Kommentare im Code
- 5. Mehrere Seiten statt einer
- Eine zweite und dritte Datei anlegen und untereinander verknüpfen
- Die Navigation auf allen Seiten gleich halten
- Eine Ordner- und Dateibenennung, in der man sich nach Monaten wiederfindet
- Die gerade geöffnete Seite in der Navigation kennzeichnen
- Die KI als Erklärer: sich den Unterschied zwischen relativem und absolutem Pfad erklären lassen
- 6. Das erste Stylesheet anschließen
- Die Datei style.css anlegen und mit link rel="stylesheet" verknüpfen
- Die ersten Regeln: color, background-color, font-family, font-size
- Selektoren für Element und Klasse, dazu das Attribut class im HTML
- Ein Stylesheet für alle drei Seiten
- Jede Regel im Reiter Stile der Entwicklertools wiederfinden und dort probehalber ändern
- Praxis-Übung (Tag 2): Aus der eigenen Seite einen Auftritt aus drei verknüpften Seiten machen, darin eine Tabelle und ein Bild aus einem Unterordner unterbringen, ein gemeinsames Stylesheet anlegen und Schrift und Farben für alle drei Seiten setzen.
- Tag 3: Abstände, Anordnung, zentrale Steuerung
- 7. Abstände und das Box-Modell
- margin, border, padding und der Inhalt als die vier Ringe jeder Box
- Das Box-Modell in den Entwicklertools ansehen und die Werte dort verändern
- box-sizing mit dem Wert border-box, und warum man damit anfängt
- Kaskade und Spezifität an der Stelle erklären, wo zwei eigene Regeln sich widersprechen
- 8. Anordnen mit Flexbox und Grid
- Die Navigation mit display flex, dazu gap, justify-content und align-items
- Den Hauptteil mit display grid und grid-template-columns
- repeat(auto-fit, minmax()) für Karten, die sich selbst umbrechen
- Wann Flexbox das richtige Mittel ist und wann Grid
- Die Grid-Überlagerung in den Entwicklertools einschalten und die Spalten prüfen
- 9. Farben und Größen an einer Stelle
- Custom Properties in :root anlegen und mit var() verwenden
- Eine Farbe ändern und die Wirkung auf allen drei Seiten beobachten
- Schriftgrößen mit clamp() festlegen
- Die KI dieselbe Gestaltung erzeugen lassen und mit der eigenen vergleichen
- Praxis-Übung (Tag 3): Die Navigation mit Flexbox und den Hauptteil mit Grid anordnen, die Abstände über das Box-Modell setzen und alle Farben und Schriftgrößen auf Custom Properties umstellen.
- Tag 4: Responsiv, beurteilt, veröffentlicht
- 10. Auf jedem Gerät brauchbar
- Die Zeile viewport im head, ohne die nichts responsiv wird
- Medienabfragen mit @media und min-width
- Container Queries mit container-type und @container
- Bilder mit max-width, width, height, aspect-ratio und loading mit dem Wert lazy
- Dunkelmodus mit prefers-color-scheme
- Die Geräteleiste in den Entwicklertools nutzen und am eigenen Telefon nachprüfen
- 11. KI-Entwürfe beurteilen und übernehmen
- Einen vollständigen Baustein erzeugen lassen, etwa eine Kartenreihe oder einen Kopfbereich
- Den gelieferten Code durchgehen: welche Elemente stimmen, welche stehen ohne Zweck darin
- Die wiederkehrenden Fehler der Generatoren: verschachtelte div, fehlende alt-Texte, mehrere h1, !important
- Was nie ungelesen übernommen wird: eingebettete Skripte und fremde Schriften
- Eine eigene kurze Stilregel schreiben, nach der künftige Entwürfe entstehen
- 12. Prüfen und veröffentlichen
- Alle drei Seiten im W3C-Validator prüfen und die Meldungen lesen
- Mit der Tabulatortaste durch die Seiten gehen und den Fokus sichtbar machen
- Kontrast und Alternativtexte prüfen, Lighthouse einmal laufen lassen und den Befund einordnen
- title und description je Seite für die Anzeige in Suchergebnissen setzen
- Veröffentlichen auf den eigenen Webspace oder mit Netlify Drop, mit Hinweis auf Impressum und Datenschutzerklärung bei eingebundenen Schriften und Karten
- Praxis-Übung (Tag 4): Den eigenen Auftritt responsiv machen, mindestens eine Komponente mit einer Container Query umschalten, einen KI-erzeugten Baustein beurteilen und bereinigt übernehmen, alle Seiten prüfen und veröffentlichen.
Behandelt werden die in allen aktuellen Browsern verfügbaren Techniken, einschließlich Custom Properties, Grid, clamp() und Container Queries.
Zielgruppe & Vorkenntnisse
- Einsteiger ohne Programmiererfahrung, die eine eigene Seite bauen und pflegen wollen
- Mitarbeitende in Marketing, Redaktion und Kommunikation, die HTML-Bausteine im CMS anfassen müssen
- Quereinsteiger, die mit KI-Werkzeugen Code erhalten und ihn nicht beurteilen können
- Selbstständige, die eine kleine Seite selbst betreiben, statt sie in Auftrag zu geben
Ihre Schulung
In Präsenz | Online |
|---|---|
| Lernmethode | |
Ausgewogene Mischung aus Theorie und praktischen Übungen auf persönlichem Schulungs-PC. | Wie auch bei unseren Präsenz-Seminaren: Ausgewogene Mischung aus Theorie und praktischen Übungen. Trainer durchgehend präsent. |
| Unterlagen | |
Seminarunterlagen oder Fachbuch inklusive. Das Fachbuch wählt der Trainer passend zum Seminar aus - Ihren individuellen Buch-Wunsch berücksichtigen wir auf Nachfrage gerne. | Seminarunterlagen oder Fachbuch inklusive (via DHL). Das Fachbuch wählt der Trainer passend zum Seminar aus - Ihren individuellen Buch-Wunsch berücksichtigen wir auf Nachfrage gerne. |
| Arbeitsmaterialien | |
DIN A4 Block, Notizblock, Kugelschreiber, USB-Stick, Textmarker, Post-its | |
| Teilnahmezertifikat | |
Nach Abschluss des Seminars erhalten Sie das Teilnahmezertifikat inkl. Inhaltsverzeichnis per E-Mail als PDF. | |
Organisation
In Präsenz | Online | |
|---|---|---|
| Teilnehmendenzahl | ||
min. 1, max. 8 Personen | ||
| Garantierte Durchführung | ||
Ab 1 Teilnehmenden* | ||
| Schulungszeiten | ||
| ||
| Ort der Schulung | ||
 GFU SchulungszentrumAm Grauen Stein 27 51105 Köln-Deutz oder online im Virtual Classroom oder europaweit bei Ihnen als Inhouse-Schulung Um ein optimales Raumklima zu gewährleisten, haben wir das Schulungszentrum mit 17 hochmodernen Trotec TAC V+ Luftreinigern ausgestattet. Diese innovative Filtertechnologie (H14 zertifiziert nach DIN EN1822) sorgt dafür, dass die Raumluft mehrfach pro Stunde umgewälzt wird und Schadstoffe zu 99.995% im HEPA-Filter abgeschieden und infektiöse Aerosole abgetötet werden. Zusätzlich sind alle Räume mit CO2-Ampeln ausgestattet, um jederzeit eine hervorragende Luftqualität sicherzustellen. | ||
| Räumlichkeiten | ||
Helle und modern ausgestattete Räume mit perfekter Infrastruktur | Bequem aus dem Homeoffice von überall | |
| Preisvorteil | ||
Dritter Mitarbeitende nimmt kostenfrei teil. Eventuell anfallende Prüfungskosten für den dritten Teilnehmenden werden zusätzlich berechnet - auch bei Seminaren inkl. Prüfungsgebühr. Hinweis: Um den Erfolg der Schulung zu gewährleisten, sollte auch der dritte Teilnehmende die erwarteten Vorkenntnisse mitbringen. | ||
| KOMPASS — Förderung für Solo-Selbstständige | ||
Solo-Selbstständige können für dieses Seminar eine Förderung via KOMPASS beantragen. | ||
| All-Inclusive | ||
Gebäck, Snacks und Getränke ganztägig, Mittagessen im eigenen Restaurant, täglich 6 Menüs, auch vegetarisch | Eine Auswahl unserer Frühstücks-Snacks und Nervennahrungs-Highlights senden wir Ihnen mit den Seminarunterlagen via DHL zu. | |
| Barrierefreiheit | ||
Das GFU-Schulungszentrum (Am Grauen Stein 27) ist barrierefrei | - | |
Buchen ohne Risiko
| Rechnungsstellung |
Erst nach dem erfolgreichen Seminar. Keine Vorkasse. |
| Stornierung |
Kostenfrei bis zum Vortag des Seminars |
| Vormerken statt buchen |
Sichern Sie sich unverbindlich Ihren Seminarplatz schon vor der Buchung - auch wenn Sie selbst nicht berechtigt sind zu buchen |
Kostenfreie Services
In Präsenz | Online |
|---|---|
|
|
Buchungsmöglichkeiten
Online oder in Präsenz teilnehmen
Sie können sowohl Online als auch in Präsenz am Seminar teilnehmen. Klicken Sie bei Ihrer Buchung oder Anfrage einfach die entsprechende Option an.
Gesicherte offene Termine
| Termin | Ort | Preis | ||
|---|---|---|---|---|
| 2027 | ||||
| 15.02.-18.02.2027 Plätze vorhanden Köln / Online 2.660,00 | Köln / Online | 2.660,00 | Buchen Vormerken | |
| 19.04.-22.04.2027 Plätze vorhanden Köln / Online 2.660,00 | Köln / Online | 2.660,00 | Buchen Vormerken | |
| 21.06.-24.06.2027 Plätze vorhanden Köln / Online 2.660,00 | Köln / Online | 2.660,00 | Buchen Vormerken | |
| 23.08.-26.08.2027 Plätze vorhanden Köln / Online 2.660,00 | Köln / Online | 2.660,00 | Buchen Vormerken | |
| 25.10.-28.10.2027 Plätze vorhanden Köln / Online 2.660,00 | Köln / Online | 2.660,00 | Buchen Vormerken | |
- Lernumgebung in der Cloud
- Inhalte werden auf Wunsch an die Anforderungen Ihres Teams angepasst.
- Lernumgebung in der Cloud
- 1 Teilnehmender = Fokus aufs Fachliche und maximaler Raum für individuelle Fragen.
- Alle folgenden Schulungsformen können auch Online als Virtual Classroom durchgeführt werden.
- Eine Offene Schulung findet zu einem festgelegten Zeitpunkt im voll ausgestatteten Schulungszentrum oder Online/Remote statt. Sie treffen auf Teilnehmende anderer Unternehmen und profitieren vom direkten Wissensaustausch.
- Eine Inhouse-/Firmen-Schulung geht auf die individuellen Bedürfnisse Ihres Unternehmens ein. Sie erhalten eine kostenfreie Beratung von Ihrem Seminarleiter und können Inhalte und Dauer auf Ihren Schulungsbedarf anpassen. Inhouse-Schulungen können Europaweit durchgeführt werden.
- Bei einer Individual-Schulung erhalten Sie eine 1-zu-1 Betreuung und bestimmen Inhalt, Zeit und Lerntempo. Der Dozent passt sich Ihren Wünschen und Bedürfnissen an.
Sie können unsere Schulungen auch als Remote Schulung im Virtual Classroom anfragen.
In drei Schritten zum Online Seminar im Virtual Classroom:
- Seminar auswählen und auf "Buchen" klicken
- Wählen Sie bei "Wie möchten Sie teilnehmen?" einfach "Online" aus.
- Formular ausfüllen und über den Button "Jetzt buchen" absenden.
Unser Kundenservice meldet sich bei Ihnen mit der Buchungsbestätigung.
Unsere Online Schulungen finden im Virtual Classroom statt. Ein Virtual Classroom bündelt mehrere Werkzeuge, wie Audio-Konferenz, Text-Chat, Interaktives Whiteboard, oder Application Sharing.
Vorteile von Virtual Classroom:
- Sie erhalten 1 zu 1 die gleiche Lernumgebung, die Sie auch vor Ort bei uns vorfinden
- Die technische Vorbereitung wird von den GFU-Technikern vorgenommen
- Sie erhalten remote Zugriff auf Ihren persönlichen Schulungs-PC im GFU-Seminarraum
- Die Virtual Classroom Lösung lässt sich auch im Browser betreiben
- Die GFU-Technik leistet wie gewohnt Soforthilfe bei Problemen
- Die Schulungsunterlagen bekommen Sie via DHL zugeschickt
- Sie sparen Reisekosten und Zeit
- 15. Feb. - 18. Feb. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- 19. Apr. - 22. Apr. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- 21. Jun. - 24. Jun. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- 23. Aug. - 26. Aug. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- 25. Okt. - 28. Okt. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- Auch als Inhouse-Schulung, bundesweit mit Termin nach Wunsch und individuellen Inhalten
- Buchen ohne Risiko! Kostenfreie Stornierung bis zum Vortag des Seminars
Die Seminare der GFU finden in angenehmer Atmosphäre statt und sind perfekt organisiert. Profitieren Sie von dem Rundum-Service der GFU!
Machen Sie sich keinen Kopf um die Anreise! Unser Shuttle fährt Sie. Oder Sie parken einfach auf einem extra für Sie reservierten Parkplatz.
Hotelzimmer gesucht? Wir organisieren Ihnen eins. Ihr Vorteil: Sie sparen Zeit und Geld!
Stornierung bei offenen Seminaren kostenfrei bis einen Tag vor Schulungsbeginn.
Unsere Techniker sind immer zur Stelle, egal ob online oder vor Ort.