Ga naar inhoud

Practicum week 1 - Browsers, HTML & CSS (1)

In dit practicum maak je kennis met algemene frontend technieken, waaronder componenten van de webbrowser en webpagina's, html elementen, developer tools, netwerk, console, JavaScript, styling, etc.

1e helft: Browser & webpagina's - Inspect element - Styles - Network - Console - Performance

2e helft: HTML & CSS - CV bouwen

1. Browser & webpagina's

Open de browser en navigeer naar hanze.nl. Klik met de rechtermuistoets ergens willekeurig op de pagina en selecteer “inspect” of “inspect element”.

  1. Wat voor soort HTML elementen/tags worden gebruikt voor het opsommen van de lijst bovenaan de pagina?

  2. Vind voorbeelden van:

    • <a>
    • <p>
    • <h1>
    • <input>
    • <li>
    • <span>

Verander de nieuwskoppen van je favoriete nieuwssite naar wat luchtiger/positiever nieuws, publiceer de schermafbeelding ervan op deze Padlet.

Nieuwskoppen van NOS veranderd

Fact / Fake

Styles

Open de browser en navigeer naar hanze.nl. Klik met de rechtermuistoets ergens willekeurig op de pagina en selecteer “inspect” of “inspect element”. Open in het tabje Elements het tabje Styles.

  1. Selecteer een element dat de typische Hanze-oranje kleur bevat. Wat is de kleurcode?
  2. Maak het Hanze logo twee keer zo groot.
  3. Verwijder een achtergrondfoto.
  4. De Hanze website wordt natuurlijk veel mooier in een developer-achtige look. Geef alle tekst het lettertype monospace.
  5. Vervang de teksten bovenaan de pagina (welkomsttekst, menu-items, etc.) door teksten naar keuze.
  6. Vervang de achtergrondkleuren door een kleur naar keuze.
  7. Vervang het Hanze logo door een logo van een ander bedrijf naar keuze (link).

Styles

Network

  1. Open het tabje Network/Netwerk en ververs hanze.nl. Wat is de url van de eerste foto op de pagina?

  2. We gaan testen hoe snel de website laadt op een snel 3G netwerk.

    • Zorg dat de opnameknop aan staat
    • Vink "disable cache" aan.
    • Zet network throttling op "Fast 3G".
    • Wat is de totale laadtijd van de pagina?
    • Welk bestand is het grootst en neemt het meeste laadtijd in beslag?

Network

Console

Navigeer naar google.com. Verwijder alle elementen behalve de zoekbalk en het microfoon icoontje.

Selecteer het google logo (img element) en typ naast class=".." het volgende: 

id="google-logo"

Open de tab 'console' en voer de volgende JavaScript code uit:

document.getElementById("google-logo").animate([
  // keyframes
  { transform: 'rotate(0deg)' },
  { transform: 'rotate(360deg)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
});

Wat gebeurt er met het logo?

Voer bovenstaande code nogmaals uit, maar vervang dit keer de woorden rotate door skewY. Wat gebeurt er nu? Kun je dit ook op andere elementen toepassen? (let op: geef elk element een uniek id, en gebruik dit id ook in de code)

Voeg dit principe toe aan een andere website naar keuze, en doe dit met meerdere elementen. Wie maakt de meest gestoorde webpagina? Publiceer de schermafbeelding (of schermopname) ervan op deze Padlet.

Google

Performance

Bekijk en inspecteer de website: http://motherfuckingwebsite.com/. De makers ervan beweren dat dit dé perfecte website is, onder andere omdat het lightweight is en snel laadt. We gaan deze bewering over de high performance testen met Lighthouse.

  • Vergelijk de score voor performance met deze sites: hanze.nl, nos.nl, en w3schools.com. Wat zijn de scores? Waardoor denk je dat de een beter scoort dan de ander?

  • Bekijk de details van de performance scores voor de verschillende sites. Wat valt je op?

Lighthouse

2. HTML & CSS

Maak in een HTML bestand je (fictieve droom) CV en gebruik tenminste de volgende HTML elementen. Je hoeft nog geen CSS toe te voegen.

  • headings (<h1>, <h2>, etc.)
  • divisions (<div>)
  • paragraphs (<p>)
  • tekst formatting (<strong>, <i>, <small>, etc.)
  • images (<img>)
  • links (<a>)
  • lists (<ul> of <ol>)
  • table (<table>)

CV

Voeg styling toe aan je CV, en denk aan:

  • kleur
  • lettertype
  • grootte
  • positionering
  • etc.