Webdevelopment


Introductie

Welkom bij het eerste hoofdstuk van webdevelopment! Deze week maak je kennis met de basisprincipes van het bouwen van websites. Je leert wat webdevelopment inhoudt, zet je eigen ontwikkelomgeving op, en maakt je eerste eenvoudige webpagina.

Introductie

Wat is webdevelopment?

Webontwikkeling of te wel 'webdevelopment' is het proces van het creëren en onderhouden van websites. Het omvat alles van het ontwerpen van een eenvoudige statische pagina met tekst tot complexe webapplicaties.

Front-end vs. Back-end

In deze module focussen we op front-end ontwikkeling.

 

Overzicht van HTML, CSS en JavaScript

HTML (HyperText Markup Language)

CSS (Cascading Style Sheets)

JavaScript

 

Introductie

Ontwikkelomgeving opzetten

Stap 1: Installeer een Teksteditor

Een teksteditor is een programma waarmee je code kunt schrijven.

Aanbevolen teksteditors:

Actie: Download en installeer een teksteditor naar keuze.

Stap 2: Kies een Webbrowser

Je hebt een webbrowser nodig om je webpagina's te bekijken en te testen.

Aanbevolen browsers:

Deze browsers hebben ingebouwde ontwikkelaarstools die je later van pas zullen komen.

Introductie

Eerste stappen met HTML

De Basisstructuur van een HTML-document

Alle HTML-documenten beginnen met een basisstructuur. Hier is een voorbeeld:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Mijn Eerste Webpagina</title>
</head>
<body>
    <!-- Jouw inhoud komt hier -->
</body>
</html>

Uitleg:

Basiselementen in HTML

Koppen (Headings)

Er zijn zes niveaus van koppen, van <h1> tot <h6>.

<h1>Dit is een Titel</h1>
<h2>Dit is een Subtitel</h2>

Paragrafen

Voor teksten en alinea's gebruik je het <p>-element.

<p>Dit is een alinea met tekst.</p>

Met het <a>-element maak je hyperlinks.

<a href="https://www.voorbeeld.com">Bezoek Voorbeeld.com</a>

Afbeeldingen

Afbeeldingen voeg je toe met het <img>-element.

<img src="afbeelding.jpg" alt="Beschrijving van de afbeelding">

 

Introductie

Opdracht: Maak je eigen Webpagina

Stap 1: Maak een Nieuw HTML-bestand

  1. Open je teksteditor.
  2. Maak een nieuw bestand.
  3. Sla het bestand op als index.html in een nieuwe map voor je project.

Stap 2: Voeg de Basisstructuur Toe

Kopieer de basisstructuur van het HTML-document in je index.html-bestand.

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Over Mij</title>
</head>
<body>
    <!-- Jouw inhoud komt hier -->
</body>
</html>

Stap 3: Voeg Inhoud Toe aan de Body

1. Voeg een Titel Toe met je Naam

<h1>Hallo, ik ben [Jouw Naam]!</h1>

Vervang [Jouw Naam] door je eigen naam.

2. Schrijf een Korte Introductie

<p>Ik ben een student met interesse in webontwikkeling. In mijn vrije tijd hou ik van lezen, sporten en programmeren.</p>

Pas de tekst aan zodat deze over jou gaat.

3. Voeg een Subtitel Toe voor je Hobby's

<h2>Mijn Hobby's</h2>

4. Maak een Lijst van je Hobby's

Je kunt een ongeordende lijst maken met <ul> en <li>.

<ul>
    <li>Programmeren</li>
    <li>Muziek luisteren</li>
    <li>Buiten sporten</li>
</ul>

5. Voeg een Afbeelding Toe

Zorg ervoor dat je een afbeelding hebt (bijvoorbeeld profiel.jpg) en plaats deze in dezelfde map als je index.html-bestand.

<img src="profiel.jpg" alt="Foto van mij">

Stap 4: Sla het Bestand op en Bekijk je Pagina

  1. Sla je index.html-bestand op.
  2. Open de map waar je bestand is opgeslagen.
  3. Dubbelklik op index.html om het in je webbrowser te openen.

Je zou nu je eerste webpagina moeten zien met je eigen inhoud!

