# CodePen

HTML, CSS en JavaScript in je browser, met een live preview en een link die je kan delen.

Multimedia & Creatieve Technologie · 2.1 Web production · Extra · Tooling · versie 1.0.0 · 2026-10-04

Tags: codepen, html, css

Slides: <https://slides.mctantwerp.be/nl/web-production/codepen>

Speaker notes: <https://slides.mctantwerp.be/nl/web-production/codepen.notes.md>

<!-- slide 2 -->

## Agenda

1. Wat is CodePen
2. Een account
3. Bewaren en delen
4. Inspiratie

<!-- slide 3 -->

## 1. Wat is CodePen

<!-- slide 4 -->

### Een editor in je browser

- Drie panelen: HTML, CSS en JavaScript
- Wat je typt, zie je meteen in de preview
- Niets te installeren, geen map, geen server
- Elke pen heeft een eigen url

<!-- slide 5 -->

### Waarvoor wij het gebruiken

- Oefeningen in de les: een knop op de slide opent een pen met de startcode al ingevuld
- Een idee testen zonder eerst een project op te zetten
- Hulp vragen: je stuurt de link naar je pen, geen screenshot van je code
- Rondkijken hoe iemand anders een effect gebouwd heeft

> [!WARNING]
> **Geen vervanging voor je repo**
>
> Opdrachten en je portfolio staan op GitHub. CodePen is voor oefenen en uitproberen.

**[Portfolio en opdrachten](https://slides.mctantwerp.be/nl/general/04-portfolio)**: Hoe je bij de webvakken werkt met je eigen repository op GitHub, en hoe je daar feedback op krijgt.

<!-- slide 6 -->

## 2. Een account

<!-- slide 7 -->

### Account aanmaken

1. **Ga naar de signup**: [codepen.io/accounts/signup](https://codepen.io/accounts/signup)
2. **Log in met GitHub**: Hetzelfde account als je opdrachten, of kies e-mail
3. **Kies je username**: Die staat in elke url: `codepen.io/username/pen/…`
4. **Gratis plan**: Volstaat voor alles wat we in de lessen doen

<!-- slide 8 -->

### Gratis of PRO

#### Gratis

- Zoveel pens als je wil
- Elke pen is publiek
- Fork, embed, collections

#### PRO

- Private pens
- Eigen bestanden uploaden, zoals afbeeldingen
- Samen in één pen werken

<!-- slide 9 -->

### Alles is publiek

> [!WARNING]
> **Wat je bewaart, kan iedereen lezen**
>
> Geen wachtwoorden, geen API keys, geen code van een klant. Een pen verschijnt op je profiel en in de zoekresultaten van CodePen.

**[Accounts en secrets](https://slides.mctantwerp.be/nl/general/07-accounts-en-secrets)**: Wachtwoorden, tweestapsverificatie, phishing en de sleutels in je code. Het minimum om je werk en je stage niet kwijt te spelen.

<!-- slide 10 -->

## 3. Bewaren en delen

<!-- slide 11 -->

### Bewaren

- **01 Save**: De knop bovenaan, of Windows <kbd>Ctrl</kbd>+<kbd>S</kbd>, Mac <kbd>Cmd</kbd>+<kbd>S</kbd>. Pas dan krijgt de pen een url in je account.
- **02 Geef hem een naam**: Klik op het potloodje naast "Untitled". Over drie weken zoek je "Responsive oefening 1", niet "Untitled".

> [!WARNING]
> Een pen die nog niet bewaard is, is weg na een refresh of als je de tab sluit.

<!-- slide 12 -->

### Fork

- Een pen van iemand anders kan je niet bewaren, wel forken
- Fork maakt een kopie in jouw account, het origineel blijft staan
- Jouw kopie linkt terug naar de pen waar ze van komt
- Zo bouw je verder op een voorbeeld zonder iets kapot te maken

<!-- slide 13 -->

### Delen

| Url | Wat je ziet |
| --- | --- |
| `codepen.io/username/pen/id` | De editor met de code en de preview |
| `codepen.io/username/full/id` | Alleen het resultaat, over het hele scherm |
| `codepen.io/username/details/id` | Beschrijving, comments en de forks |
| Embed (onderaan rechts) | Een iframe voor op een blog of in je portfolio |

<!-- slide 14 -->

### Orde houden

- Een naam die zegt wat erin zit, met het vak erbij
- Tags in de pen settings, om later op te zoeken
- Een collection per vak, bijvoorbeeld "Web production"
- Je eigen pens vind je op [codepen.io/your-work](https://codepen.io/your-work)

<!-- slide 15 -->

## 4. Inspiratie

<!-- slide 16 -->

### Spark

- **[CodePen Spark](https://codepen.io/spark)**: De beste pens, collections en artikels van de week, gekozen door het team van CodePen.
- **[Trending](https://codepen.io/trending)**: Wat nu het meest bekeken wordt. Veel CSS-animaties, vaak zonder één regel JavaScript.

> [!TIP]
> Zie je iets moois, open dan de CSS en zet regels uit tot je snapt wat elke regel doet.

<!-- slide 17 -->

### Je CSS werkt niet en je wil hulp. Wat stuur je?

- A. Een screenshot van je code
- B. De link naar je pen
- C. De link naar de full view
- D. Je code in een Teams-bericht

**Antwoord:** B. De link naar je pen

Met de pen-url zien ze je code en het resultaat, en kunnen ze forken om iets uit te proberen. De full view toont enkel het resultaat, zonder code.

<!-- slide 18 -->

### Opdracht: Je eerste pen

1. Maak een account aan, met GitHub of e-mail
2. Maak een nieuwe pen met een titel in HTML en wat CSS
3. Geef hem een naam en bewaar hem
4. Fork een pen uit Spark en verander er iets aan
5. Steek beide in een collection "Web production"

## Begrippen

- **Pen**: Eén experiment op CodePen: HTML, CSS en JavaScript met een live preview, bewaard onder een eigen url in je account. (slide 4)
- **Fork**: Een kopie van een pen van iemand anders in je eigen account. Jij past de kopie aan, het origineel blijft zoals het was. (slide 12)
- **Collection**: Een groep pens in je CodePen-account, bijvoorbeeld alle oefeningen van één vak. Een collection heeft zelf ook een url. (slide 14)
- **CodePen Spark**: De wekelijkse selectie van de beste pens, collections en artikels op CodePen. Te lezen op codepen.io/spark of als nieuwsbrief. (slide 16)

## Links en bronnen

### In de presentatie

- [codepen.io/accounts/signup](https://codepen.io/accounts/signup) (slide 7)
- [codepen.io/your-work](https://codepen.io/your-work) (slide 14)
- [CodePen Spark](https://codepen.io/spark) (slide 16)
- [Trending](https://codepen.io/trending) (slide 16)

### Bronnen

- [CodePen documentation](https://blog.codepen.io/docs/)
- [Forking a Pen](https://blog.codepen.io/docs/pens/forking/)
- [Privacy & Collaboration](https://blog.codepen.io/docs/pens/privacy-sharing/)
- [What changed in CodePen 2.0](https://blog.codepen.io/docs/what-changed/)