Workshop
Een eigen website, in één avond
Ga naar huis met een eigen kleine website, live op het internet, en een echt gevoel voor hoe die opgebouwd is.
In deze workshop van vier uur bouwt een zestal deelnemers een website vanaf een leeg bestand. Ervaring met webdevelopment is niet nodig. We werken in vier stappen, in een vaste volgorde: eerst het document, dan de vormgeving.
Wat je leert
Je leert hoe een webdocument is opgebouwd, hoe je met templates pagina’s bouwt uit herbruikbare delen, en hoe CSS een site zijn eigen karakter geeft. We voegen een paar kleine, persoonlijke details toe met web componenten, en zetten je website online met een statische hostingdienst. Daarbij volgen we steeds één eenvoudig principe: eerst het document, dan de vormgeving.
Format
- Intro en setup (ongeveer 20–30 minuten): Een korte intro, waarna we samen ieders werkomgeving klaarzetten en Eleventy installeren.
- Het webdocument (50 minuten): We bouwen de structuur van het project en het geraamte van de site op, met een introductie van HTML en Nunjucks-templates.
- CSS en identiteit (45 minuten): We geven het document zijn karakter door de pagina’s vorm te geven met CSS, met een eenvoudige, praktische opzet van stylesheets.
- Whimsically yours, en live (60 minuten): We voegen kleine extra’s en persoonlijke details toe met web componenten, en zetten de site daarna online.
Na het webdocument nemen we 20 minuten pauze. Dat is in totaal ongeveer 3 uur en 15–25 minuten, inclusief de pauze. De rest van de avond is ruimte voor aankomst, uitloop en afronding. De tijden zijn een richtlijn en kunnen nog veranderen.
Techniek en tools
Je werkt in een code-editor naar keuze, zoals VS Code of VSCodium, met Node.js en npm. Daarmee bouwen we de site met Eleventy, geven we hem vorm met een eenvoudige, praktische opzet van stylesheets, en publiceren we hem met een statische hostingdienst.
Vooraf hoef je alleen een code-editor en Node.js te installeren. Op de pagina deelnemersinfo lees je stap voor stap hoe.
Over je begeleider
Ik ben Cris, en ik run a pleasant view, een kleine webstudio in Amsterdam-West. Ik bouw en onderhoud websites voor lokale ondernemers met Eleventy, en ontwikkel er ook een opensource-plugin voor. Daarnaast help ik de Discord van de Eleventy-community modereren.
Deze workshop is een kans om te delen wat ik heb geleerd en je te laten zien dat het web iets is wat je zelf kunt bouwen.