Web Design Exercises

Animal Page

Animal Page

Exercise 1

Gelernt: Genereller Umgang mit html und Visual Studio Code.

Schwierigkeiten: Selbstständige Recherche im Internet, herausfinden von Funktionen.

What to do at home

What to do at home

Exercise 2

Gelernt: Umgang mit Listen und Links, Unterschiede von Listentypen.

Schwierigkeiten: Verstehen der Linkstrukturen und Ordnung, Platzierung des Bildes in der Liste, so dass es schön aussieht und ordentlich. Ansteuern von speziellen Elementen in css.

Diary

Diary

Exercise 3

Gelernt: Umgang mit Menüs, floats und block- und semantic-elements. Unterschied zwischen inline und block-elements.

Schwierigkeiten: Erstellen des zweiten Menüs und herausfinden wie man es anders gestaltet, verstehen des float Prinzips. Generell schwierig in week 3 fand ich das Verstehen des relative absolute positioning.

Tribute page - float layout

Tribute page - float layout

Exercise 4

Gelernt: Erstellen eines asides und headers und footers. Inkludieren eines Links in einem Bild.

Schwierigkeiten: Große Schwierigkeiten mit dem header, er war erst zu groß, dann hat er Text verdeckt, dann den Text halb gezeigt.

Tribute page - grid and gallery

Tribute page - grid and gallery

Exercise 5

Gelernt: Umgang mit Grid System, fiel mir leichter als das float.

Schwierigkeiten: H1 und Menü verschwanden teils im Header, Grund war eine zu große Schriftgröße, die Schriftgrößen-Festlegung war an der falschen Stelle und hatte Werte des parents multipliziert.

Responsive Design

Responsive Design

Exercise 6

Gelernt: Responsive Design für Handys und Tablets.

Schwierigkeiten: Das Cascading der Media-queries hat einige Probleme bereitet, da ich eine Klasse die ich für die media queries verändert habe für den grid container nur im index html file hatte und nicht im gallery html file, was die Formatierung komplett durcheinander brachte.