Alle berichten van Peter Doolaard

Peter Doolaard is auteur van het Handboek HTML5 en CSS3. Dat geeft een behoorlijk compleet overzicht van wat HTML en CSS te bieden hebben. Hij werkt nu aan een nieuw boek: Websites bouwen met HTML, CSS en JavaScript. Een praktisch doe-boek, met vragen, opdrachten en projecten. En natuurlijk uitleg over HTML-elementen, CSS-eigenschappen en JavaScript-opdrachten. De komende tijd publiceert Computer Creatief artikelen die je een idee geven van wat je van het nieuwe boek kunt verwachten. Bekijk alle boeken van Peter.

Tabellen maken in HTML5

Handboek HTML 5 en CSS, 6e editie

Als u ‘t wilt, dan behoort tabellen maken in HTML5 vanzelfsprekend tot de mogelijkheden, beter dan ooit zelfs. Hoe het werkt leg ik uitgebreid uit in mijn boek Handboek HTML 5 en CSS. Hieronder vast een intro!

Met de komst van HTML 5 kon de tabel weer worden gebruikt waarvoor hij is bedoeld: het weergeven van gestructureerde informatie. Mocht u net instappen: tabellen hebben jarenlang dienstgedaan als lay-outhulpmiddel, of beter: als het fundament, de wanden en het dak van websites. Met het volwassen worden van CSS en de groeiende mogelijkheden voor het maken van mooie, solide en flexibele lay-outs kon de tabel terug naar zijn oorsprong: geordende lijst, voor het leesbaar maken van een (groot) aantal feiten of gegevens, gewoonlijk enkel in namen en cijfers en zo gegroepeerd, dat men ze gemakkelijk kan overzien (Dikke Van Dale).

Tabellen kent u dus. In rijen en kolommen die elkaar kruisen en daarmee een raster van cellen vormen, wordt informatie geplaatst. Cijfers, tekst, afbeeldingen, hyperlinks, het kan allemaal in een tabel worden opgenomen (er gingen immers ooit complete webpagina’s in). Tabellen kunnen bijzonder complex zijn, met cellen die meerdere kolommen of meerdere rijen overspannen. In die zin zijn tabellen in HTML niet anders dan spreadsheets of tabellen in kantoorsoftware. Het verschil zit natuurlijk in de manier waarop u een tabel maakt. Daarover gaat dit hoofdstuk. U leert alles over <table>, <tr>, <td> en al die andere elementen die van uw data een keurige tabel maken.

De structuur van een HTML-tabel

Een tabel kan nog verrassend veel verschillende elementen bevatten, als u alle mogelijkheden benut. Lang niet alle elementen zijn verplicht en diverse sluittags mogen worden weggelaten, waardoor een tabel zo eenvoudig kan zijn als het volgende voorbeeld van een tabel met één rij en één kolom:

<table>
       <tr><td>Tabel met 1 cel
</table>

Voor een beter overzicht adviseren we echter in een tabel ook alle sluittags te gebruiken. Het kan bovendien helpen om de elementen op afzonderlijke ingesprongen regels te typen. De aanbevolen notatie ziet er dan zo uit:

<table>
        <tr>
                 <td>Tabel met 1 cel</td>
        </tr>
</table>

Zo eenvoudig is een tabel natuurlijk nooit. We bekijken de opbouw van een tabel aan de hand van iets realistischer voorbeeld: een overzicht van HTMLversies:

tabellen in HTML5

U ziet in deze HTML-code drie belangrijke tabelelementen: <table>, <tr> en <td>. In de afbeelding is te zien dat dit overzicht nog niet erg duidelijk is, doordat een rand of andere visuele aanwijzingen ontbreken. Ook staat de inhoud nogal dicht op elkaar. Maar u weet intussen: dat is
opmaak en hier gaat het over structuur.

De tabel heeft niet alleen visueel een probleem. Er zijn weliswaar rijen en kolommen, maar de samenhang ontbreekt en dat is een probleem voor mensen met een visuele beperking. De schermleessoftware heeft meer aanknopingspunten nodig. De elementen die daarvoor kunnen zorgen komen in de volgende paragrafen voorbij.

tabellen in HTML5
Een tabel van twee rijen en negen kolommen, maar erg overzichtelijk is het nog niet.

De basis: <table>

