Schau dir den Quelltext dieser Website an. Wie lautet die Klasse dieses Absatzes?

Öffne nun den Link zur training.css, in welcher du Teile des Styles findest. Was steht für diese Klasse dort?

Hinweis: Rechtsklicke dazu auf den Seitenkörper und wähle Seitenquelltext anzeigen.

Du kannst das mit jeder Website machen. Nur serverseitig ausgeführter Code kann nicht gelesen werden. Versuch es doch mal auf Youtube oder so.

Praxisaufgabe - hier noch wichtiger als überall sonst. Schreibe deine eigene Website - Teil 1

Nutze HTML, um den Inhalt deiner Website zu definieren.

Hinweis: Organisiere deine Website in Unterteile - ein div für jeden Teil, die Navigationsleiste, den Mittelteil etc

Hinweis: Enthalten die einzelnen Teil auch mehrere Elemente? Nutze divs in divs

Hinweis: Erstelle eine Navigationsleiste als normale Liste (ul oder ol) mit Links als Listenelementen - der Rest passiert erst in CSS

Hinweis: Wenn du irgendwelche Teile nicht weißt, schau in der Playlist nach.

Praxisaufgabe 2 - Schreibe deine eigene Website

Nutze CSS, um die Website hübsch zu machen.

Hinweis: Erweitere bei Bedarf deinen HTML-Code um Klassen und IDs, Klassen, wenn du das Aussehen auch auf andere Objekte übertragen möchtest, IDs, wenn es nur auf dieses eine Element zutreffen soll.

Hinweis: Mit float kannst du organisieren, wo das Element hinfließen soll. Das solltest du nur für divs nutzen.

Hinweis: Nutze eine andere Schriftart, font-weight und font-size, um die Schrift anzupassen.

Hinweis: Für die Liste - nutze list-style: none, um Punkte zu entfernen und lass sie nach oben oder links fließen. Mit display: inline-table für li kannst du Listenelemente nebeneinander anordnen.

Hinweis: Gib deiner Liste einen anderen Hintergrund, einen Schatten oder eine Border, damit sie sich abhebt.

Hinweis: Lass Listenelemente, die überfahren werden mit li:hover anders erscheinen - zum Beispiel über den Hintergrund. Findest du dieses Element in meinem Code?

Hinweis: Probier mal runde Ecken an einer deiner anderen divs aus.

Hinweis: Überlege, ob Elemente, die immer mitscrollen, auf deiner Website sinnvoll sind.

Hinweis: Wenn du irgendwelche Teile nicht weißt, schau in der Playlist nach.

Praxisaufgabe 3 - dynamische Elemente

Nutze JavaScript, damit sich die Website dynamisch verändern kann.

Hier ist allein deine Fantasie gefragt. Alles, was sich während dem Betrieb verändern soll, ist JavaScript. Die Überprüfung der forms auf dieser Seite, Timer, Berechnungen - all das ist JavaScript.

Wenn du irgendwelche Teile nicht weißt, schau in der Playlist nach.

Praxisaufgabe 4 - Datenbanken und das Speichern von Elementen

Können deine Nutzer Dinge tun, die bleiben sollen? Gibt es Logins? Posts, Foren, Kommentare? Das wird mit Datenbanken gemacht.

Schau, ob du eine Seite findest, die hier PHP nutzt.

Lösung: Die Abstimmung und der Wunschzettel sind mit PHP geschrieben.

Wenn du irgendwelche Teile nicht weißt, schau in der Playlist nach.


Diese Website nutzt Cookies, um deinen Lernfortschritt zu speichern. Falls du das nicht möchtest, kannst du unter deinen Browsereinstellungen Cookies deaktivieren.

Facebook Twitter WhatsApp YouTube