Introductie

Opdracht: Uitbreiden van je Webpagina

Wat te doen?

Uitdaging

Introductie

Afronding Introductie

In dit hoofdstuk heb je het volgende geleerd:

Extra Hulpbronnen

Veelgestelde Vragen

Waarom zie ik mijn afbeelding niet op mijn webpagina?

Hoe kan ik mijn webpagina delen met anderen?

Vragen of Hulp Nodig?

Als je ergens niet uitkomt of vragen hebt, voel je vrij om contact op te nemen:

Tips voor Succes

HTML en Introductie tot CSS

Je hebt je eerste stappen gezet in webontwikkeling en je eigen webpagina gemaakt met HTML. In dit hoofdstuk gaan we dieper in op HTML en beginnen we met het toevoegen van stijl met CSS om je webpagina er nog beter uit te laten zien.

Wat ga je leren?

HTML en Introductie tot CSS

HTML: Semantische Elementen

Wat zijn Semantische HTML-elementen?

Semantische elementen geven betekenis aan je content. Ze beschrijven de rol van het inhoudselement in de pagina.

Veelgebruikte Semantische Elementen

Header

Gebruikt voor de koptekst van een pagina of sectie.

<header>
    <h1>Mijn Website</h1>
</header>

Nav

Gebruikt voor navigatielinks.

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#over">Over Mij</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

Main

Bevat de hoofdinhoud van de pagina.

<main>
    <!-- Hoofdinhoud hier -->
</main>

Section

Definieert een sectie in het document.

<section>
    <h2>Mijn Hobby's</h2>
    <p>Ik hou van programmeren en sporten.</p>
</section>

Article

Gebruikt voor zelfstandige content zoals blogposts.

<article>
    <h2>Mijn Eerste Blogpost</h2>
    <p>Welkom bij mijn blog!</p>
</article>

Aside

Bevat inhoud die gerelateerd is aan de hoofdinhoud, zoals zijbalken.

<aside>
    <h3>Gerelateerde Links</h3>
    <ul>
        <li><a href="#link1">Link 1</a></li>
    </ul>
</aside>

Bevat de voettekst van de pagina of sectie.

<footer>
    <p>&copy; 2023 Mijn Naam</p>
</footer>

Waarom Semantische HTML Gebruiken?

HTML en Introductie tot CSS

Inleiding tot CSS

Wat is CSS?

CSS (Cascading Style Sheets) is een stylesheet-taal die wordt gebruikt om de presentatie van een document geschreven in HTML te beschrijven. Met CSS kun je de stijl van je webpagina's bepalen, zoals kleuren, lettertypen en layout.

CSS Koppelen aan HTML

Er zijn drie manieren om CSS aan je HTML te koppelen:

  1. Inline CSS: Stijlregels direct in HTML-elementen

      
    <p style="color: blue;">Dit is een blauwe tekst.</p>

  2. Interne CSS: Stijlregels in de <head> van je HTML-document binnen <style>-tags.

      
    <head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

  3. Externe CSS: Een apart .css-bestand dat je linkt in je HTML-document.

      
    <head>
    <link rel="stylesheet" href="styles.css">
</head>

Aanbevolen methode: Gebruik externe CSS-bestanden voor een betere organisatie en herbruikbaarheid van je code.

 

CSS Basisconcepten

CSS Selectors

CSS-selectors bepalen op welke HTML-elementen de stijlregels worden toegepast.

Eigenschappen en Waarden

CSS bestaat uit eigenschappen (properties) en waarden (values).

selector {
    eigenschap: waarde;
}

Voorbeeld:

h1 {
    color: blue;
    font-size: 24px;
}

 

Er zijn ongelooflijk veel verschillende CSS eigenschappen. Geen zorgen je hoeft ze niet allemaal uit je hoofd te leren! Gaan de weg tijdens het programmeren leer je de meest voorkomende CSS eigenschappen kennen.

HTML en Introductie tot CSS

Opdracht: Stijl je webpagina met CSS

Deze opdracht gaat verder met de bestanden van het project uit het vorige hoofdstuk.

Stap 1: Maak een Extern CSS-bestand

  1. Maak een nieuw bestand in je teksteditor.
  2. Sla het bestand op als styles.css in dezelfde map als je index.html.