De basis van elke tabel wordt gevormd door het element <table>. Het is de ancestor (voorouder) van alle andere tabelelementen. <table> heeft alleen de globale attributen.

In een tabel kunnen nogal wat andere elementen worden gebruikt. Ze zijn niet allemaal verplicht, maar wel noodzakelijk voor toegankelijke tabellen. En als u ze gebruikt, is de volgorde belangrijk. De juiste volgorde is:

tabellen in HTML5

Handboek HTML 5 en CSS, 6e editie

Handboek HTML 5 en CSS, 6e editie

HTML en CSS zijn twee onmisbare technieken voor het maken van webpagina’s en webapps. Zonder HTML zijn er geen webpagina’s en zonder CSS zien ze er wel erg kaal uit. In deze zesde, bijgewerkte editie van het Handboek HTML 5 en CSS leert u met beide webtalen werken. U leert eerst hoe u de content markeert met HTML. Daarna maakt u de onderdelen van de pagina op met CSS. Het uitgangspunt daarbij is dat u niet alleen leert dát dingen werken, maar vooral waaróm ze werken.

U krijgt uitleg over het structureren van HTML-documenten en het markeren van alle onderdelen: paginakop, artikelkoppen, tekst, lijsten, hyperlinks, afbeeldingen, video en audio, formulieren en tabellen. Een goede paginastructuur in HTML is de beste garantie voor een geslaagde lay-out en opmaak met CSS. 

De tweede helft van het boek behandelt het maken van lay-outs en het opmaken van de onderdelen met CSS. Er wordt uitgebreid ingegaan op responsive design met alle technieken die CSS daarvoor biedt: gridlay-out, flexbox, multi-column en positionering.

U leert hoe u lettertypen downloadt, tekst opmaakt, navigatiemenu’s vormgeeft, kleur gebruikt en achtergronden maakt. Ook het werken met CSS-functies en het maken van overgangen, animaties en transformaties in 2D en 3D komen aan bod. 

Het boek is uitgebreid met uitleg over toegankelijkheid, container queries, een nieuw hulpmiddel voor responsive design, en cascade layers, voor meer controle over de cascade. 

Op handboek-html-css.nl vindt u code en (interactieve) voorbeelden.

Dit leerboek en naslagwerk geeft een stevige ondergrond voor het werken met de technieken die de basis vormen van modern webdesign. 

Website: handboek-html-css.nl 

  • Zonder coderen taken automatiseren met Zapier!
    Zonder coderen taken automatiseren met Zapier!

    Ontvang je wel eens een antwoord op een webformulier en stuur je dat handmatig door naar de persoon die het antwoord moet afhandelen? Heb je wel eens een chatbot gebouwd, of een webpagina? Ongetwijfeld deed je dat handmatig, of moest je ervoor programmeren, hetzij in HTML of in JavaScript. Dat kan anders, met Zapier! Zapier…

  • Zoekmachines en Chatbots in het AI-tijdperk: Wie heeft de meeste potentie?
    Welke zoekmachine of Chatbot heeft in dit AI-tijdperk de meeste potentie?

    De enorme opkomst van AI heeft ook enorme invloed op de mogelijkheden van zoekmachines. Het was altijd Google wat de klok sloeg, maar nu zijn er andere kapers op de kust. Je hebt Bing/Copilot van Microsoft, dat werkt met AI en Bard (inmiddels Gemini), dat met Google AI werkt. Welke zoekmachine je op dit moment…

  • koelen van je Raspberry Pi
    Koelen van je Raspberry Pi

    Met de komst van de RPI 4 en helemaal de RPI 5 ontkom je niet meer aan het koelen van je Raspberry Pi.

  • Raspberry Pi op batterijen
    Raspberry Pi op batterijen

    Een Raspberry Pi op batterijen laten draaien maakt de kleine krachtpatser nóg breder inzetbaar. In het veld bijvoorbeeld. Al dan niet af en toe bijgetankt door een zonnepaneel.

  • De beste USB-C kabels voor dataoverdacht en opladen
    Vind de juiste USB-C kabels voor dataoverdracht én opladen!

    Vanwege mijn nieuwe – tweedehands – Mac Studio boog ik me weer eens over het USB-C-kabel- en poortenprobleem. Wat is een goede USB-C-kabel? Wat is de snelheid van de USB-C-poorten? Op de Mac Studio heb je lekker veel USB-C-poorten – zes om precies te zijn – en ook nog twee USB-A-poorten. De kabels die je…

  • Nieuw in Photoshop Elements 2024
    Dit is er nieuw in Photoshop Elements 2024

    Elk jaar maakt Adobe een nieuwe versie van Photoshop Elements. We zijn nu aangekomen bij Photoshop Elements 2024. Photoshop Elements lijkt het kleine broertje van grote broer Photoshop, maar onderschat Elements niet. Handelingen die in de grote Photoshop ingewikkeld zijn, zijn in Elements teruggebracht tot eenvoudige handelingen. Ook worden er regelmatig nieuwe mogelijkheden uitgeprobeerd die…

