/ tilbage

Flow 3 - HTML & CSS

Vi skulle idividuelt vælge en folketingskandidat, behøvede ikke at være en vi stemte på, og kode en hjemmeside for vedkommendes valgkamp.

Jeg arbejdede i:

  • HTML
  • CSS


Hvad jeg lærte

Grundlæggende inde for kodning
bla. Flex-box, Navigation & img

Projektet

Jeg valgte en tilfældig kandidat fra Moderaterne, Monika Rubin, da jeg synes deres styleguide var ny, moderne og farvevalg roligt.
Jeg startede med at lave wireframes med pen og papir. Jeg ville have en index, mærkesager-side og en kontaktside. Jeg tog udgangspunkt i Mobile-first og startede med indexsiden.

Min media query er sat til 750px før den skifter tilstand. I mobiltilstand er min navigation i bunden da det er rart for brugeren at bruge tommelfingeren til at navigere med. Mobil vil også være der de fleste vil bruge sitet fra. og jeg opbyggede den ud fra Mobile-first princippet.
Headeren lavede jeg responsiv ved at have en til mobil og en til desktop som så henholdsvis var skjult når den modsatte var aktiv.
Jeg har også lavet en kontaktformular. Den er skjult i mobilversionen. Fordi jeg mente den godt kunne undværes, men også for at teste funktionen af med at skjule i elementer med display:none;
I desktoptilstand har jeg tilføjet kolonner i brønteksterne. Det gør det bedre for brugeren at læse teksten, når linjerne ikke er for lange.

På kontaktsiden har jeg indsat en call-to-action knap, hvor man kan støtte hendes valgkamp.
På denne side brugte jeg også billedet som baggrund, og derfor kunne jeg nemt få en tekst og knap til at stå over billedet.

Jeg havde lavet delvist afrundet hjørner på alle tekstboxe og knapper, ligesom de har på deres partiside. Det gjorde jeg ved hjælp af border-radius: 10px 0px; og derved blev det kun hvert andet hjørne.

Genovervejelser og forbedringer

Jeg havde designet og kodet en del ting lidt anderledes hvis jeg skulle lave siden idag.
Nogle af de ting jeg ville havde lavet anderledes, vil være at få header og footer til at aline, med mere margin i siderne.
Jeg ville også have arbejdet lidt mere med billedformaterne så de passede bedre, de opføre sig ikke så godt i det responsive design.
Jeg havde også lavet headeren anderledes, så jeg ikke havde to navigationer. Jeg ved nu at det er bedst at have så lidt kode så muligt.
Jeg vil også have lavet en hjem knap. Selvom navnet virker som en hjemknap ville det bare være mere optimalt og brugervenligt at have en hjemknap også.