Stap 2: Koppel je CSS-bestand aan je HTML

Voeg in de <head> van je index.html het volgende toe:

<head>
    <meta charset="UTF-8">
    <title>Over Mij</title>
    <link rel="stylesheet" href="styles.css">
</head>

Stap 3: Voeg CSS-stijlregels toe

1. Stijl de Body

In styles.css:

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}

2. Stijl de Koppen

h1 {
    color: #00539C;
    text-align: center;
    padding-top: 20px;
}

h2 {
    color: #027373;
    margin-left: 20px;
}

3. Stijl de Paragrafen

p {
    line-height: 1.6;
    margin: 0 20px 20px 20px;
}

4. Stijl de Lijst

ul {
    list-style-type: square;
    margin: 0 20px 20px 40px;
}

5. Stijl Afbeeldingen

img {
    display: block;
    max-width: 200px;
    height: auto;
    margin: 20px auto;
    border-radius: 50%;
}
a {
    color: #00539C;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

 

Stap 4: Bekijk je Webpagina

  1. Sla zowel index.html als styles.css op.
  2. Vernieuw je webpagina in de browser.

Je zou nu een opgemaakte versie van je webpagina moeten zien!

HTML en Introductie tot CSS

Styling van Tekst, Kleuren en Achtergronden

Hieronder zijn een aantal voorbeelden aangegeven van de basis mogelijkheden van CSS opmaak.

Tekst

Kleuren

Kleuren kunnen worden opgegeven met:

Achtergronden

HTML en Introductie tot CSS

Opdracht: Personaliseer je Webpagina

Wat te doen?

Uitdaging

HTML en Introductie tot CSS

Afronding HTML en Introductie tot CSS

In dit hoofdstuk heb je het volgende geleerd:

Extra Hulpbronnen

Veelgestelde Vragen

Waarom wordt mijn CSS niet toegepast op mijn HTML?

Hoe kan ik zien welke CSS-regels op een element worden toegepast?

Vragen of Hulp Nodig?

Als je ergens tegenaan loopt of vragen hebt:

CSS Layouts en Flexbox

Je hebt nu een goede basis in HTML en CSS, en je webpagina begint vorm te krijgen. In dit hoofdstuk gaan we een grote stap zetten in het verbeteren van de layout van je website door gebruik te maken van het CSS Box Model en Flexbox. Dit zal je helpen om je webpagina professioneler en responsiever te maken.

Wat ga je leren?

CSS Layouts en Flexbox

CSS Box Model

Wat is het CSS Box Model?

In CSS wordt elk element op een webpagina beschouwd als een rechthoekige doos. Het CSS Box Model beschrijft deze doos en bestaat uit:

  1. Content: De inhoud van het element (tekst, afbeeldingen, enz.).
  2. Padding: Ruimte rondom de content, binnen de rand.
  3. Border: De rand om de padding en content heen.
  4. Margin: Ruimte buiten de rand, scheidt het element van andere elementen.

Visualisatie van het Box Model

box-model-1358225844.png

Eigenschappen van het Box Model

Voorbeeld

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

Uitleg:

CSS Layouts en Flexbox

Flexbox

Wat is Flexbox?

Flexbox, of de Flexible Box Layout Module, is een CSS3-layoutmodel dat het eenvoudiger maakt om responsive layouts te maken. Het is ontworpen om ruimte te verdelen en items uit te lijnen binnen een container, zelfs als hun grootte onbekend of dynamisch is.

Waarom Flexbox Gebruiken?

flexbox.png

Basisconcepten

Opzetten van een Flex Container

.container {
    display: flex;
}

Belangrijke Flexbox Eigenschappen

Voor de Container

Voor de Items

CSS Layouts en Flexbox

Opdracht: Gebruik van Flexbox

Stap 1: Structureren van je HTML

Pas je index.html aan om een flex container en flex items te hebben.

<body>
    <header>
        <h1>Mijn Website</h1>
    </header>
    <nav>
        <ul class="nav-list">
            <li><a href="#home">Home</a></li>
            <li><a href="#over">Over Mij</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <main>
        <section class="intro">
            <!-- Inhoud -->
        </section>
        <section class="hobbies">
            <!-- Inhoud -->
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Mijn Naam</p>
    </footer>
</body>

Stap 2: Maak je Navigatie Responsief met Flexbox

HTML

Zorg ervoor dat je navigatie-items binnen een <ul> staan met de class nav-list.

<nav>
    <ul class="nav-list">
        <li><a href="#home">Home</a></li>
        <li><a href="#over">Over Mij</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

CSS

/* Maak de nav-list een flex container */
.nav-list {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    background-color: #00539C;
}

/* Stijl de navigatielinks */
.nav-list li {
    margin: 0 15px;
}

.nav-list a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.nav-list a:hover {
    text-decoration: underline;
}

Stap 3: Layout van de Hoofdinhoud met Flexbox

HTML

In je main-element heb je twee secties: .intro en .hobbies.

<main>
    <section class="intro">
        <!-- Inhoud -->
    </section>
    <section class="hobbies">
        <!-- Inhoud -->
    </section>
</main>

CSS

Maak van main een flex container en pas de layout aan.

main {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 20px;
}

/* Stijl de secties */
main section {
    flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
    margin: 10px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
}

Uitleg:

Stap 4: Responsieve Afbeeldingen met Flexbox

HTML

Zet je afbeeldingen binnen een container.

<section class="gallery">
    <img src="afbeelding1.jpg" alt="Afbeelding 1">
    <img src="afbeelding2.jpg" alt="Afbeelding 2">
    <img src="afbeelding3.jpg" alt="Afbeelding 3">
</section>

CSS

Maak van .gallery een flex container.

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px;
}

