HTML en CSS - Inspecteren en uitproberen

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

• Je kan de chrome devtools gebruiken om de code van een website te lezen
• Je kan de chrome devtools gebruiken om de html en css van een website aan te passen

Wat weet je nog van de vorige les?

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 ;)

Elke website bestaat uit html.. 

..en css

Chrome devtools

Het paneel aan de rechterkant heet Chrome Devtools. Dat is een hele handige tool waarme je kan zien hoe de browser de code van je website heeft ontvangen. Dat kan je gebruiken voor je eigen website maar je kan het ook gebruiken om te kijken hoe dingen op andere websites gemaakt zijn.

Het leuke is, dat je er de websites waar je naar kijkt direct mee kan aanpassen. Dat wordt dan wel niet opgeslagen maar je kan er grappig plaatjes mee maken.

En is het ook erg handig als je een beetje aan het spelen bent vormgeving. B.v. met kleuren of afmetingen

Het merendeel van jullie kan helaas alleen in Guest mode de devtools gebruiken dus we gaan eerst even met z'n allen in Guest modes. In de screenshot zie je waar je dat kan vinden.

Chrome Guest Mode

Chrome devtools

Ga naar de website van de nos. Klik met je rechtermuis ergens op de pagina. B.v. één van de plaatjes op de homepage. Selecteer Inspect

Chrome devtools

Als we nou een beetje door al die code heen proberen te prikken zien we in die code het kopje dat we ook op de homepage zien.

We zien daar dat de tekst netjes in een <h2> zit. En we kunnen zelf zien welk lettertype er gebruikt is en hoe groot het is.

Maar veel leuker is dat we dit allemaal kunnen aanpassen. Als je op de tekst in de html klikt kan je deze gewoon aanpassen.

Als je op de font-family klikt kan je deze aanpassen.

DEMO

Opdracht

Pas de homepage van nos.nl of nu.nl zo aan dat het vol staat met grappige of rare nieuwsberichten. Maak een screenshot en lever deze in in classroom 

Pas in ieder geval aan:

* De titel van een bericht

* Het lettertype van iets

* De achtergrondkleur van iets

"Huiswerk"

• Verder met css tutorials
• Klaar? Doen dan flexbox froggy
• Ook klaar? Begin dan aan je PO

Wat kon er beter aan deze les?