Skip to content

User stories

Inleiding

Een user story is een informele, algemene uitleg van een softwarefunctie, geschreven vanuit het perspectief van de eindgebruiker of klant. Omdat jij de gebruiker van je eigen portfoliowebsite bent, hebben we de user stories vanuit je eigen perspectief geschreven.

De stories zijn opgedeeld in kern functionaliteit (voor de eerste ~90 minuten) en uitdagingen (als je klaar bent of thuis verder wilt werken).

Tips voor je begint

Neem de tijd! Ga rustig door de stof heen om het beter te begrijpen en begin dan pas.

Vraag de studentmentoren om hulp! Ze zijn er om jou en de andere studenten te ondersteunen. De docenten zullen waarschijnlijk druk bezig zijn met het helpen van de studenten.

Kern functionaliteit (~90 minuten)

Werk deze stories in volgorde af. Ze bouwen op elkaar voort van makkelijk naar moeilijker.

1. Ik wil een beschrijving geven van mijzelf zodat mensen weten wie en hoe ik ben

Doel: Tekst toevoegen aan je HTML pagina
Geschatte tijd: 15 minuten
Wat leer je: HTML basis elementen, paragrafen, koppen

📚 Learning story: Hoe voeg ik tekst toe aan mijn HTML pagina?

2. Ik wil een foto van mijzelf toevoegen zodat mensen weten hoe ik eruitzie

Doel: Een afbeelding tonen op je website
Geschatte tijd: 15 minuten
Wat leer je: Werken met de <img> tag en bestandspaden

📚 Learning story: Hoe voeg ik een foto toe aan mijn pagina?

3. Ik wil mijn website er mooi uit laten zien met kleuren en lettertypen

Doel: CSS toepassen op je HTML elementen
Geschatte tijd: 30 minuten
Wat leer je: CSS selectors, kleuren, lettertypen, spacing

📚 Learning story: Hoe maak ik een CSS stylesheet aan en link ik deze?

Doel: Klikbare links toevoegen (LinkedIn, GitHub, etc.)
Geschatte tijd: 15 minuten
Wat leer je: De <a> tag en links maken

📚 Learning story: Hoe maak ik een link aan?

5. Ik wil een knop maken

Doel: Een klikbare knop op je pagina plaatsen
Geschatte tijd: 15 minuten
Wat leer je: De <button> tag en button styling met CSS

📚 Learning story: Hoe maak ik een knop aan?

Uitdagingen (buiten de 2 uur, voor thuis of als je snel klaar bent)

Deze stories zijn niet onderdeel van de kernopdracht. Doe deze alleen als je de basis af hebt en tijd over hebt, of maak ze thuis af.

6. Ik wil dat er iets gebeurt als ik op de knop druk

Doel: JavaScript gebruiken om interactiviteit toe te voegen
Geschatte tijd: 30 minuten
Wat leer je: JavaScript basics, event listeners, DOM manipulatie

📚 Learning stories: - Hoe maak ik een JavaScript bestand aan en koppel ik deze? - Hoe kan ik JavaScript code uitvoeren als er op een knop gedrukt wordt?

7. Ik wil een teller met het aantal likes dat mijn portfolio heeft gekregen

Doel: Een getal bijhouden en tonen
Geschatte tijd: 20 minuten
Wat leer je: JavaScript variabelen, getallen manipuleren

📚 Learning stories: - Hoe maak ik een JavaScript bestand aan en koppel ik deze? - Hoe maak ik een teller die omhoog gaat?

8. Ik wil dat het aantal likes onthouden wordt als ik de pagina herlaad

Doel: Data opslaan in de browser
Geschatte tijd: 25 minuten
Wat leer je: LocalStorage API gebruiken

📚 Learning story: Hoe gebruik ik LocalStorage om gegevens te bewaren?

Learning stories

De learning stories leggen uit hoe je een taak kan tackelen. Ze bevatten code voorbeelden en uitleg.

Hoe voeg ik tekst toe aan mijn HTML pagina?

Gebruik HTML tags om je content te structureren:

Let op: Plaats alle zichtbare content, zoals koppen (<h1> t/m <h6>) en paragrafen (<p>), tussen de <body> tags. In de <head> zet je alleen metadata, de <title>, en links naar CSS/JS.

```html

Mijn naam

Over mij

Dit is een paragraaf met tekst over mezelf.

En dit is nog een paragraaf.

```

  • <h1> = hoofdkop (grootste, belangrijkste)
  • <h2> tot <h6> = subkoppen (steeds kleiner)
  • <p> = paragraaf (gewone tekst)

🔗 Meer leren: W3Schools HTML Tutorial • HTML Headings • HTML Paragraphs

Hoe voeg ik een foto toe aan mijn pagina?

  1. Sla je foto op in de images map van je project
  2. Gebruik de <img> tag in je HTML:

html <img src="images/mijn-foto.jpg" alt="Foto van mij">

  • src = het pad naar je afbeelding
  • alt = beschrijving (voor toegankelijkheid en als de foto niet laadt)

🔗 Meer leren: W3Schools HTML Images • HTML File Paths

Dit heb je al gedaan in het stappenplan! Je hebt een styles.css bestand en deze regel in je <head>:

html <link rel="stylesheet" href="styles.css">

Nu kun je in styles.css styling toevoegen. Bijvoorbeeld:

```css body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 20px; }

h1 { color: #2c3e50; font-size: 36px; }

p { color: #333; line-height: 1.6; }

img { width: 200px; border-radius: 10px; } ```

