CSS - inspecteren en aanpassen

Je kan eigenschappen van html elementen aanpassen met css
Je weet hoe je de chrome inspector kan gebruiken om te "spieken" bij andere websites

1 / 11

Slide 1: Diapositive

InformaticaMiddelbare schoolvwoLeerjaar 4

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

Éléments de cette leçon

Je kan eigenschappen van html elementen aanpassen met css
Je weet hoe je de chrome inspector kan gebruiken om te "spieken" bij andere websites

Slide 1 - Diapositive

Afkijken

Pedagogisch didactisch gezien moet ik zeggen dat ik jullie leer code te lezen en te interpreteren. Maar eigenlijk laat ik jullie zien hoe je moet afkijken ;)

Slide 2 - Diapositive

Slide 3 - Diapositive

Slide 4 - Diapositive

Opdracht

Pas de titel aan van een nieuwsbreicht op nos.nl

Slide 5 - Diapositive

Chrome devtools

Open chrome
Ga naar nos.nl
Druk op F12 of..
Rechtermuisknop -> inspect element

Filmpje!

https://www.youtube.com/watch?v=VYyQv0CSZOE

Slide 6 - Diapositive

Github pages

Demo

Slide 7 - Diapositive

Aan de slag (zie classroom)

CSS - basis afmaken
Github pages instellen
Oefen PO in classroom

Slide 8 - Diapositive

Gedrag

Opmaak

Data

Beheer

Slide 9 - Question de remorquage

Wat kon er beter aan deze les?

Slide 10 - Question ouverte

Vriend en vijand van elke developer: browsers!

lgg

Slide 11 - Diapositive

CSS - inspecteren en aanpassen

Éléments de cette leçon

Slide 1 - Diapositive

Slide 2 - Diapositive

Slide 3 - Diapositive

Slide 4 - Diapositive

Slide 5 - Diapositive

Slide 6 - Diapositive

Slide 7 - Diapositive

Slide 8 - Diapositive

Slide 9 - Question de remorquage

Slide 10 - Question ouverte

Slide 11 - Diapositive

Plus de leçons comme celle-ci

CSS en de chrome devtools

CSS - gebruik maken van classes

HTML + CSS les 5: ontwerp website + Trello + devtools + PO

HTML en CSS les 8 - laatste tips voor PO

HTML en CSS les 7 - Sticky navbar

HTML en CSS les 6 - Responsive Design

HTML en CSS - Inspecteren en uitproberen

Werken met git