CSS en de chrome devtools

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

InformaticaMiddelbare schoolvwoLeerjaar 4

In deze les zitten 11 slides, met interactieve quizzen en tekstslides.

Onderdelen in deze les

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

Vrijdag

Ben ik er niet
Maar kunnen jullie zelfstandig aan de slag
Daarover einde van de les meer..

Slide 2 - Tekstslide

Basis van een website

<HTML>

tekst

</HTML>

.CSS {

opmaak

}

Javascript(){

gedrag;

}

Slide 3 - Tekstslide

CSS: Cascading StyleSheet

Eigenschappen van html elementen aanpassen
Opmaak toevoegen aan html elementen

Slide 4 - Tekstslide

https://codepen.io/timmiekun/pen/YRaNjy

Selectors

https://htmldog.com/guides/css/beginner/selectors/

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Chrome devtools

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

Slide 7 - Tekstslide

Aan de slag

css basis in classroom

Slide 8 - Tekstslide

Gedrag

Opmaak

Data

Beheer

Slide 9 - Sleepvraag

Wat kon er beter aan deze les?

Slide 10 - Open vraag

Vriend en vijand van elke developer: browsers!

Slide 11 - Tekstslide

CSS en de chrome devtools

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Sleepvraag

Slide 10 - Open vraag

Slide 11 - Tekstslide

Meer lessen zoals deze

CSS - gebruik maken van classes

HTML en CSS - les 2 - wat is css?

CSS - selectors

HTML en CSS - gebruik maken van classes

HTML en CSS - document flow en box model

Les4 - CSS Selectoren: HTML Elementen Aanspreken

HTML en CSS 3 - selectors

CSS - inspecteren en aanpassen