12. Optimalisatie / Validatie / Fonts

WEB
Webdevelopment-II
Les 4 / Week 12
Optimalisatie, validatie en fonts
1 / 14
suivant
Slide 1: Diapositive
Software Developer [WEB_A]MBOStudiejaar 1

Cette leçon contient 14 diapositives, avec diapositives de texte.

time-iconLa durée de la leçon est: 180 min

Éléments de cette leçon

WEB
Webdevelopment-II
Les 4 / Week 12
Optimalisatie, validatie en fonts

Slide 1 - Diapositive

Week 12 // WEB


Optimalisatie / validatie / fonts

Slide 2 - Diapositive

Optimalisatie
  • Grote foto-bestanden nemen veel ruimte in. 
  • Laden duurt erg lang
  • Verbetering voor zoekopties bij zoekmachines (snel laden)
  • Comprimeren voor het web, om ruimte op je hosting te besparen

Slide 3 - Diapositive

Tinypng.com

Slide 4 - Diapositive

Validator
  • Al over gehad tijdens PRA - A1
  • HTML validator: https://validator.w3.org 'By file upload' - 'choose file'
  • CSS validator: https://jigsaw.w3.org/css-validator/

Slide 5 - Diapositive

Fonts
  • Het lettertype van teksten binnen een element. 
  • font-size: lettergrootte (pixels, punten, percentages, relatief)
  • font-weight: (normal, bold, bolder, lighter)
  • font-style: italic (schuingedrukt)
  • box-shadow: schaduw om element heen

Check https://www.w3schools.com/cssref/pr_font_font.asp voor font properties.

Slide 6 - Diapositive

Webfont toevoegen
  • Een specifiek font toevoegen aan onze website
  • font-bestand omzetten met https://transfonter.org/ 
  • Toevoegen bovenaan onze style.css

Slide 7 - Diapositive

Gezamenlijk een font toevoegen
Opdracht 12.1 - WDV-II, pag. 25 
We voegen nu gezamenlijk het font 'League Mono' toe aan onze website. 
  • Eerst zetten we het font om in het gewenste resultaat.
  • Daarna laden we het in onze style.css.
  • Tot slot passen we het toe op het gewenste element.

Slide 8 - Diapositive

Google Fonts
Font gebruiken wat op de lijst van fonts.google.com staat. 
We kunnen het font nu letterlijk van google laden in onze pagina. 

Slide 9 - Diapositive

Opdracht 12.2
Maak opdracht 12.2 uit het moduleboekje WDV-II

Slide 10 - Diapositive

Font Awesome
Icoontjes die je kunt gebruiken in je webpagina.
www.fontawesome.com

Slide 11 - Diapositive

Font Awesome toevoegen

Slide 12 - Diapositive

Opdracht 12.3
Maak met behulp van https://fontawesome.com/ de quickview van nu.nl na.

Slide 13 - Diapositive

Inleveropdracht 12
Maak nu uit het moduleboekje WDV-II inleveropdracht 12 (pagina 28).
Je optimaliseert je portfolio-website en voorziet hem van mooie fonts: zie stappen.

Slide 14 - Diapositive