Skip to content

Stap 3: Hoe leer je front-end development?

Wat is front-end development?

De front-end (voorkant) van een website is wat je als gebruiker ziet in je webbrowser. Het is een verzameling van verschillende webpagina’s waarmee gebruikers kunnen interacteren. Denk aan een webshop waar je kunt zoeken, door resultaten kunt scrollen en producten in je winkelmandje kunt plaatsen.

Voor het maken van de front-end van een webapplicatie vormen twee opmaaktalen de basis:

  • HTML (HyperText Markup Language)
  • CSS (Cascading Style Sheets).

Met HTML breng je structuur aan in een webpagina (dus hoe de pagina is opgebouwd). En met CSS verzorg je het uiterlijk ervan (dus hoe een pagina eruit ziet). Vaak wil je ook dat de webpagina’s van je webapplicatie er goed uitzien op verschillende schermformaten, zoals laptop, tablet of smartphone. Hiervoor kun je CSS flexbox gebruiken.

Hoe ga je dit leren?

Gebruik de HBO-ICT Knowledgebase om deze vragen te beantwoorden:

  • Wat is een front-end?
  • Wat is HTML?
  • Wat is CSS?
  • Hoe gebruik ik HTML en CSS om een webpagina te bouwen?
  • Hoe maak ik een webpagina responsive m.b.v. CSS flexbox?

Aanbevolen studiemateriaal (kies het materiaal dat het beste bij jouw leerstijl past):

Aan de slag

Stap 3.1: Je bestudeert de kennis over HTML en CSS Stap 3.2: Projectstructuur maken

Maak een map aan in GitLab voor je profielpagina met de volgende indeling:

mijn-profielpagina/
├── index.html
├── style.css
└── images/ (voor je foto's)

Stap 3.3: HTML-structuur opbouwen

Gebruik je schets om met HTML de structuur van je profielpagina te maken

Stap 3.4: CSS-styling toevoegen

Werk in het .css-bestand om de HTML-pagina op te maken. Zorg ervoor dat de opmaak netjes is en past bij jou en de context

Stap 3.5: Zet de tekst en inhoud van je profielpagina zoals in je schets

Stap 3.6: Stap 6: Testen en verbeteren_

  • Open index.html in je browser
  • Vergelijk met je papieren prototype
  • Pas kleuren, lettertypen en spacing aan naar wens

Stap 3.7 (optioneel): maak je profielpagina ‘responsive’ met flexbox