.gallery img {
    flex: 1 1 200px;
    max-width: 300px;
    margin: 10px;
    height: auto;
}

 

CSS Layouts en Flexbox

Oefeningen

Oefening 1: Maak een Flexbox Layout voor je Footer

Wat te doen?

Oefening 2: Centraal Uitlijnen van Inhoud

Wat te doen?

Uitdaging: Maak een Responsief Navigatiemenu

Wat te doen?

Hint

Gebruik een media query om de flex-direction te veranderen:

@media (max-width: 600px) {
    .nav-list {
        flex-direction: column;
        align-items: center;
    }
}
CSS Layouts en Flexbox

Afronding CSS Layouts en Flexbox

In dit hoofdstuk heb je het volgende geleerd:

Extra Hulpbronnen

Veelgestelde Vragen

Mijn flex items overlappen of worden niet correct weergegeven. Wat kan ik doen?

Hoe maak ik mijn layout responsief met Flexbox?

Vragen of Hulp Nodig?

Als je vragen hebt of ergens tegenaan loopt:

CSS Grid en Responsive Design

Je hebt nu een solide basis in HTML en CSS, en je bent bekend met Flexbox voor het creëren van flexibele layouts. In dit hoofdstuk gaan we een stap verder door CSS Grid te introduceren, een krachtig layout-systeem dat je nog meer controle geeft over de opmaak van je webpagina's. Daarnaast duiken we in responsief ontwerp of te wel 'Responsive Design', zodat je website er op elk apparaat geweldig uitziet.

Wat ga je leren?

CSS Grid en Responsive Design

Introductie tot CSS Grid

Wat is CSS Grid?

CSS Grid Layout, vaak gewoon Grid genoemd, is een tweedimensionaal grid-systeem dat je in staat stelt om elementen zowel in de rij- als in de kolomrichting te plaatsen. Het is ontworpen om complexe weblayouts eenvoudiger te maken.

grid.png

Waarom CSS Grid Gebruiken?

Basisconcepten

Opzetten van een Grid Container

.container {
    display: grid;
}

CSS Grid en Responsive Design

CSS Grid Eigenschappen

Definiëren van Kolommen en Rijen

Gebruik de eigenschappen grid-template-columns en grid-template-rows.

Voorbeeld

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 100px;
}

Uitleg:

Gebruik van de fr Eenheid

De fr (fraction) eenheid verdeelt beschikbare ruimte in fracties.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

Uitleg:

Grid Gap

Voeg ruimte toe tussen de grid items met grid-gap.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

Plaatsen van Grid Items

