README.md

Les 4

Inhoudsopgave

• Les 4
  • Bespreken foodblog les 3
  • Flex Game
  • Minipuzzels - Nested Flexbox
  • Google Fonts
• De tussenopdracht
  • Stap 1: Nieuw project aanmaken
  • Stap 2: Wireframe nabouwen
    • Van wireframe naar ontwerp

---

Flexbox Froggy 🐸

Flex je skills met de flexbox froggy game

---

Minipuzzels - Nested Flexbox

Klik hier om naar de minipuzzels over nested Flexbox te gaan.

---

Google Fonts

Doorloop de volgende stappen om een font van Google te gebruiken:

1. Ga naar https://fonts.google.com/;
2. Vind de font die je wilt gebruiken en klik erop;
3. Scroll naar de verschillende fontstijlen die beschikbaar zijn en klik rechts op het plusje bij de fontstijlen die je wilt gebruiken (klik ze niet zomaar allemaal aan, want hoe meer je er kiest, hoe langer het duurt om jouw pagina te laden);
4. Klik rechts bovenin op het winkelmandje, selecteer de optie @import en kopieer de code die daar staat (zonder de <style> tag) en plak deze bovenin jouw CSS-bestand;
5. Scroll in het winkelmandje nog iets verder naar het kopje CSS rules to specify families en kopieer de benodigde CSS-code en plak deze bij de gewenste selector in je CSS-bestand.

---

De tussenopdracht

De informatie over de opdracht, het inleveren en de voorwaarden zijn te vinden in de cursushandleiding.

Stap 1: Nieuw project aanmaken

Je hebt in les 1 al een project aangemaakt waarin je alle lesopdrachten maakt. Deze map heb je waarschijnlijk frontend-development genoemd. De tussenopdracht waar je vandaag aan gaat beginnen moet je zien als een los project en moet dus ook in een eigen map. Je kan hiervoor opdracht 1c van les 1 volgen, maar noem de map die je aanmaakt dan frontend-tussenopdracht. Zet vervolgens de standaard bestandsstructuur neer (zoals uitgelegd wordt in opdracht 1d van les 1).

Stap 2: Wireframe nabouwen

De opdracht is om onderstaande wireframe na te bouwen, zoals omschreven in de cursushandleiding.

Van wireframe naar ontwerp

• Bedenk waar jouw website over gaat.
• Gebruik teksten en afbeeldingen die logisch zijn bij jouw onderwerp.
• Kies zelf bijpassende kleuren. Maak eventueel gebruik van een kleurpalet zoals coolors of Realtime Colors.
• Kies bijpassende fonts. Tip: gebruik een fancy font voor grote kopteksten, en een prettig leesbaar font voor bodyteksten.

Hieronder staan nog enkele tips om je hierbij te helpen.

Tips voor het bouwen

• Bouw eerst de basisstructuur op met semantic tags;
• Bouw één voor één de rijen na, in plaats van alles tegelijk op te willen lossen;
• Gebruik display:flex om elementen naast elkaar te zetten;
• Hou de flex-documentatie bij de hand, en gebruik de flex-inspector in je browser.
• Je mag <div> gebruiken om binnen sections containers aan te maken, wanneer je dit puur voor de styling nodig hebt;
• Gebruik padding om witruimte toe te voegen binnen je containers.
• Ruimte buiten de containers voeg je toe met flex eigenschappen zoals gap en justify-content. Als je container geen onderdeel van flex layout is, dan gebruik je margin.
• Je kan de hele opdracht oplossen met de stof uit de lessen, je hebt geen google/stackoverflow/chatgpt nodig.
• Als iets niet lukt kan je je medestudenten, peercoaches en docenten om hulp vragen!

Download: Wireframe tussenopdracht PDF