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

• Informatica
• WO
• Studiejaar 4

4V Informatica 26 september

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
• 
  

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.

Verbinding html + CSS

Classnames via class="naam"

CSS: width, height, border, margin, padding

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

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

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

Stap 1.3

Lelijke witte randjes weghalen

Stap 3.1

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

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;
   

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;

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. 

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

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.

'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 ;)

Chrome devtools

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

Filmpje!

https://www.youtube.com/watch?v=VYyQv0CSZOE

Opdracht

Ga naar www.st-maartenscollege.nl

Open de ontwikkeltools via inspect element

Verander een tekst of styling op de website

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

Huiswerk 10/10

Vorm een PO-team

Verzamel tekst + plaatjes voor je website

Maak een ontwerp

Hoe vond je deze les?

😒🙁😐🙂😃