Gebruik grid-column en grid-row om items te positioneren.

Voorbeeld

.item1 {
    grid-column: 1 / 3; /* Van kolomlijn 1 tot 3 */
    grid-row: 1 / 2;    /* Van rijlijn 1 tot 2 */
}

 

CSS Grid en Responsive Design

Opdracht: Layout Creëren met CSS Grid

Stap 1: HTML Structuur Aanmaken

Maak een HTML bestand genaamd grid.html aan om de grid layout toe te passen. Vergeet niet een bijbehorend CSS bestand aan te maken en te koppelen.

<body>
    <header>
        <h1>Mijn Website</h1>
    </header>
    <nav>
        <!-- Navigatie-inhoud -->
    </nav>
    <main class="grid-container">
        <section class="item item1">
            <!-- Inhoud Sectie 1 -->
        </section>
        <section class="item item2">
            <!-- Inhoud Sectie 2 -->
        </section>
        <aside class="item item3">
            <!-- Zijbalk of extra informatie -->
        </aside>
    </main>
    <footer>
        <!-- Footer-inhoud -->
    </footer>
</body>

Stap 2: Aanpassen van je Inhoud

Stap 3: CSS Grid Implementeren

CSS voor de Grid Container

.grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-gap: 20px;
    margin: 20px;
}

Uitleg:

CSS voor de Grid Items

.item1 {
    grid-column: 1 / 2;
    grid-row: 1;
}

.item2 {
    grid-column: 1 / 2;
    grid-row: 2;
}

.item3 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

Uitleg:

Als je de webpagina bekijkt dan zouden de elementen gepositioneerd moeten zijn volgens het CSS Grid principe.

CSS Grid en Responsive Design

Responsive Design met Media Queries

Wat zijn Media Queries?

Media queries in CSS stellen je in staat om stijlregels toe te passen op basis van kenmerken van het apparaat, zoals schermgrootte, resolutie, oriëntatie, enz.

Basis Syntax

@media (media-type) and (expressie) {
    /* CSS-regels hier */
}

Voorbeeld

@media screen and (max-width: 768px) {
    /* Stijlen voor schermen kleiner dan of gelijk aan 768px */
}

Toepassen op je Website

Stap 1: Mobile-First Benadering

Begin met het ontwerpen voor mobiele apparaten en schaal op naar grotere schermen.

Stap 2: Aanpassen van de Grid Layout

Voor kleinere schermen wil je wellicht dat je layout verandert naar één kolom.

/* Basis layout voor mobiel */
.grid-container {
    display: grid;
    grid-template-columns: 1fr;
}

/* Voor grotere schermen */
@media (min-width: 769px) {
    .grid-container {
        grid-template-columns: 2fr 1fr;
    }
}

Stap 3: Aanpassen van Navigatie

Voor mobiel kun je de navigatie vereenvoudigen.

/* Mobiele navigatie */
nav {
    background-color: #00539C;
}

.nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-list li {
    margin: 10px 0;
}

/* Desktop navigatie */
@media (min-width: 769px) {
    .nav-list {
        flex-direction: row;
    }

    .nav-list li {
        margin: 0 15px;
    }
}

 

CSS Grid en Responsive Design

Oefeningen

Oefening 1: Maak je Website Volledig Responsief

Wat te doen?

Tips

Uitdaging 1: Gebruik van Grid Areas

Wat te doen?

Uitdaging 2: Voeg Een Responsieve Afbeeldingsgalerij Toe

Wat te doen?

Tips

CSS Grid en Responsive Design

Afronding CSS Grid en Responsive Design

Je hebt geleerd hoe je CSS Grid kunt gebruiken om geavanceerde en responsieve layouts te maken. Met deze vaardigheden kun je ervoor zorgen dat je website er op elk apparaat geweldig uitziet. 

Je hebt in dit hoofdstuk het volgende geleerd:

Extra Hulpbronnen

Veelgestelde Vragen

Wat is het verschil tussen Flexbox en Grid?

Mijn media queries werken niet. Wat kan ik doen?

Hoe test ik mijn website op verschillende apparaten?

Vragen of Hulp Nodig?

Als je vragen hebt of ergens tegenaan loopt: