HTML + CSS les 5: ontwerp website + Trello + devtools + PO

4V Informatica 26 september
1 / 22
suivant
Slide 1: Diapositive
InformaticaWOStudiejaar 4

Cette leçon contient 22 diapositives, avec quiz interactif et diapositives de texte.

time-iconLa durée de la leçon est: 120 min

Éléments de cette leçon

4V Informatica 26 september

Slide 1 - Diapositive

Na de les kun je...
  • Een basisontwerp voor een website maken en uitvoeren met flexbox;
  • Werken met Trello om taken te ordenen.
  • Code van website checken via developer tools
  • Aan de slag met het PO website maken

Slide 2 - Diapositive

Herhaling vorige lessen
  • HTML en CSS in aparte bestanden verbonden via <link rel="stylesheet" href="style.css"> in de head
  • Elementen klassennaam geven voor specifieke styling via class="naam"
  • Margin, padding, border
  • Ontwerp van je website en opdelen in onderdelen
  • Elementen op je website ordenen m.b.v. flexbox.

Slide 3 - Diapositive

Verbinding html + CSS

Slide 4 - Diapositive

Classnames via class="naam"

Slide 5 - Diapositive

CSS: width, height, border, margin, padding

Slide 6 - Diapositive

Layout

Tips:
  1. Wat is belangrijk? Staat dat duidelijk in beeld?
  2. Gebruik je herkenbare patronen?
  3. Ontwerp alleen voor wat je nodig hebt!
  4. Gebruik echte teksten!

Zo kan een schets eruit zien

Slide 7 - Diapositive

Layout

Tips:
  1. Wat is belangrijk? Staat dat duidelijk in beeld?
  2. Gebruik je herkenbare patronen?
  3. Ontwerp alleen voor wat je nodig hebt!

Stel, je hebt een layout, maar hoe begin je nou?

In (ongeveer) 4 stappen:
  1. Juiste html schrijven
  2. Header styling
  3. Content en navigatie styling
  4. Footer styling

Slide 8 - Diapositive

Layout

Tips:
  1. Wat is belangrijk? Staat dat duidelijk in beeld?
  2. Gebruik je herkenbare patronen?
  3. Ontwerp alleen voor wat je nodig hebt!

<header>



   <article>
<footer>


   
   <nav>



   <aside>
<div>
Stap 1.2

Waar nodig de blokken opbreken in blokken

Slide 9 - Diapositive

Stap 1.3

Lelijke witte randjes weghalen

Slide 10 - Diapositive

Stap 3.1
Content en navigatie. Als eerste zorgen we ervoor dat deze blokken naast elkaar komen in plaats van onder elkaar. 

Slide 11 - Diapositive

Flexbox
  1. Plaats je elementen in een 'container' of 'wrapper'
  2. Maak van je container een flexbox via display: flex;
  3. Geef de juiste richting aan met flex-direction: row/ column;
  4. Gebruik justify-content om items in je container uit te lijnen;
  5. Gebruik align-items om de elementen in je container haaks op de richting uit te lijnen;

Slide 12 - Diapositive

Opdracht: flexbox

  • Maak een basisontwerp volgens de instructies in het template in Replit;
  • Voeg in CSS op de juiste plekken display: flex; en flex-direction: row; of flex-direction: column; toe...
  • Maak ook gebruik van justify-content en align-items
  • Klaar? Oefen met flexbox-froggy;
timer
10:00

Slide 13 - Diapositive

PO Website maken
  1. Kies een partner en lees de omschrijving van de opdracht in Classroom
  2. Kopieer het takenoverzicht op Trello en houd jullie vorderingen bij;
  3. Kies een onderwerp voor je website en zorg voor de tekst en bijbehorende plaatjes;
  4. Maak een ontwerp voor je website;
  5. Bouw je website aan de hand van je ontwerp: eerst HTML en daarna CSS;
  6. Voer regelmatig commits uit naar je Git-repository (komt later);
  7. Zorg voor een mooi, responsive ontwerp en voor nette en overzichtelijke code;
  8. Overleg tussentijds met de docent (tekst/ ontwerp etc.)
  9. Lever je website in inclusief Trello-link, GitHub-link en ontwerp. 

Slide 14 - Diapositive

TRELLO: bijhouden van vorderingen
Trello-instructies
  • Volg de link;
  • Maak een account bij Trello met je schoolmail;
  • kopieer het bord uit de link via de volgende stappen;
  • Ga naar 'show menu' (rechts)
  • Klik op 'More'
  • Kies 'Copy Board'
  • Geef je kopie een naam en klik op Create

Slide 15 - Diapositive

Aan de slag
  • Zoek een PO-partner en geef de namen door;
  • Zoek een onderwerp voor je website;
  • Verzamel alvast tekst en plaatjes; 
  • Kijk naar deze voorbeelden voor basis-ontwerpen;
  • Maak alvast een ontwerp van je website (op papier);
  • Oefen eventueel nog wat met flexbox-froggy. 
  • Tekst + ontwerp klaar? Bouw je website via Replit.

Slide 16 - Diapositive

'Afkijken' via DevTools
Pedagogisch didactisch gezien moet ik zeggen dat ik jullie leer code te lezen en te interpreteren. 
Maar eigenlijk laat ik jullie zien hoe je moet afkijken ;)

Slide 17 - Diapositive

Chrome devtools
  • Open chrome (of andere browser)
  • Ga naar een website;
  • Druk op F12 of...
  • Rechtermuisknop -> inspect element

Slide 18 - Diapositive

Opdracht
Ga naar www.st-maartenscollege.nl
Open de ontwikkeltools via inspect element
Verander een tekst of styling op de website

Slide 19 - Diapositive

Layout maken
Verdeel je layout in drie "blokken". Gebruik daarvoor eventueel deze les

  • Header: het menu? Een mooi plaatje?
  • Article: het verhaal: tekst, plaatjes, filmpjes etc..
  • Footer: titel, plaatje etc..

Slide 20 - Diapositive

Huiswerk 10/10
Vorm een PO-team
Verzamel tekst + plaatjes voor je website
Maak een ontwerp

Slide 21 - Diapositive

Hoe vond je deze les?
😒🙁😐🙂😃

Slide 22 - Sondage