Webseitengestaltung

(8 Videos, 63 Minuten)

Worum geht es?

Wie Du eine Webseite mit einem CMS aufbaut kennst Du eventuell schon, es gibt aber auch die Möglichkeit die Seite von Anfang an komplett selbst zu erstellen. Wie das funktioniert, zeigen wir Dir in diesem Online-Kurs. Damit Du versteht, wie Deine Webseite Schritt für Schritt entsteht, stellen wir Dir die Grundlagen in HTML und CSS vor.

Wie funktioniert der Online-Kurs?

Wir zeigen Dir in kurzen Videos die wichtigsten HTML- und CSS-Befehle und bauen Schritt für Schritt Deine Webseite auf, damit Du am Ende des Kurses ein fertiges Projekt hast.

1. Projektvorstellung und Einführung in HTML

Herzlich Willkommen zum ersten Termin des Online-Kurses "Meine erste Webseite." Was erwartet Dich diesen Freitag? Wir stellen Dir das Projekt vor, an dem wir gemeinsam die nächsten drei Wochen arbeiten werden. Du wirst sehen, dass beim Erstellen einer Webseite nicht nur technisches Verständnis gefragt ist, sondern auch Kreativität. Zudem erklären wir Dir im ersten Video die Plattform JSFiddle. Diese wirst Du für die Umsetzung des Projektes benötigen. Im zweiten Video starten wir mit der Einführung in HTML und erklären Dir die Grundlagen von HTML. Außerdem erhältst Du die ersten Wochenaufgaben, damit Du mit dem Projekt starten kannst. 

Alles über JS Fiddle


Einführung in HTML


Dies sind die HTML und CSS Vorlagen für die Webseite an denen wir arbeiten werden. Bitte kopiere die Inhalte und füge sie in JSFiddle an die richtige Stelle ein:

TEXT: Webseiten HTML-Vorlage

TEXT: Webseite CSS-Vorlage

2. HTML: Bilder, Verweise, Listen und Tabellen

Hallo! Diesen Freitag lernst Du in den Videos wie Du mit HTML u.a. Bilder einbinden kannst. Außerdem erklären wir Dir wie Du Verweise, Listen und Tabellen mit HTML erstellst. Auch diese Woche erwarten Dich wieder Wochenaufgaben, damit Du mit Deinem Projekt weiterkommst. Wenn Du diese erledigt hast, solltest Du alle vorgesehenen Inhalte in der Webseite haben.

Bilder und Verweise


Listen und Tabellen

Im diesem Abschnitt findest Du Übungen um Dein HTML-Wissen nochmal zu vertiefen.

PDF: HTML-Übung_1-Rezept

TEXT: HTML-Übung_1-Rezepttext

PDF: HTML-Übung_2-Steckbrief

3. Einführung in CSS (Webseitengestaltung)

Hallo! Nach dem wir uns die letzten zwei Wochen mit HTML beschäftigt haben, beschäftigen wir uns diese Woche mit CSS. Wir zeigen Dir in den Videos, wie Du mit mithilfe von CSS Deine Webseite gestalten bzw. aufhübschen kannst. Auch diese Woche erhälst Du wieder Wochenaufgaben, damit Dein Projekt bald fertig wird und es sich sehen lassen kann...

Einführung in CSS



Verwendung von Selektoren in CSS



Abstände und Texte formatieren in CSS

Im diesem Abschnitt kannst Du in einer Übung CSS-Befehle üben.

PDF: CSS-Übung_1-Schriftart

TEXT: CSS-Übung_1-HTML-Code

4. Tipps und Tricks für die Webseite

Hallo zum letzten Termin. Nach dem Du in den letzten Terminen HTML und CSS kennengelernt hast und Deine Webseite so gut wie fertig ist, möchten wir Dir noch ein paar Tipps und Tricks für Deine Webseite zeigen. So bekommt Deine Webseite den letzen Schliff!

Tipps & Tricks

Videoinhalte zum Nachlesen und nützliche Links

PDF: Tipps und Tricks

LINK: Youtube

LINK: Google Maps

Hier findest Du unsere Musterlösungen zur Beispiel-Webseite "London", falls Du nochmal was nachschauen möchtest:

TEXT: Musterlösung_Webseite_HTML

TEXT: Musterlösung_Webseite_CSS