Stylen in gewone taal
Beschrijf hoe u het eruit wilt laten zien.
Stylen in gewone taal is een gratis Vibe-coding-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vibe-coding. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vibe-coding bevat in totaal 4 lessen.
Stijlen zonder code
Je pagina heeft nu een geraamte, maar ziet er nog eenvoudig uit. Met stijlen voeg je kleuren, ruimte en een prettige uitstraling toe.
De kracht van vibe coding is dat je het uiterlijk in gewone woorden beschrijft. Je zegt "rustig en groen" en de AI kiest de kleuren en lettertypen voor je.
Beschrijf een sfeer
Beschrijf in plaats van exacte hex-codes de sfeer die je wilt. Woorden als "fris", "modern", "speels" of "professioneel" sturen de AI.
Een sfeer geeft de AI ruimte om bij elkaar passende kleuren en lettertypen te kiezen die goed samenwerken.
Style the PlantPal landing page to feel fresh and friendly.
Use soft green tones, rounded corners, and a clean modern font.Kies een kleurthema
Als je een kleur in gedachten hebt, noem die dan gewoon. "Groen", "marineblauw" of "warm oranje" werken allemaal.
Je kunt ook om een hoofdkleur en een accentkleur voor knoppen vragen. De AI houdt de rest neutraal, zodat je pagina leesbaar blijft.
Use a green and white color theme.
Make the buttons a slightly darker green so they stand out.
Keep the text dark gray for easy reading.Geef de hero vorm
De hero is het eerste wat mensen zien, dus die verdient aandacht. Vraag om een grote, vette kop en voldoende ruimte eromheen.
Je kunt om een zachte achtergrondkleur of een subtiel kleurverloop vragen om de bovenkant van de pagina uitnodigend te maken.
Make the hero section stand out.
Use a large bold headline, generous spacing, and a soft light-green background behind it.Maak knoppen uitnodigend
Je oproep-tot-actieknop moet goed opvallen en prettig zijn om op te klikken. Vraag de AI om een duidelijke kleur en een klein hover-effect.
Een knop die zachtjes verandert wanneer de muis eroverheen beweegt, voelt levendig en modern aan.
Style the "Get Started" button.
Make it green with white text, rounded corners, and a slightly darker shade when I hover over it.Ruimte en ademruimte
Pagina's die vol staan voelen onrustig. Een goede indeling met voldoende ruimte maakt een pagina rustig en prettig leesbaar.
Je kunt de AI vragen om meer binnenruimte rond secties en ruimte tussen tekstregels. "Geef het ruimte om te ademen" is een zin die de AI goed begrijpt.
Add more space between the sections and around the text.
Give the page room to breathe so it does not feel crowded.Lettertypen en leesbaarheid
Lettertypen bepalen het karakter van een pagina. Een strak schreefloos lettertype voelt modern aan; een lettertype met schreef voelt klassiek.
Je hoeft geen namen van lettertypen te kennen. Zeg gewoon "gemakkelijk leesbaar" of "modern" en vraag om koppen die iets groter zijn dan de hoofdtekst.
Use a clean, modern, easy-to-read font.
Make the headings noticeably larger and bolder than the normal text.Eén verandering tegelijk
Verander bij het stijlen één ding per bericht. Zo kun je gemakkelijk zien wat elke verandering doet.
Als je tien veranderingen tegelijk vraagt en het resultaat niet mooi vindt, is het moeilijk te weten welk onderdeel je ongedaan moet maken. Kleine stappen houden de controle bij jou.
Houd het consistent
Een goede landingspagina gebruikt overal dezelfde kleuren en afstanden. Niet bij elkaar passende stijlen zien er onaf uit.
Je kunt de AI vragen je thema op de hele pagina toe te passen, zodat elke sectie bij de hero past.
Apply the same green theme and spacing to every section.
Make sure all buttons and headings look consistent across the page.Een stijl die je niet mooi vindt ongedaan maken
Niet elk resultaat zal je bevallen, en dat is prima. Vertel de AI gewoon wat niet goed voelt en wat je liever wilt.
Je kunt zeggen: "te donker" of "de knop is te klein". De AI past het aan zonder de rest van je werk kwijt te raken.
The background is too dark and hard to read.
Make it lighter and keep the green accents on the buttons only.Een pagina met karakter
Met een paar verzoeken in gewone taal heeft je eenvoudige geraamte nu een duidelijke stijl: een themakleur, prettige afstanden, leesbare lettertypen en een uitnodigende knop.
Onthoud dat je gevoelens hebt beschreven en de AI de technische keuzes voor kleuren en lettertypen hebt laten maken.
Give the whole PlantPal page a fresh, calm, modern style.
Green and white theme, roomy spacing, readable font, and a friendly rounded button.Korte controle
Laten we het stijlen met gewone taal doornemen.
Samenvatting: stijlen in gewone taal
Je hebt geleerd hoe je een pagina stijlt door een sfeer en thema te beschrijven in plaats van code te schrijven. Je hebt de hero gestyled, een uitnodigende knop gemaakt, ademruimte toegevoegd en alles consistent gehouden.
Je hebt ook gezien hoe je een stijl die je niet mooi vindt ongedaan maakt. Vervolgens vul je de pagina met echte secties en inhoud.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 25
- Lessen
- 100
Veelgestelde vragen
Is de les “Stylen in gewone taal” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vibe-coding, waaronder “Stylen in gewone taal”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vibe-coding bevat in totaal 4 lessen.
Wat leer ik in “Stylen in gewone taal”?
Beschrijf hoe u het eruit wilt laten zien. Je oefent met Vibe-coding door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vibe-coding te beginnen?
Ervaring vooraf is niet nodig. Vibe-coding op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Stylen in gewone taal”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vibe-coding?
Ja. Elke les over Vibe-coding bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De pagina structureren
- Stylen in gewone taal
- Secties en inhoud toevoegen
- Voorbeeld bekijken en bijschaven