Web Development¶
Web development (of web ontwikkeling) is het bouwen en het onderhouden van websites en webapplicaties. Als je code gaat schrijven voor een website of een webapplicatie is het handig om te weten wat de volgende onderwerpen zijn:
- Frontend of client-side software: alle software die draait bij de gebruiker.
- Backend of server-side software: alle software die draait op de webserver.
Frontend (Client-Side)¶
De ‘frontend’ (of client-side) is het deel van een webapplicatie dat gebruikers zien en waarmee ze interacteren. Het omvat alles wat in de webbrowser draait en zorgt voor de visuele en interactieve aspecten van een website. Belangrijke technologieën en tools die je kunt leren zijn:
- HTML (HyperText Markup Language): Dit is de basisstructuur van webpagina’s.
- CSS (Cascading Style Sheets): Hiermee kun je de stijl en lay-out van webpagina’s bepalen.
- JavaScript: Dit brengt interactiviteit en dynamische inhoud naar je webpagina’s.
- Frameworks: Totaal oplossingen voor het bouwen van web-applicaties zoals Angular, Next.js en Nuxt.
- Libraries: Tools zoals React, Vue.js en Svelte maken het makkelijker om complexe gebruikersinterfaces te bouwen.
Voorbeeld: Eenvoudige HTML-pagina
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>Voorbeeldpagina</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Welkom op mijn website</h1>
<p>Dit is een voorbeeld van een eenvoudige HTML-pagina.</p>
<script>
console.log("Pagina geladen");
</script>
</body>
</html>
Backend (Server-Side)¶
De backend is het deel van een website dat op de server draait. Het beheert de logica, databases, toegang en andere functies die je niet direct ziet. Belangrijke technologieën en tools die je kunt leren zijn:
- Programmeertalen: Talen zoals Python, Ruby, Java, PHP en Node.js.
- Webservers: Software zoals Apache en Nginx die verzoeken van clients verwerken en beantwoorden.
- Databases: Systemen zoals MySQL, PostgreSQL en MongoDB die gegevens opslaan en beheren.
- APIs (Application Programming Interfaces): Interfaces zoals RESTful en GraphQL die communicatie tussen de server en andere software mogelijk maken.
Voorbeeld: Eenvoudige Express.js server
const express = require("express");
const app = express();
const port = 3000;
app.get("/", (req, res) => {
res.send("Hallo wereld!");
});
app.listen(port, () => {
console.log(`Server draait op http://localhost:${port}`);
});
Bronnen¶
- VIDEO COURSE: Lesson 6: Using Javascript with User Interfaces (via O’Reilly) Uit de video course ‘Learn to Program with Javascript’ een prima uitleg over het manipuleren van je HTML-pagina’s m.b.v. DOM elementen.
- Web Development
- HTML
- CSS
- JavaScript
- Angular
- Next.js
- Nuxt
- React
- Vue.js
- Svelte