HTML, CSS & p5: Meine erste Webseite

Square

Im ersten Semester entwickelten wir im Fach «Interaktive Medien I» eine eigene Webseite. Ziel war es, die Sprachen HTML, CSS, und p5.js kennenzulernen. Darum schrieben wir für unsere eigene Homepage alles von Null auf. Ganz nach dem Grundsatz «Mobile first» ist die Seite komplett responsive. Check it out!

Desktop-Version

Bei einem grossen Browserbreite, werden der Text und die Bilder nebeneinander angezeigt.

Bilder untereinander

Für die Ansicht auf einem Tablet werden der Text und die Bilder untereinander angezeigt. Da die Bilder den Kern der Seite bilden, wollte ich versuchen, ihnen immer genügend Platz zu geben.

 

Navigation untereinander

 

Mobile-Version

Auf dem Handy wird dann die Navigation eingeklappt und kann mit einem sogenannten Burger-Menu bedient werden.

 

P5.js Element

Auf meiner ersten Webseite habe ich auch ein p5.js Element eingebaut – mein erster Schritt in Richtung JavaScript! Wenn man auf das graue Feld klickt, erscheinen nacheinander mehrere Begriffe. Es sind alles Dinge, die Leute in meinem Umfeld mit Paris verbinden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.