Tips: - Kleuren kun je opgeven met namen (red), hex codes (#ff0000), of RGB (rgb(255, 0, 0)) - margin = ruimte buiten een element - padding = ruimte binnen een element

🔗 Meer leren: W3Schools CSS Tutorial • CSS Colors • CSS Fonts • CSS Box Model

Gebruik de <a> tag (anchor = anker):

html <a href="https://www.linkedin.com/in/jouw-profiel">Mijn LinkedIn</a> <a href="https://github.com/jouw-username">Mijn GitHub</a>

Wil je dat de link in een nieuw tabblad opent? Voeg target="_blank" toe:

html <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>

Extra styling met CSS:

```css a { color: #3498db; text-decoration: none; }

a:hover { text-decoration: underline; } ```

🔗 Meer leren: W3Schools HTML Links • CSS Links

Hoe maak ik een knop aan?

Gebruik de <button> tag:

html <button>Klik hier!</button>

Style de knop met CSS:

```css button { background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }

button:hover { background-color: #2980b9; } ```

🔗 Meer leren: W3Schools HTML Button Tag • CSS Buttons

Uitdagingen: JavaScript Learning Stories

Deze zijn alleen nodig als je door naar de uitdagingen gaat (stories 6-8).

Hoe maak ik een JavaScript bestand aan en koppel ik deze?

  1. Maak een nieuw bestand: script.js
  2. Voeg onderaan je <body> (voor de sluit-tag </body>) deze regel toe:

```html

```

🔗 Meer leren: W3Schools JavaScript Introduction • HTML Script Tag

Hoe kan ik JavaScript code uitvoeren als er op een knop gedrukt wordt?

Geef je knop eerst een id:

html <button id="mijnKnop">Klik mij!</button>

In je script.js:

```javascript // Haal de knop op const knop = document.getElementById('mijnKnop');

// Voeg een event listener toe knop.addEventListener('click', function() { alert('Je hebt geklikt!'); }); ```

🔗 Meer leren: W3Schools JavaScript Events • addEventListener Method • getElementById Method

Hoe kan ik de tekst van een HTML element aanpassen met JavaScript?

Geef het element een id:

```html

Originele tekst

```

In je script.js:

```javascript const knop = document.getElementById('verander'); const tekst = document.getElementById('bericht');

knop.addEventListener('click', function() { tekst.textContent = 'Nieuwe tekst!'; }); ```

🔗 Meer leren: W3Schools HTML DOM • textContent Property

Hoe maak ik een teller die omhoog gaat?

HTML:

```html

Likes: 0

```

JavaScript:

```javascript let aantalLikes = 0;

const likeKnop = document.getElementById('likeKnop'); const likesElement = document.getElementById('likes');

likeKnop.addEventListener('click', function() { aantalLikes = aantalLikes + 1; // Of: aantalLikes++; likesElement.textContent = aantalLikes; }); ```

🔗 Meer leren: W3Schools JavaScript Variables • JavaScript Arithmetic

Hoe gebruik ik LocalStorage om gegevens te bewaren?

LocalStorage bewaart data in de browser, zelfs na een refresh.

Data opslaan: javascript localStorage.setItem('likes', aantalLikes);

Data ophalen: javascript let opgeslagenLikes = localStorage.getItem('likes'); if (opgeslagenLikes !== null) { aantalLikes = parseInt(opgeslagenLikes); likesElement.textContent = aantalLikes; }

Complete voorbeeld met LocalStorage:

```javascript // Bij het laden van de pagina: haal opgeslagen likes op let aantalLikes = 0; const opgeslagenLikes = localStorage.getItem('likes'); if (opgeslagenLikes !== null) { aantalLikes = parseInt(opgeslagenLikes); }

const likeKnop = document.getElementById('likeKnop'); const likesElement = document.getElementById('likes');

// Toon het huidige aantal likesElement.textContent = aantalLikes;

// Bij klik: verhoog en sla op likeKnop.addEventListener('click', function() { aantalLikes++; likesElement.textContent = aantalLikes; localStorage.setItem('likes', aantalLikes); }); ```

🔗 Meer leren: W3Schools Web Storage API • localStorage Object

Bronnen

Overigens is dit materiaal niet verplicht, maar we raden het je wel sterk aan.

  • Knowledgebase HBO-ICT. Als eerste bron, kan je de HBO-ICT Knowledgebase raadplegen. Hier staat al het materiaal dat je nodig hebt om te leren hoe je websites bouwt. Zoek voor HTML en CSS, kies wat er beste bij je past en ga lekker aan de slag!
  • W3Schools HTML Tutorial. Prima HTML tutorial voor de starter met bij ieder topic voorbeelden en kleine oefeningen. Tevens een handig naslagwerk.
  • W3Schools CSS Tutorial. Prima CSS tutorial voor de starter met bij ieder topic voorbeelden en kleine oefeningen. Tevens een handig naslagwerk voor als je meer ervaren bent.
  • A Complete Guide To Flexbox. Handige website over de CSS Flexbox voor als je de video courses hiervoor al hebt gevolgd.
  • W3Schools JavaScript Tutorial. Een JavaScript tutorial voor beginners, met bij ieder onderdeel voorbeelden en kleine oefeningen.
  • W3Schools LocalStorage Tutorial. Dit specifieke onderdeel van de W3Schools JavaScript Tutorial gaat in op ‘LocalStorage’.