HTML en CSS les 8 - laatste tips voor PO

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

4V Informatica 31 oktober

Een paar regels...

1. Tijdens de les werk je serieus aan de opdrachten;
   
2. Dus niet op je telefoon zitten, uitgebreid kletsen of spelletjes spelen etc.;
3. Luister naar de klassikale uitleg en doe actief mee;
4. Niet eten of drinken achter de computer;
5. Lees de opdrachten of uitleg in Fundament etc. goed door;
6. Voer de opdrachten echt zelf uit: alleen door het te doen ga je leren programmeren;

Aandachtspunten voor PO

1. Zorg voor nette, gestructureerde en overzichtelijke code in je html- én je css-bestand;
2. Orden je bestanden in mapjes (css, images etc).
3. Herbruikbaarheid/ Efficiënt werken: styling die voor meerdere pagina's bruikbaar is, moet in 1 css-bestand (style.css). Styling specifiek voor 1 pagina kan (eventueel) in een apart css-bestand (gebruik juiste linkjes...);
4. Noodzakelijke onderdelen: favicon in titel / menubalk (liefst sticky) / contactpagina met formulier / minstens 1 tabel / een about-pagina met ordered en unordered list / minstens 1 media query voor responsive design
5. Inleveren via Classroom (deadline = 1/11, uiterlijk 4/11): ontwerp website (papier?) + replit-link naar je website + link naar je trello-board

Responsive design

• Je weet hoe je de ViewPort kan gebruiken om je website (beter) geschikt maken voor mobiel
• Je kan je website met behulp van media queries geschikt maken voor verschillende schermgroottes

Zonder

Met

Meer over de viewport

Meer info: https://developers.google.com/web/fundamentals/design-and-ux/responsive/

De viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

Meer over device pixels

Meer info: http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/

Met de viewport geef je aan hoe pixels gerenderd moeten worden afhankelijk van de grootte van je venster/ scherm

Media queries

• Per schermbreedte specifieke styling opgeven;
  
• In css @media (query) {styling }
• De query maak je m.b.v. min-width of max-width (of height);
  
• Mobiel = ± 400px
  
• iPad = ± 800px
  
• Laptop etc. = ± 1080px
  
• Zie voorbeeld op Replit

iPhone X - 375px

iPad - 768px

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

Sticky Navbar: zie instructies

Aan de slag

• Maak de tekst voor je website af (Google Docs)
• Maak het ontwerp voor je website af (papier)
• Maak je website via create in Replit en nodig je PO-partner uit
• Voeg een sticky navbar toe aan je website en maak nieuwe html-bestanden waarnaar met de knoppen gelinkt wordt 
• Voeg de viewport tag toe aan je website. 
• Voeg minstens één media-query toe voor mobiel. 
• Controleer m.b.v. de inspector hoe het eruit ziet op een telefoon en tablet

SUCCES IN GPW

1/11 inleveren PO via Classroom

(Uiterlijk 4/11)