Wat is responsive design?

Om een webpagina op elk schermformaat prettig leesbaar te houden dient een website-ontwikkelaar daar rekening mee te houden. Maar wat is responsive design nou precies? Ga ik uitgebreid op in in mijn boek Handboek HTML 5 en CSS, hieronder lees je alvast het antwoord op de vraag!

Een webpagina moet op elk schermformaat bruikbaar zijn. Hij hoeft er niet altijd hetzelfde uit te zien (dat kan ook niet), maar de informatie moet in het scherm passen en leesbaar zijn, knoppen en links moeten groot genoeg zijn om erop te kunnen tikken en formulieren moeten bruikbaar zijn, om maar een paar dingen te noemen. Omdat een webontwikkelaar niet weet of de bezoeker een telefoon, een tablet, een laptop of een bureaucomputer gebruikt, moeten er verschillende versies van het ontwerp worden gemaakt. Niet precies op maat voor een bepaalde schermgrootte, maar met overgangen naar een andere lay-out op punten waar het ontwerp niet meer klopt (‘breekt’).

Lees verder Wat is responsive design?

Wat is CSS?

HTML is tegenwoordig nagenoeg onlosmakelijk verbonden met CSS, maar wat is CSS nou precies en wat kun je ermee? Dat leg ik uit in mijn Handboek HTML 5 en CSS.

CSS is de afkorting van Cascading Style Sheets, in het Nederlands soms ook trapsgewijs opmaakmodel genoemd. Het begrip cascading/trapsgewijs is uiteraard een belangrijk kenmerk en dat wordt hierna uitgelegd. CSS is de opmaaktaal voor HTML (en XHTML, XML). Het definieert welk lettertype wordt gebruikt, in welke grootte en met welke kleur, of er een achtergrondkleur of achtergrondafbeelding is, hoeveel ruimte er tussen elementen moet zijn enzovoort. Alles (of bijna alles) wat u aan opmaak kunt bedenken, kan met CSS worden gemaakt. CSS wordt beheerd door het World Wide Web Consortium (W3C, waarover meer informatie in ‘t begin van mijn boek is te vinden)

Lees verder Wat is CSS?

Hulpmiddelen voor ontwikkeling van HTML en CSS

Als u zelf wilt gaan stoeien met webcode, dan zijn hulpmiddelen voor ontwikkeling van HTML en CSS natuurlijk onontbeerlijk. Die hoeven niet eens geld te kosten, zo laat ik zien in mijn Handboek HTML 5 en CSS.

Om webpagina’s te kunnen schrijven, hebt u geen bijzondere of dure software nodig. In theorie is elke tekstverwerker (editor) waarmee tekst als kale ASCIItekst kan worden opgeslagen geschikt. Kladblok (voor Windows) of TekstEditor/SimpleText (voor Mac) voldoet al! Maar voor een comfortabeler leven als webdeveloper zijn er ook tal van gespecialiseerde programma’s beschikbaar. Veel ervan zijn gratis.

Lees verder Hulpmiddelen voor ontwikkeling van HTML en CSS

Afspraken over webtalen

Handboek HTML 5 en CSS, 6e editie

Om internet echt bruikbaar te maken waren (en zijn) afspraken over webtalen als html en CSS noodzakelijk. Hoe dat geregeld werd en wordt lees je in dit artikel, afkomstig uit mijn Handboek HTML 5 en CSS.

