Index

Je hebt gewerkt volgens de verschillende fases van de development-lifecycle incl. de documentatie (user story, ontwerpbeslissingen, schetsen en code voorbeelden)

Analyseren

Na de retrospect van 4 november 2022 kregen we allemaal feedback voor het geleverde resultaat. Mijn feedback op mijn product luidde alsvolgt:

"Erg mooi. Goed dat de tekst vergroot kan worden, dat contact vergroot kan worden, dat je een feedbackfunctie gaat implementeren en een footer gaat toevoegen. Icoon voor terug naar homepage ook goed. Buiten de algemene feedbackpunten. Goed om een introductietekstje toe te voegen als wij die aan jullie toesturen. Kijk ook naar de donkere modus. Kijk even naar de info in het overzicht: die kan denk ik een stuk uitgebreider."

Ik koos voor deze sprint de volgende user stories om in mijn product te verwerken:

Een donkere modus op basis van Besturingssysteem instellingen
Een terug naar boven knop/link
Een vernieuwde footer

Tevens staat deze sprint een dynamische huisstijl centraal. Zo zal ik mijn site nog meer aan de huisstijl laten voldoen om elementen en componenten die anderen hebben ontworpen en ontwikkeld, in mijn eigen werk toepassen.

Ontwerpen

Voor het ontwerpen wilde ik een universele omgeving waarin ik samen met mijn teamleden aan de styleguide kon werken en besloot daarom een Figma bestand op te zetten waarin ik mijn layout ontwierp.

Bouwen

Voor de leertaak "Look and Feel" heb ik een aantal custom properties aan kleuren en border-radius gegeven.

:root {

  /* color */
  --c-primary: #B9005F;
  --c-default: #fff;
  --c-light: #fff;
  --c-accent-primary: #eee;
  --c-accent-secundary: #888;
  --c-accent-tetriary: #444;
  --c-invert: #222;
  --c-alert: #E30059;
  --c-warning: #FFD05F;
  --c-succes: #25AE93;
  --c-info: #606eb3;

  /* border */

  --border-radius-min: 0.2em;
  --border-radius-default: 0.4em;
  --border-radius-round: 50%;

}

Zie de :root section in de style.css

.categorie {
  display: inline-block;
  margin: 0.4em;
  padding: 0.4em;
  text-align: center;
  color: #bbb;
}

.categorie:hover {
  background-color: var(--c-default);
  border-radius: var(--border-radius-default);
  transition: 0.8s;
}

.categorie:focus {
  background-color: var(--c-default);
  border-radius: var(--border-radius-default);
  outline: 0.2em solid var(--c-info);
}

Zie de leertaak "Look and feel"

Naast de media queries voor de schaalbaarheid heb ik ook een media query toegepast voor een donkere modus. Die ziet er in de code alsvolgt eruit:

@media (prefers-color-scheme: dark) {
  :root {
    --c-primary: #B9005F;
    --c-default: #444;
    --c-light: #fff;
    --c-accent-primary: #222;
    --c-accent-secundary: #888;
    --c-accent-tetriary: #fff;
    --c-invert: #eee;
    --c-alert: #E30059;
    --c-warning: #FFD05F;
    --c-succes: #25AE93;
    --c-info: #606eb3;
  }

  .dark-contrast {
    --c-alert: #aa0044;
    --c-warning: #755300;
    --c-succes: #096351;
    --c-info: #7183dc;
    --c-primary: #800041;
  }