Skip to content

Front-end maken

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

In Visual Studio Code maak je binnen het project dat je hebt gekregen de volgende bestanden/mappen aan:

📄 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. Om ervoor te zorgen dat de CSS effect heeft op je HTML moet je deze linken in je HTML-bestand.

Stap 3.5: Vormgeving papieren schets

Probeer de profielpagina vorm te geven zoals je in je schets hebt getekend. Denk aan teksten, vormen, kleuren, lettertypen en spacing.

Stap 3.6: Testen en verbeteren

Om te kijken of je profielpagina er goed uit ziet wil je deze gaan testen. Dit doe je door het HTML-bestand te openen in je browser. Vergelijk deze met je papieren schets.

De kans is groot dat deze niet direct naar wens is, je wil dus aanpassingen, verbeteringen, blijven maken en testen.

Stap 3.7 (optioneel, bonus): Telefoon, tablet en desktop

Je hebt nu een profielpagina gemaakt die er goed uit ziet op een desktop. Maar je wilt dat deze ook goed uit ziet op een telefoon, tablet of misschien zelfs wel een smartwatch.

Ga nu ook je webpagina testen op kleinere schermen. De makkelijkste manier om dit te doen is het venster van je browser kleiner maken, een betere manier is om in je webbrowser een ‘developers’-tool te gebruiken.

Er zijn verschillende manieren om een webpagina responsive te maken. Een van deze manieren is het gebruik van CSS flexbox.

Git

Zorg ervoor dat je jouw werk via Visual Studio Code naar GitLab ‘commit’ en ‘pusht’.