De ontwikkeling van HTML 5 begon al in 2007. Sinds 2011 is het beschikbaar in de webbrowsers. De specificatie was toen nog volop in ontwikkeling, maar de belangrijkste elementen waren al omarmd door de gemeenschap van webbouwers en door browserfabrikanten. In 2014 heeft de beheerder van de webtalen, het World Wide Web Consortium (W3C) de specificatie ‘definitief’ vastgesteld (in W3C-termen is het dan de aanbevolen specificatie, gelabeld als recommendation). Definitief staat niet voor niets tussen aanhalingstekens, want het werk aan de specificatie gaat gewoon door. Het betekent alleen dat die versie wordt bevroren en dat het werk verder gaat in de volgende versie. Die kwamen er in 2016, en zelfs twee keer in 2017.

Daarna is de ontwikkeling van de HTML-specifcatie overgedragen aan een andere organisatie: WHATWG. Die doet niet aan versienummers en werkt dus dagelijks aan HTML, the living standard. Elke revisie bevat kleine veranderingen. Vaak zijn het aanvullingen en verbeteringen gebaseerd op hoe HTML wordt gebruikt en op reacties uit de gebruikersgemeenschap. Soms wordt een element afgekeurd (omdat het nauwelijks wordt gebruikt) of verandert de toepassing ervan. Breaking changes zijn in elk geval niet te verwachten, omdat het web nu eenmaal niet mag ‘breken’.

afspraken over webtalen
HTML Living Standard, beheerd door WHATWG.
Lees verder Afspraken over webtalen

Het boxmodel van CSS

Alles wat je op een webpagina ziet is een box. Het boxmodel van CSS regelt de opbouw van boxen en de interactie tussen boxen. Weten hoe het boxmodel werk is onmisbare CSS-basiskennis.

Lees verder Het boxmodel van CSS

Maak een schakelaar met CSS en HTML

Maak een schakelaar met CSS en HTML die er niet alleen als een schakelaar uitzien, maar die ook daadwerkelijk iets doet. Zo’n aan-uitschakelaar (toggle of switch) gebruik je bijvoorbeeld om je webformulier op te fruiten. Of je laat bezoekers van de website kiezen tussen een licht en een donker thema. Met een klein beetje JavaScript maak je een werkende themawisselaar van je schakelaar.

Het mooie is dat de basis van de schakelaar gewoon in je HTML-gereedschapskist zit: het element <input type="checkbox">. Het principe is dat je de in- en uitgeschakelde toestand van dit selectievakje gebruikt om de opmaak van de zelfgebouwde schakelaar te veranderen en om JavaScript-code te activeren. Het selectievakje zelf maak je onzichtbaar.

Het is een eenvoudig project en toch maak je kennis met een berg CSS-mogelijkheden. Op CodePen staat het resultaat en daarmee kun je vrijuit experimenteren.

See the Pen schakelaar by Peter Doolaard (@dool) on CodePen.dark

Lees verder Maak een schakelaar met CSS en HTML

Specificiteit in CSS, zo werkt het

Specificiteit in CSS is een belangrijke oorzaak van selectors die niet doen wat jij wilt. Specificiteit gaat over hoe zwaar een selector telt en of een concurrerende selector sterk genoeg is om hem te overschrijven. De oplossing begint met begrijpen hoe specificiteit werkt. Een goede tweede is: houd de specificiteit van je selectors zo laag als kan en zo hoog als nodig is.

Lees verder Specificiteit in CSS, zo werkt het

Leer werken met nieuwe pseudoklassen van CSS

Het assortiment selectors van CSS is uitgebreid. Leer werken met de nieuwe pseudoklassen :is(), :where() en :not(), maak kennis met :has() en controleer je focus met :focus-within en :focus-visible.

Voor een goed begrip van dit artikel is het handig als je weet wat specificiteit is. Kan je kennis een opfrisser gebruiken, lees dan ook het artikel Specificiteit in CSS, zo werkt het.

De pseudoklassen in het kort

Behalve :has() worden alle nieuwe pseudoklassen ondersteund door de belangrijke browser.

Tussen de haakjes van :is() en :where() zet je een lijst van selectors. Elke selector die overeenkomt met een element wordt opgemaakt. Alle soorten selectors en combinators zijn toegestaan. Foute selectors worden genegeerd, maar maken niet de complete selector ongeldig. Bij :is() is de specificiteit gelijk aan de selector met de hoogste specificiteit. Bij :where() is de specificiteit altijd 0.

