HTML en CSS les 7 - Sticky navbar

4V Informatica 17 oktober
1 / 11
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolvwoLeerjaar 4

Cette leçon contient 11 diapositives, avec diapositives de texte.

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

Éléments de cette leçon

4V Informatica 17 oktober

Slide 1 - Diapositive

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;

Slide 2 - Diapositive

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

Slide 3 - Diapositive

De viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
Met de viewport geef je aan hoe pixels gerenderd moeten worden afhankelijk van de grootte van je venster/ scherm

Slide 4 - Diapositive

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

Slide 5 - Diapositive

iPhone X - 375px
iPad - 768px

Slide 6 - Diapositive

Chrome devtools

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

Slide 7 - Diapositive

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

Slide 8 - Diapositive

Sticky Navbar: zie instructies

Slide 9 - Diapositive

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

Slide 10 - Diapositive

Fijne Herfstvakantie
31/10 laatste les om aan PO te werken
1/11 inleveren PO
(Uiterlijk 4/11)

Slide 11 - Diapositive