HTML en CSS les 7 - Sticky navbar

4V Informatica 17 oktober
1 / 11
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolvwoLeerjaar 4

In deze les zitten 11 slides, met tekstslides.

time-iconLesduur is: 120 min

Onderdelen in deze les

4V Informatica 17 oktober

Slide 1 - Tekstslide

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

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

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

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

iPhone X - 375px
iPad - 768px

Slide 6 - Tekstslide

Chrome devtools

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

Slide 7 - Tekstslide

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

Sticky Navbar: zie instructies

Slide 9 - Tekstslide

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

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

Slide 11 - Tekstslide