Ook :not() krijgt een selectorlijst. Elementen die overeenkomen met een selector in de lijst worden juist niet opgemaakt. De specificiteit is gelijk aan de selector met de hoogste specificiteit.

:has() werkt als een ‘parent selector’. De selectorlijst is een voorwaarde, geen opmaakdoel. Het is erg onzeker of :has() daadwerkelijk wordt toegevoegd aan de specificatie.

:focus-within maakt het mogelijk om een voorouder op te maken van een element dat de focus kan krijgen.

:focus-visible laat de browser bepalen of het nodig is om de focusopmaak te tonen. Wel bij toetsenbordnavigatie, niet bij muisgebruik.

Lees verder Leer werken met nieuwe pseudoklassen van CSS

Emoji als favicon

Sinds kort ondersteunen alle moderne browsers SVG als bestandsformaat voor favicons. Een bijwerking is dat je nu ook emoji’s als SVG-favicon kunt gebruiken. (Opfrisser: een favicon is het pictogram in een browsertab of op het homescreen van je telefoon.) Nou is een emoji in de browsertab niet een heel serieuze toepassing.  De echte winst is dat je met SVG eenvoudiger mooie favicons kunt maken.

Browsertab met emoji als favicon.
De emoji als favicon in Firefox op Windows.

Lees verder Emoji als favicon

Toveren met CSS Grid Layout

CSS is de opmaaktaal voor websites en -apps. Met de bundel van drie boeken uit de Web Development Library over die onderwerp leer je alle mogelijkheden, waardoor je veel betere websites ontwerpt. In het boek CSS 3 van Doolaard en Kassenaar leer je werken met CSS-selectors, maateenheden, het box-model, kleurmodellen en meer. De vele oefeningen maken het tot een perfect (zelf-)studieboek. Ben je de basis voorbij? In CSS Flexbox & Grid Layout helpt Peter Doolaard je met het maken van lay-outs voor webpagina’s met Flexible Box Layout en CSS Grid Layout. Deze technieken zijn bedoeld om op een intuïtieve manier complete webpagina’s, apps en onderdelen van de gebruikersinterface in te delen. Met het boek Bootstrap 4 van Peter Kassenaar kunnen niet-designers hun websites snel op consistente en eenvoudige manier opmaken, terwijl ‘echte’ designers hun hart kunnen ophalen aan de vele mogelijkheden die het framework biedt om het naar eigen wens in te stellen. Vergroot je CSS-expertise en bestel deze drie boeken samen voor een voordelige prijs. Hieronder vind je een voorbeeld over het werken met CSS: Toveren met CSS Grid layout van de hand van Peter Doolaard.(H.F.)

Toveren met CSS Grid layout

Hoe bouw je met dezelfde HTML-codebasis een website met vier gezichten? Je leest het in dit artikel waarin we de website rollingstone.com namaken. De lay-out van deze website varieert van één tot vier kolommen waarbij de inhoud steeds net even anders wordt gepresenteerd. CSS Grid Layout en de nieuwe optie subgrid zorgen voor de magie.

Lees verder Toveren met CSS Grid Layout

Stop misbruik van je contactformulier

Aan het begin van elke dag liep ik met een plastic zakje om mijn hand door mijn mailbox om alle poep van de spambots op te ruimen. Dat was ik allang zat, maar een hek om mijn mailveldje plaatsen, daar kwam het niet van. Tot ik toevallig iets las over verborgen invoervelden, honingpotten en invultijden. Dat werkt. Ik kan weer met blote handen in mijn inbox graaien. Stop misbruik van je contactformulier! (Foto hierboven: Mathyas op Unsplash.)

Spambots: dol op contactformulieren

Als je na het invullen van mijn contactformulier op verzenden klikt, wordt het verwerkt door een eenvoudig PHP-script. Dat haalt alle velden op, filtert de kwaadaardige code eruit en stuurt vervolgens jouw bericht naar mijn e-mailadres. Helaas zijn spambots dol op contactformulieren. In razend tempo vullen ze elk veld in dat ze tegenkomen en sturen het de wijde wereld in.
Lees verder Stop misbruik van je contactformulier

Maak zelf een HSL-kleurkiezer met HTML, CSS en JS (4)

Handboek HTML 5 en CSS3Het boek van de maand oktober 2019 was Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Die maand bespreken we het boek en gaven we op dit blog wat voorproefjes uit het boek. Dit is deel 4 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. Deel 1 vind je HIER, deel 2 vind je HIER en deel 3 HIER. De site die bij het boek hoort vind je HIER. (H.F.)

