Tema 2: Web

Tema 2: web (startside)

//studiestartsprøven

Tema 2 drejede sig om studiestartsprøven, som var det første møde med studiet.

Her blev jeg først og fremmest introduceret til HTML og CSS. Alt fra hvordan man skal placere sine filer, til css-grid og upload i FTP'en FileZilla. Til opgaven havde vi et udleveret wireframe og layoutdiagram som vi skulle følge, samt billeder og tekst. Dermed var der kun få steder hvor vi skulle tilføje eget indhold, fx et billede og en beskrivelse af vores computer.

Jeg valgte at gå med en retro computer-stil i brune og beige nuancer, fordi sitets indhold fokuserede på computeren og dens historie.

studiestartsprøven

PROCES

html tags

//dokument med html tags

For at holde styr på al den nye viden, lavede jeg et dokument med alle html-tags der blev nævnt i undervisningen. Det var en kæmpe hjælp for mig i kodnings-processen og gav mig hurtigt et godt kendskab til de forskellige tags.

mobile first

//mobile first

Til studiestartsprøven kodede jeg efter "mobile first" princippet og fokus i første uge var derfor på mobilversionen af sitet. Her lærte jeg om "det semantiske web", altså sitets struktur - og så lærte jeg om fonte, css og farver.

NY VIDEN

css grid

//grid og flexbox

I temaets anden uge udvidede jeg mit site til desktop. For at lave lidt mere komplekse layouts brugte jeg grid og flexbox. De defineres gennem css via "display:".

Derudover valgte jeg i min opgave, at give hver grid-item sit eget id, så jeg selv kunne vælge, hvor jeg placerede hvert billede.

media queries

//media queries

For at sitet kunne blive responsivt og både fungere til mobil og desktop bruges media queries, som defineres via CSS.

Dette gør at fx ens grid/flexbox først indtræder når viewporten har en bestemt vidde, i dette tilfæde 850 pixels.

Næste tema >>