Extra

bron 1: Responsive Web Design with HTML5 and CSS - 4th edition - Ben Frain
bron 2: W3Schools

Extra tips and tricks

  1. Alles is een Box in HTML (Box-model). In de mozilla firefox browser kan je live veranderingen aanbrengen aan. drawing

  2. Je kan CSS variabelen overschrijven door van het Cascading-principe gebruik te maken. Dit wordt vooral handig wanneer we transitions bekijken in Advanced CSS

  3. Je kan CSS variabelen in andere CSS variabelen gebruiken.

  4. Je kan in de Calc-functie (CSS) verschillende units door elkaar gebruiken.

  5. Je kan een counter gebruiken om eigen hoofdingen te specialiseren.

  6. Je kan de focus-within pseudo klasse gebruiken om rechtstreeks te interageren met content in een dropdown menu.

  7. Plaats meerdere variabelen in een object wanneer je ze console.log()-ed om de namen van de variabelen weer te geven.

  8. Gebruik de console.table() functie om meerdere dezelfde objecten in een lijst overzichtelijk te loggen.

  9. Gebruik %c in een log-statement om CSS stylin toe te passen.

  10. Gebruik console.trace() binnenin een functie om ook de hele stack trace te loggen.

  11. Maak gebruik van de backtick ` notatie in Strings om eenvoudig variabelen toe te voegen.

Extra opdracht

Bestudeer grondig de webpagina die gegenereerd wordt door intellij wanneer je testen uitvoert. Gebruik je eigen skills om nu een kopie te maken van deze webpagina, zonder naar de broncode te gaan kijken. Maak een eigen JSON-object aan waar de informatie van de testen inzit die je dan uitleest met JavaScript om de content van je webpagina dynamisch te genereren. file

Opgaven

  1. Doe de HTML exercises op w3schools.com
  2. Doe de CSS exercises op w3schools.com
  3. Doe de JavaScript exercises op w3schools.com