Er bestaan allerlei hulpmiddelen om de CSS-code van een RGB- of HSL-kleur te bepalen, maar zelf iets bouwen is een perfect oefenproject. In een serie korte artikelen lees je hoe je zelf een kleurkiezer voor HSL maakt met HTML, CSS en een beetje JavaScript. Dit is deel 4: de helpfunctie.
Met de kleurkiezer kun je sinds aflevering 3 van de serie een kleur instellen en de CSS-code daarvan kopiëren en plakken in je code-editor. Een ding ontbreekt nog: de helpfunctie. Leer hoe je een overlay en een dialoogvenster maakt met HTML, CSS en Javascript.
Begin gemist? Lees dan eerst deel 1. Lees verder Maak zelf een HSL-kleurkiezer met HTML, CSS en JS (4)

Maak zelf een HSL-kleurkiezer in HTML en CSS (3)

Handboek HTML 5 en CSS3Het boek van de maand oktober is Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Deze maand bespreken we het boek, geven we op dit blog wat voorproefjes uit het boek. Dit is deel 3 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. Lees ook deel 1, deel 2 en deel 4. Bezoek ook de site Handboek HTML5 en CSS3.

Tijd voor het vervolg van een serie over het maken van je eigen HSL-kleurkiezer. In deel 2 is met hulp van het schaduw-DOM de basisopmaak voor de regelaars ingesteld en kreeg de tintregelaar een kleurverloop volgens het HSL-systeem. Die kleur is niet meer dan een achtergrond. De werkelijke waarde komt uit het attribuut value. Hetzelfde geldt voor de andere regelaars. Met JavaScript kunnen we die waarden lezen en verwerken tot een CSS-kleurdeclaratie of de inhoud van een tekstveld. Lees verder Maak zelf een HSL-kleurkiezer in HTML en CSS (3)

Maak zelf een HSL-kleurkiezer in HTML en CSS (2)

Handboek HTML 5 en CSS3Het boek van de maand oktober is Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Deze maand bespreken we het boek, geven we op dit blog wat voorproefjes uit het boek. Dit is deel 2 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. De site die bij het boek hoort vind je HIER. (H.F.)

In deel 1 van deze serie is het raamwerk van de HSL-kleurkiezer gebouwd. Dit deel gaat over het maken van de regelaars voor de componenten van een HSL-kleur. Dat blijkt nog een mooie uitdaging.

De kleurwaarden

Eerst moeten we bedenken hoe we alle kleuren kunnen weergeven. Een HSL-kleur bestaat uit drie componenten: hue (tint), saturation (verzadiging) en lightness (helderheid). HSL is gebaseerd op de RGB-kleuren. Het model ziet eruit als een dubbele kegel, met de kleuren in een cirkel en zwart en wit op de toppen. Rood staat op 0/360 graden, groen op 120 en blauw op 240 graden. In CSS wordt bijvoorbeeld de volle kleur groen weergegeven als hsl(120, 100%, 50%). Hierbij is 120 de tint, 100% de verzadiging en 50% de helderheid. Met de hoofdkleuren van RGB maken we een kleurverloop waarin alle tinten voorkomen. CSS heeft daarvoor de eigenschap linear-gradient. Lees verder Maak zelf een HSL-kleurkiezer in HTML en CSS (2)

Maak zelf een HSL-kleurkiezer in HTML en CSS (1)

Handboek HTML 5 en CSS3Het boek van de maand oktober is Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Deze maand bespreken we het boek, geven we op dit blog wat voorproefjes uit het boek. Dit is deel 1 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. Deel 2 uit deze serie vind je HIER, deel 3 HIER en deel 4 HIER. De site die bij het boek hoort vind je HIER. (H.F.)

Er bestaan allerlei hulpmiddelen om de CSS-code van een RGB- of HSL-kleur te bepalen, maar zelf iets bouwen is een perfect oefenproject. In een serie korte artikelen lees je hoe je zelf een kleurkiezer voor HSL maakt met HTML, CSS en een beetje JavaScript. Dit is deel 1: de interface (UI).

Interface voor het instellen van een HSL-kleur
Lees verder Maak zelf een HSL-kleurkiezer in HTML en CSS (1)