HTML en CSS les 8 - laatste tips voor PO

4V Informatica 31 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 31 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

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

Slide 3 - 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 4 - 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 5 - 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 6 - Diapositive

iPhone X - 375px
iPad - 768px

Slide 7 - Diapositive

Chrome devtools

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

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

SUCCES IN GPW
1/11 inleveren PO via Classroom
(Uiterlijk 4/11)

Slide 11 - Diapositive