HTML en CSS les 7 - Sticky navbar

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

4V Informatica 17 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;

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: <a href="https://developers.google.com/web/fundamentals/design-and-ux/responsive/">https://developers.google.com/web/fundamentals/design-and-ux/responsive/</a>

De viewport

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

Meer over device pixels

Meer info: <a href="https://developers.google.com/web/fundamentals/design-and-ux/responsive/">http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/</a>

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!

<a href="https://www.youtube.com/watch?v=VYyQv0CSZOE">https://www.youtube.com/watch?v=VYyQv0CSZOE</a>

Aan de slag

• Lees de opdracht nog eens goed door;
  
• Maak de tekst voor je website af (Google Docs)
  
• Maak het ontwerp voor je website af (papier)
  
• Werk/ begin aan je website via create in Replit
  
• Nodig je PO-partner uit via invite rechtsboven in Replit-template om samen te werken
  
• Basis van de website zou vandaag klaar moeten zijn
• Ik kom langs om te kijken hoe ver iedereen is
• Tweede uur uitleg sticky navbar
  

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

Fijne Herfstvakantie

31/10 laatste les om aan PO te werken

1/11 inleveren PO

(Uiterlijk 4/11)