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

4V Informatica 26 september
1 / 22
next
Slide 1: Slide
InformaticaWOStudiejaar 4

This lesson contains 22 slides, with interactive quiz and text slides.

time-iconLesson duration is: 120 min

Items in this lesson

4V Informatica 26 september

Slide 1 - Slide

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 - Slide

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 - Slide

Verbinding html + CSS

Slide 4 - Slide

Classnames via class="naam"

Slide 5 - Slide

CSS: width, height, border, margin, padding

Slide 6 - Slide

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 - Slide

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 - Slide

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 - Slide

Stap 1.3

Lelijke witte randjes weghalen

Slide 10 - Slide

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

Slide 11 - Slide

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 - Slide

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 - Slide

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 - Slide

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 - Slide

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 - Slide

'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 - Slide

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

Slide 18 - Slide

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

Slide 19 - Slide

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 - Slide

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

Slide 21 - Slide

Hoe vond je deze les?
😒🙁😐🙂😃

Slide 22 - Poll