Pagina met (voornamelijk externe) links

Afbeeldingen

(Onderafdeling van CSS)

animation, transform, transition en Motion Path

(Onderafdeling van CSS)

background, background-image, image-set(), sprites, en dergelijke

(Onderafdeling van CSS)

css-tricks.com/css-sprites
Artikel over de voordelen van het gebruik van sprites. (Naarmate het gebruik van http/2 toeneemt, worden sprites voor gewone afbeeldingen steeds minder belangrijk.)

css-tricks.com/focusing-background-image-precise-location-percentages
Uitgebreide uitleg hoe background-image te positioneren met behulp van percentages.

css-tricks.com/using-performant-next-gen-images-in-css-with-image-set
Tutorial over image-set().

csswizardry.com/2018/06/image-inconsistencies-how-and-when-browsers-download-images
Artikel over onder andere het downloaden van background-images. Rond begin 2019 hebben Edge en Google Chrome (en op Blink gebaseerde browsers) het downloaden van background-images ingrijpend veranderd: deze worden nu áltijd gedownload, ook als ze niet worden weergegeven.

ishadeed.com/article/css-multiple-backgrounds
Uitgebreide tutorial over background.

border-image, borders, hoeken, figuren en outline

(Onderafdeling van CSS)

12daysofweb.dev/2024/css-box-decoration-break
Tutorial over text-decoration-break.

cloudfour.com/thinks/css-circles
Artikel over alle mogelijke manieren om een cirkel, rondlopende tekst, en dergelijke te maken.

cloudfour.com/thinks/the-math-behind-nesting-rounded-corners
Tutorial hoe meerdere parallel lopende goed aansluitende borders met ronde hoeken te maken.

css-generators.com/ribbon-shapes
Linten en medailles volledig met HTML en CSS gemaakt. Met bijbehorende code.

css-irl.info/logical-border-radius
Tutorial over border-radius, inclusief Logical Properties (border-start-start-radius en dergelijke).

css-pattern.com
Geometrische patronen gemaakt met behulp van CSS. Met bijbehorende code.

css-shape.com
Allerlei met alleen CSS gemaakte figuren. De bijbehorende code kan worden gewijzigd, waarbij je gelijk het resultaat ziet.

css-tricks.com/revisiting-css-border-image
Uitgebreide tutorial over border-image.

css-tricks.com/the-shapes-of-css
Grote hoeveelheid geometrische vormen zoals sterren, veelhoeken, enzovoort, die zijn gemaakt met gebruik van alleen CSS. Met bijbehorende code.

css-voorbeelden.nl/kader/ronde-hoeken/kader-040
Uitgebreide uitleg van border-radius. Met voorbeelden. Nederlandstalig.

css-voorbeelden.nl/kader/ronde-hoeken/kader-091
Voorbeelden van met border-radius gemaakte ronde hoeken. Nederlandstalig.

css-voorbeelden.nl/kader/afbeelding/kader-111
Voorbeeld van het gebruik van en uitgebreide uitleg over border-image. Nederlandstalig.

css-voorbeelden/tekst/lijnen/tekst-105
Deze Nederlandstalige uitleg gaat eigenlijk over lijnen, maar als je met behulp van de inhoud naar CSS → Uitgebreide beschrijvingen van een eigenschap → border-radius gaat, is daar een uitgebreide uitleg over border-radius te vinden.

hongkiat.com/blog/css-gradient-border
Uitleg hoe een hoek met gradiënten te maken.

medium.com/coding-artist/a-beginners-guide-to-pure-css-images
Tutorial hoe je met alleen CSS een afbeelding kunt maken (in dit geval van een beer).

smashingmagazine.com/2024/01/css-border-image-property
Uitgebreide tutorial over border-image.

smashingmagazine.com/2024/05/modern-guide-making-css-shapes
Allerlei met alleen CSS gemaakte figuren.

Boxmodel en toebehoren (anchor, aspect-ratio, breedte, Containing Block, display, fit/max-min-content, hoogte, marges, object-fit, overflow, position, Stacking Context, z-index, en dergelijke)

(Onderafdeling van CSS)

Browser support en Release Notes

(Onderafdeling van CSS)

Bugs, hacks en @supports

(Onderafdeling van CSS)

Clipping en masking (clip-path, mask-..., shape-outside, en dergelijke)

(Onderafdeling van CSS)

blog.logrocket.com/its-a-trap-ezoid-css-shapes-aren-t-what-you-d-expect
Uitgebreide tutorial met voorbeelden over shape-outside.

codepen.io/michellebarker/post/experimantal-layouts-with-css-shapes-and-clip-path
Uitgebreide tutorial over shape-outside en clip-path, met een aantal indrukwekkende voorbeelden.

css-tricks.com/using-css-clip-path-create-interactive-effects
Voorbeelden van het gebruik van clip-path, deel 1. En hier is deel 2 te vinden.

css-voorbeelden/tekst/illustraties/tekst-043
Met behulp van shape-outside tekst uitlijnen naast een ronde of stervormige afbeelding. Nederlandstalig.

css-voorbeelden/figuren/pijl/figuren-049
Met behulp van clip-path een pijl maken. Nederlandstalig.

digitalocean.com/community/tutorials/css-clipping-with-clip-path
Tutorial over clip-path.

hacks.mozilla.org/2018/09/make-your-web-layouts-bust-out-of-the-rectangle-with-the-firefox-shape-path-editor
Tutorial over de shape-outside- en clip-path-editor in het ontwikkelgereedschap van Firefox.

ishadeed.com/article/clip-path
Tutorial over clip-path. Met veel voorbeelden.

ishadeed.com/article/css-masking
Tutorial over masking. Met veel voorbeelden.

smashingmagazine.com/2018/09/css-shapes
Uitgebreide tutorial over shape-outside (en bijbehorende eigenschappen). Met voorbeelden.

smashingmagazine.com/2019/04/art-direction-for-the-web-using-css-shapes
Tekst allerlei vormen laten volgen met behulp van shape-outside.

tympanus.net/codrops/2018/11/29/an-introduction-to-css-shapes
Tutorial over clip-path en shape-outside met veel voorbeelden.

verpex.com/blog/website-tips/css-tricks-to-master-the-clip-path-property
Tutorial over clip-path.

Compositing, filters en blending

(Onderafdeling van CSS)

bennettfeely.com/image-effects
Het uiterlijk van een afbeelding wordt met behulp van filter, mix-blend-mode en background-blend-mode volledig veranderd, waardoor je goed kunt zien, wat elke eigenschap voor invloed heeft.

blog.logrocket.com/advanced-effects-with-css-background-blend-modes
Voorbeelden met uitleg en code van het gebruik van background-blend-mode.

css-voorbeelden.nl/tekst/effecten/uiterlijk/tekst-121
Kleur van de tekst aanpassen aan de achtergrond met behulp van mix-blend-mode. Met uitgebreide beschrijving van mix-blend-mode in de uitleg (onder CSS → Uitgebreide beschrijving van mix-blend-mode). Nederlandstalig.

css-irl.info/drop-shadow-the-underrated-css-filter
Tutorial over drop-shadow.

typefully.com/DanHollick/blending-modes
Superduidelijke beschrijving van de werking van de verschillende blending modi.

contain

(Onderafdeling van CSS)

smashingmagazine.com/2019/12/browsers-containment-css-contain-property
Uitleg over de css-eigenschap contain.

css-tricks.com/lets/take-a-deep-dive-into-the-css-contain-property
Tutorial over contain.

content-visibility

(Onderafdeling van CSS)

blog.logrocket.com/using-css-content-visibility-boost-rendering-performance
Tutorial over content-visibility.

debugbear.com/blog/content-visibility-api
Tutorial over content-visibility.

Cursors

(Onderafdeling van CSS)

csscursor.info
Overzicht van cursors. Klik op een cursor om de code ervoor te krijgen.

omatsuri.app/css-cursors
Overzicht van cursors. Klik op een cursor om de code ervoor te krijgen.

Cursussen CSS en/of HTML

(Onderafdeling van CSS)

code.tutsplus.com/html-css-for-beginners-mega-free-course
Zeer uitgebreide cursus CSS en HTML in videovorm. Ondertiteld.

codecenter.nl
Interactieve Nederlandstalige cursus HTML en CSS.

developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics
Cursus CSS. Met de gebruikelijke grondigheid van Mozilla. Voorbeelden hieruit zijn simpel uit te proberen op play.

developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content
Cursus HTML. Met de gebruikelijke grondigheid van Mozilla. Voorbeelden hieruit zijn simpel uit te proberen op play.

freecodecamp.org/learn/2022/responsive-web-design
Interactieve cursus CSS en HTML. (Op deze site staat ook een enorme hoeveelheid meer gespecialiseerde tutorials over CSS en HTML)

geeksforgeeks.org/css-tutorial
Interactieve cursus CSS. (Voor het interactieve deel moet je je wel registreren.)

geeksforgeeks.org/html-tutorial
Interactieve cursus HTML. (Voor het interactieve deel moet je je wel registreren.)

html-site.nl/het-10-stappen-plan-om-een-website-te-maken
Korte, duidelijke Nederlandstalige cursus websitemaken.

htmlforpeople.com
Cursus HTML voor beginners.

leanit.nl/gratiscursus/html-en-css
Nederlandstalige basiscursus HTML en CSS.

modernways.be/myap/it/school/course/Webtechnologie
Uitgebreide Vlaamstalige cursus CSS en HTML. (De cursus is voor een school, maar ook prima daarbuiten te volgen.)

quackit.com/css/tutorial
Uitgebreide cursus CSS met mogelijkheid om dingen uit te proberen.

quackit.com/html/tutorial
Uitgebreide cursus HTML met mogelijkheid om dingen uit te proberen.

sherpa.guide/paths/htmlcss
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om HTML en CSS te leren. Daarnaast veel links naar allerlei sites met cursussen, tutorials, en dergelijke.

tutsplus.com/t/courses
Groot aantal cursussen, waaronder gratis. Links kun je een onderwerp kiezen. Voor het volgen van een cursus moet je je wel registreren.

w3schools.com/css
Interactieve CSS-tutorial.

w3schools.com/html
Interactieve HTML-tutorial.

web.dev/learn/css
Interactieve cursus CSS. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken. De cursus is bijvoorbeeld even goed in Firefox te volgen.

web.dev/learn/html
Interactieve cursus HTML. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken. De cursus is bijvoorbeeld even goed in Firefox te volgen.

web4college.com/html
Cursus HTML met veel mogelijkheden om geleerde gelijk uit te proberen.

Default stylesheets (standaard stijlbestanden)

(Onderafdeling van CSS)

chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css
Browser stijlbestand van chromium (gebruikt in onder andere Google Chrome, Edge en Opera).

searchfox.org/mozilla/central/source/layout/style/res/html.css
Browser stijlbestand van Firefox. Je kunt ook in de adresbalk van Firefox 'chrome://browser/content/extension.css' intypen. Dat is het stijlbestand dat Firefox op dat moment gebruikt.

trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Browser stijlbestand van webkit (gebruikt in onder andere Safari)

Eenheden, calc(), min(), en dergelijke

(Onderafdeling van CSS)

12daysofweb.dev/2024/calc-size-and-interpolate-size
Artikel over interpolate-size en calc-size().

2019.wattenberger.com/blog/css-percents
Een overzicht van waar een percentage op is gebaseerd bij verschillende eigenschappen.

blog.logrocket.com/min-max-clamp-css-functions
Uitgebreide tutorial over min(), max() en clamp().

bram.us/2021/07/08/the-large-small-and-dynamic-viewports
Artikel over het verschil tussen de nieuwe dynamische viewport eenheden (vw, vh, vmax, vmin met een 'l', 's' of 'd' ervoor) en de 'gewone' vw en dergelijke.

codebeautify.org/all-tools#css-unit-converter-tools
Omrekenen van en naar allerlei verschillende eenheden.

css-tricks.com/a-complete-guide-to-calc-in-css
Uitgebreide tutorial over calc().

css-tricks.com/css-length-units
Overzicht van alle in CSS gebruikte eenheden.

css-voorbeelden.nl/artikelen/css/artikelen-119
Lengte-eenheden in CSS (inclusief calc() en percentage). Nederlandstalig.

dev.to/kenbellows/gradians-and-turns-the-quiet-heroes-of-css-angles
Uitleg over het verschil tussen en gebruik van degrees, radians, gradians en turns.

fonts.google.com/knowledge/using_type/the_complications_of_typographic_size
Uitleg waarom pixels (en daarop gebaseerde maten als centimeter) vaak (sterk) afwijken van die eenheden in de 'echte' wereld.

ishadeed.com/article/css-cap-unit
Artikel over de eenheid cap.

isahdeed.com/article/css-min-max-clamp()
Tutorial over min(), max() en clamp().

ishadeed.com/article/new-viewport-units
Tutorial over de dynamische viewport-eenheden svh, lvh en dvh.

ishadeed.com/article/use-cases-css-comparison-functions
Voorbeelden van het gebruik van max(), min() en clamp().

ishadeed.com/article/viewport-units
Tutorial met veel voorbeelden over viewport eenheden.

katydecorah.com/css-ruler
Verschil tussen relatieve, absolute en viewport eenheden uiterst duidelijk zichtbaar gemaakt. Door getallen te wijzigen zie je, hoe de verschillende eenheden reageren.

meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit
Uitleg over de eenheid ch en waarom het meestal geen goed idee is die te gebruiken om te lange regels te voorkomen.

moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max
Tutorial met veel voorbeelden over calc(), clamp(), min() en max().

sitepoint.com/css-sizing-units
Overzicht van alle eenheden in CSS.

sitepoint.com/understanding-and-using-rem-units-in-css
Artikel met praktische voorbeelden voor het gebruik van rem.

smashingmagazine.com/2021/07/css-absolute-units
Artikel over het afwijken van voor websites gebruikte absolute eenheden als inches, centimeters, en dergelijke van diezelfde eenheden in de fysieke wereld.

smashingmagazine.com/2023/12/new-css-viewport-units-not-solve-classic-scrollbar-problem
Uitgebreid artikel over viewport eenheden (vw, vh, vmax, vmin, eventueel met een 'l', 's' of 'd' ervoor).

stackdiary.com/css-math-functions
Tutorial over calc(), min(), max() en clamp().

techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/absolute-length-units
Tutorial over absolute eenheden.

techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/relative-length-units-based-on-font
Tutorial over relatieve eenheden met onder andere voorbeelden van het gebruik van de minder bekende eenheden cap, ch, ex, ic, lh en rlh.

techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/relative-length-units-based-on-the-viewport
Tutorial over de viewport eenheden vw, vh, vb, vi, vmin en max (eventueel met l, s of d ervoor).

typefully.com/DanHollick/how-big-is-1px
Uitleg in gewone taal waarom de maat van een pixel varieert.

web.dev/articles/min-max-clamp
Tutorial over clamp(), min() en max(). Met een aantal praktische voorbeelden.

Flexbox

(Onderafdeling van CSS)

codecamps.com/3-superpowers-of-the-flex-box-model
Uitgebreid artikel over met name flex-basis, flex-shrink en flex-grow.

codepen.io/enxaneta/
Werking van allerlei onderdelen van flexbox gedemonstreerd. Als je iets verandert, zie je gelijk het resultaat.

codingfantasy.com/flexboxadventure
Tutorial in de vorm van een spel.

css-tricks.com/snippets/a-guide-to-flexbox
Uitleg met vrij weinig tekst, maar veel afbeeldingen. Heel duidelijk.

css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think
Uitgebreide uitleg over de (soms onverwachte) effecten van flex-shrink, flex-grow, flex-basis en flex.

css-tricks.com/understanding/flex-grow-flex-shrink-and-flex-basis
Duidelijke tutorial over flex-grow, flex-shrink, flex-basis en hun onderlinge samenhang.

dev.to/smpnjn/a-complete-interactive-guide-to-css-flex-box
Met heel weinig tekst wordt behulp van knoppen op een uiterst simpele en duidelijke manier getoond, wat voor effect de verschillende waarden hebben.

developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout
Uitleg over het gebruik van flexbox. Met de gebruikelijke uitgebreidheid en grondigheid van Mozilla.

flexbox.help
De werking van verschillende eigenschappen en waarden uitproberen. Heel simpel en heel duidelijk.

flexbox.malven.co
Soort spiekbriefje met voorbeelden. Als je op 'n voorbeeld klikt, wordt de code gekopieerd.

flexboxlabs.netlify.app
Met behulp van knoppen de eigenschappen van flexbox demonstreren.

flexboxdefense.com
Tutorial in de vorm van een spelletje met bewegende doelen.

flexboxfroggy.com
Uiterst duidelijke (en leuke) tutorial in de vorm van een spelletje met kikkers.

ishadeed.com/article/css-flex-property
Uitgebreide tutorial over flex (flex-grow, flex-shrink en flex-basis).

joshwcomeau.com/css/interactive-guide-to-flexbox
Uitgebreide interactieve tutorial over flexbox.

onextrapixel.com/flexbox-centering-guide
Artikel met tal van voorbeelden over verticaal en/of horizontaal centreren met behulp van flexbox.

philipwalton.github.io/solved-by-flexbox
Voorbeelden van enkele veel voorkomende lay-outproblemen die met behulp van flexbox opgelost kunnen worden.

smashingmagazine.com/2018/08/flexbox-display-flex-container
Deel 1 van een zeer uitgebreide tutorial over flexbox.
Deel 2   Deel 3   Deel 4

webdesign.tutsplus.com/t/tutorials/search/flexbox
Hele serie tutorials met praktische toepassingen van flexbox.

wpshout.com/css-flexbox-tutorial
Uitgebreide interactieve tutorial. Met mogelijkheid om content van rechts naar links te laten lopen.

float en Block Formatting Context

(Onderafdeling van CSS → Browser support en Release Notes)

smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context
Artikel over Block Formatting Context. Waarin bijvoorbeeld ook wordt uitgelegd waarom overflow: auto; helpt bij problemen met float.

Fonts, typografie, tekst, emoticons en lijnen

(Onderafdeling van CSS)

Forms, buttons, :disabled, :enabled, checkbox hack, en dergelijke

(Onderafdeling van CSS)

adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen
Tutorial over het opmaken van <input type="radio"> en <input type="checkbox">.

adrianroselli.com/2021-03/under-engineered-select-menus.html
Tutorial over het opmaken van <select>.

adrianroselli.com/2019/09/under-engineered-text-boxen
Tutorial over het opmaken van <textarea>.

austingil.com/build-html-forms-right-styling
Uitgebreide tutorial over het opmaken van formulieren (onderdeel van een serie over formulieren).

codyhouse.co/blog/post/custom-accessible-radio-checkbox-buttons-vertical-alignment
Artikel over hoe zelfgemaakte radioknoppen en keuzevakjes goed uit te lijnen met hun <label>.

css-tricks.com/custom-styling-inputs-with-modern-css-features
Tutorial over het opmaken van <input type="radio"> en <input type="checkbox">.

css-tricks.com/fun-times-styling-checkbox-states
Voorbeelden voor het opmaken van een (niet-)aangekruist keuzevakje.

css-tricks.com/styling-cross-browser-compatible-range-inputs-css
<input type="range"> er in alle browsers hetzelfde uit laten zien.

css-voorbeelden/tekst/bewerken
Onderdelen van een formulier in- en uitschakelen met behulp van enabled en disabled. Nederlandstalig.

developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling
Tutorial hoe verschillende onderdelen van een formulier op te maken.

filamentgroup.com/lab/select-css
Uitleg over het opmaken van <select> in verschillende browsers.

hongkiat.com/blog/html5-range-slider-style
<input type="range"> er in alle browsers hetzelfde uit laten zien.

ishadeed.com/article/styling-the-good-old-button
Zeer uitgebreide tutorial over het opmaken van <button>.

moderncss.dev/pure-css-custom-checkbox-style
Tutorial voor het opmaken van keuzevakjes op een toegankelijke manier.

moderncss.dev/pure-css-custom-styled-radio-buttons
Tutorial voor het opmaken van radioknoppen op een toegankelijke manier.

sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons
Tutorial over het opmaken van keuzevakjes en radioknoppen, terwijl ze toegankelijk blijven.

scottaohara.github.io/a11y_styled_form_controls
Onderdelen van formulieren opmaken op een manier dat ze toch toegankelijk blijven.

smashingmagazine.com/2021/09/simplyfing-form-styles-accent-color
Tutorial over accent-color (basiskleur voor onderdelen van formulieren).

webdesign.tutsplus.com/the-best-css-checkbox-hack-tutorials-on-tuts
Acht voorbeelden van wat je kunt doen met behulp van de checkbox hack, inclusief zeven volledige tutorials.

Forums

(Onderafdeling van CSS)

css-voorbeelden.nl/forum
Forum van deze site. Nederlandstalig. Bedoeld voor vragen en dergelijke over de voorbeelden op deze site, maar je kunt het altijd proberen...

helpmij.nl/forum/Website-maken-Programmeren
Algemeen forum over het maken van websites. Nederlandstalig.

phphulp.nl/php/forum/javascript
Nederlandstalig forum over JavaScript.

phphulp.nl/php/forum/xhtml-css
Nederlandstalig forum over HTML en CSS.

Generated content, ::after, ::before, en dergelijke

(Onderafdeling van CSS)

adrianroselli.com/2020/10/alternative-text-for-css-generated-content
Artikel over alternatieve tekst voor schermlezers bij gebruik van 'content'.

codersblock.com/blog/diving-into-the-before-and-after-pseudo-elements
Uitgebreide tutorial met voorbeelden over ::after en ::before.

matuzo.at/blog/heres-what-i-didnt-know-about-content
Artikel over de mogelijkheden (en risico's) van 'content'.

Gradiënten

(Onderafdeling van CSS)

codepen.io/keithjgrant
Vergelijkend overzicht van dezelfde gradiënten in verschillende colorspaces.

joshwcomeau.com/css/make-beautiful-gradients
Waarom gradiënten vaak een 'grauw' middendeel hebben en hoe dit te voorkomen.

patrickbrosset.com/articles/2022-10-24-do-you-really-understand-CSS-radial-gradients
Heel gedetailleerde uitleg over radial-gradient.

smashingmagazine.com/2022/01/css-radial-conic-gradient
Uitgebreide uitleg over (het gebruik van) radial-gradient en conic-gradient.

webdesign.tutsplus.com/how-to-use-gradients-on-the-web
Uiterst overzichtelijke tutorial over gradiënten.

Grid

(Onderafdeling van CSS)

12daysofweb.dev/2022/css-subgrid
Voorbeelden van het gebruik van subgrid.

blog.logrocket.com/css-grid-guide
Uitgebreide tutorial met duidelijke voorbeelden en links naar meer info.

codingfantasy.com/games/css-grid-attack/play
Interactieve tutorial in de vorm van een spel met één lieverd en 'n stel booswichten. Om het spel volledig te spelen is registratie nodig.

css-tricks.com/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs
Tutorial voor een flexibele lay-out met minimaal gebruik van grid.

css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit
Duidelijke uitleg over het verschil tussen auto-fill en auto-fit.

css-tricks.copm/snippets/css/css-grid-starter-layouts
Voorbeelden van veel voorkomende lay-outs, maar dan gemaakt met behulp van grid. Inclusief code.

css-tricks.com/snippets/css/complete-guide-grid
Systematisch overzicht van eigenschappen. Met afbeeldingen die het effect van de eigenschappen laten zien.

css-tricks.com/difference-explicit-implicit-grids
Artikel over het verschil tussen expliciete en impliciete grids.

css-tricks.com/introduction-fr-css-unit
Uitgebreide uitleg over de fr-eenheid.

cssgridgarden.com/#nl
Grid leren met behulp van een interactief spel (Nederlandstalig).

dev.to/mustapha/css-grid-illustrated-introduction
Overzichtelijke tutorial die stap voor stap de verschillende eigenschappen behandelt.

developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grids
Tutorial met de gebruikelijke grondigheid van Mozilla.

freecodecamp.org/news/complete-guide-to-css-grid
Uitgebreide interactieve tutorial in boekvorm.

ishadeed.com/article/css-grid-area
Tutorial over grid-template-areas.

ishadeed.com/article/css-grid-minmax
Tutorial over minmax() bij grid.

ishadeed.com/article/learn-css-subgrid
Tutorial over subgrid. Met een aantal praktische voorbeelden.

joshwcomeau.com/css/interactive-guide-to-grid
Interactieve tutorial.

matuzo.at/blog/the-dark-side-of-the-grid
Serie artikelen over toegankelijkheid en grid en hoe eventuele problemen te voorkomen.

mozilladevelopers.github.io/playground/css-grid
Tutorial met voorbeelden en uitleg hoe developertools te gebruiken voor grid. De code van de voorbeelden kan worden gewijzigd, waardoor je gelijk het effect van veranderingen ziet.

sitepoint.com/css-grid-repeat-function
Tutorial over repeat().

smashingmagazine.com/2020/01/understanding-css-grid-container
Uitgebreide meerdelige tutorial over grid.

testdriven.io/blog/css-grid
Uiterst overzichtelijke tutorial over grid.

wpshout.com/css-grid-tutorial-layout
Uitgebreide interactieve tutorial. Met mogelijkheid om content van rechts naar links te laten lopen.

Hulpmiddelen

(Onderafdeling van CSS)

Gecomprimeerde CSS weer leesbaar maken, SCSS omzetten naar gewone CSS, en dergelijke zie Gereedschap → Code leesbaar maken.

Comprimeren, ongebruikte CSS verwijderen, en dergelijke zie Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke → Comprimeren.

Kleuren

(Onderafdeling van CSS)

12daysofweb.dev/2024/css-light-dark
Tutorial over light-dark().

abhisaha.com/blog/interactive-post-oklch-color-space
Interactieve tutorial over oklch().

blog.logrocket.com/exploring-css-color-module-level-5
Overzicht van nieuwe functies en dergelijke uit CSS Color Module Level 5.

blog.logrocket.com/oklch-css-consistent-accessible-color-palettes
Tutorial over oklch().

cloudfour.com/thinks/hsl-a-color-format-for-humans
Uitleg over hsl()-notatie en vergelijking daarvan met de hexadecimale notatie.

colorandcontrast.com
Artikel over de bouw van het oog, theorie van kleuren, contrast, en dergelijke. Omdat je op verschillende plaatsen instellingen kunt veranderen, wordt ook goed zichtbaar hoe simpel je oog is te misleiden.

css-tricks.com/nerds-guide-color-web
Overzichtsartikel over de opbouw van kleuren, eigenschappen die met kleur te maken hebben, voorbeelden, en dan nog wat meer.

developer.chrome.com/blog/css-relative-color-syntax
Tutorial over de color()-functie.

developer.chrome.com/docs/css-ui/high-definition-css-color-guide
Uitgebreid vergelijkend overzicht van alle denkbare kleur-formaten. Met uitgebreide theoretische onderbouwing.

developer.mozilla.org/en-US/blog/color-palettes-css-color-mix
Tutorial over color-mix().

developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors
Tutorial over de color()-functie.

ericportis.com/posts/2024/okay-color-spaces
Uitleg hoe colorspaces zoals rgb(), oklab() en oklch() zijn opgebouwd.

evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
Vergelijking tussen oklch(), rgb() en hsl().

ishadeed.com/article/css-color
Uitgebreid artikel over alle manieren om met css kleuren te definiëren, veranderen, en noem maar op.

ishadeed.com/article/css-relative-colors
Tutorial over relatieve kleuren.

joshwcomeau.com/css/color-formats
Vergelijkend overzicht van alle manieren om kleuren te definiëren in CSS.

keithjgrant.com/posts/2023/04/its-time-to-learn-oklch-color
Tutorial over oklch().

medium.com/dev/channel/css-hex-colors-demystified
Uiterst gedetailleerde uitleg over hexadecimale waarden bij kleuren.

smashingmagazine.com/2021/07/hsl-colors-css
Tutorial over hsl(), met praktische voorbeelden.

smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css
Tutorial over oklch().

web.dev/articles/light-dark
Tutorial over light-dark().

xhtml5.nl/naslag/kleuren
Nederlandstalig overzicht van in CSS gebruikte namen en bijbehorende hexadecimale codes.

Kolommen (inclusief column-...)

(Onderafdeling van CSS)

css-tricks.com/revisiting-css-multi-column-layout
Artikel hoe met behulp van nieuwere eigenschappen tal van problemen met kolommen kunnen worden opgelost.

pepelsbey.dev/articles/two-columns
Zes (min of meer) goede en vijf (min of meer) slechte technieken om een lay-out met twee kolommen te maken.

smashingmagazine.com/2019/01/css-multiple-column-layout-multicol
Tutorial over CSS-kolommen met voor- en nadelen, hoe ze op dit moment bruikbaar kunnen zijn en over toekomstige ontwikkelingen.

Lay-outs

(Onderafdeling van CSS)

css-voorbeelden.nl/lay-out
Ingangspagina naar voorbeelden en uitleg over lay-outs. Nederlandstalig.

htmlrev.com
Vrij te gebruiken lay-outs. Onder de knop HTML staan lay-outs die alleen HTML en CSS gebruiken.

html5up.net
CSS-lay-outs onder een Creative Commons-licentie.

quackit.com/html/templates
Grote hoeveelheid vrij te gebruiken lay-outs.

templated.co
Lay-outs onder een Creative Commons-licentie.

themewagon.com
Lay-outs waarvan veel vrij te gebruiken onder verschillende licenties.

Logical properties, dir-attribuut, :dir(), writing-mode, en dergelijke

(Onderafdeling van CSS)

adrianrosellil.com/2019-11/css-logical-properties
Uitleg over logical properties. Met handige 'vertaaltabel' tussen oude en nieuwe eigenschappen en waarden.

css-tricks.com/css-logical-properties-and-values
Uitgebreide tutorial over logical properties, met steeds overzichtelijk het verschil met de 'gewone' eigenschappen.

ishadeed.com/article/css-logical-properties
Tutorial over logical properties.

rtlstyling.com/posts/rtl-styling
Zeer uitgebreide tutorial over verschillende tekstrichtingen en de samenhang daarvan met tal van andere eigenschappen.

smashingmagazine.com/2019/08/writing-modes-layout
Artikel over writing-mode met de nadruk op de samenhang met flexbox en grid.

webdesign.tutsplus.com/an-introduction-to-css-logical-properties
Cursus in de vorm van video's over logical properties (met ondertiteling).

Media Query's, Container Query's en Responsive Web Design

(Onderafdeling van CSS)

Menu's, lijsten, counter(), ::marker, en dergelijke

(Onderafdeling van CSS)

blog.logrocket.com/styling-numbered-lists-with-css-counters
Tutorial over het gebruik van counters bij lijsten.

css-tricks.com/list-markers-and-string-styles
Artikel over welke eigenschappen je wel en niet kunt gebruiken bij het opmaken met behulp van ::marker, inclusief bugs.

css-tricks.com/some-things-you-might-not-know-about-custom-counter-styles
Tutorial over @counter-style.

css-tricks.com/styling-counters-in-css
Uitgebreid overzicht van manieren om counters op te maken.

css-voorbeelden.nl/lijst/lijst-065
Geneste lijsten met automatische nummering met behulp van counter() en counters(). Nederlandstalig.

smashingmagazine.com/2019/07/css-lists-markers-counters
Tutorial over counters en ::marker.

web.dev/articles/css-marker-pseudo-element
Tutorial hoe ::marker te gebruiken voor aangepaste bullets. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

Nieuwsbrieven en dergelijke

(Onderafdeling van CSS)

Overzicht eigenschappen, tips, specificatie, en dergelijke

(Onderafdeling van CSS)

css-tricks.com/almanac
Inhoudsopgave van op css-tricks.com beschreven eigenschappen en selectors. Meestal met voorbeeldcode, links naar pagina's met meer info, en dergelijke.

cssportal.com/css-properties
Overzicht van eigenschappen. Met veel aan te passen voorbeelden.

cssvalues.com
Bij alle css-eigenschappen snel de toegestane waarden en dergelijke, browser support en uitleg opzoeken.

devdocs.io
Browser support voor zo'n beetje elk denkbare taal, ook in mobiele browsers. Met voorbeelden, links naar meer info, enzovoort.

developer.mozilla.org/en-US/docs/Web/CSS/Reference
Mozilla's uitgebreide overzicht (met uitleg en voorbeelden) van wat Firefox ondersteunt aan eigenschappen, attributen, selectors, enzovoort. Heeft ook verwijzingen naar wat andere browsers ondersteunen, en op welke (afwijkende) manier die dat doen.

drafts.csswg.org/indexes
Alfabetisch overzicht van alle in CSS-specificaties genoemde eigenschappen, selectors, enzovoort, met links naar betreffende specificatie.

quackit.com/css/reference
Alfabetisch overzicht van eigenschappen, @-regels, functies, en dergelijke. Met veel aan te passen voorbeelden.

tympanus.net/codrops/css_reference
Heel uitgebreid overzicht van eigenschappen, functies, enzovoort, met voorbeelden, links naar meer info, demo's, enzovoort. Veel voorbeelden kun je online uitproberen.

w3.org/Style/CSS/all-descriptors
Overzicht van alle CSS-descriptors (media-regels, counters, en dergelijke) met links naar de bijbehorende specificatie.

w3.org/Style/CSS/all-properties
Overzicht van alle CSS-eigenschappen met links naar de bijbehorende specificatie.

w3.org/Style/CSS/current-work
Beknopt overzicht van de status van en links naar alle CSS-modules na versie 2.2 (de laatste versie die als één geheel is verschenen.)

w3.org/TR/CSS2
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. Officiële specificatie CSS 2.1. Met ingang van CSS3 is CSS opgesplitst in een hele serie afzonderlijke modules, die elk een eigen level-nummer hebben.

w3.org/TR/CSS22
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification. Officiële specificatie CSS 2.2. Bevat kleine verbeteringen en dergelijke ten opzichte van de hierboven genoemde versie 2.1.
Nederlandse vertaling.

Printen (inclusief @page, page-break-..., en dergelijke)

(Onderafdeling van CSS)

alvaromontoro.hashnode.dev/css-tip-style-your-radio-buttons-and-checkboxes-for-printing
Tutorial over print-color-adjust (bepaalt of achtergronden en dergelijke ook worden geprint).

sitepoint.com/css-printer-friendly-pages
Artikel met tips om met behulp van CSS een pagina printvriendelijk te maken.

smashingmagazine.com/2019/02/css-fragmentation
Tutorial over break-before, break-after, en dergelijke. Met tips hoe dit te gebruiken in browsers die dit (nog) niet ondersteunen.

Quirks modus

(Onderafdeling van CSS)

hsivonen.fi/doctype
Zeer uitgebreid artikel over wat welk doctype doet, almost standards, standards en quirks modus, compatibiliteits­weergave in Internet Explorer, enzovoort.

jkorpela.fi/quirks-mode
Uitgebreid artikel over wat quirks modus is en hoe de weergave in quirks modus is.

Schaduw

(Onderafdeling van CSS)

css-tricks.com/getting-deep-into-shadows
Theoretische achtergronden, praktische tips en voorbeelden met code van allerlei soorten schaduw.

css-voorbeelden.nl/schaduw
Ingangspagina naar voorbeelden en uitleg over schaduw, waaronder box-shadow, text-shadow en drop-shadow. Nederlandstalig.

joshwcomeau.com/css/designing-shadows
Artikel over de theorie achter het maken van goede schaduwen.

Scrollbalk

(Onderafdeling van CSS)

digitalocean.com/community/tutorials/css-scrollbars
Tutorial over het aanpassen van het uiterlijk van de scrollbalk.

filamentgroup.com/lab/scrollbars
Overzichtsartikel hoe je het uiterlijk van een scrollbalk kunt wijzigen. Inclusief tal van vreemdigheden die de verschillende browsermakers er kennelijk als ietwat eigenaardige hobby in stoppen.

ishadeed.com/article/custom-scrollbars-css
Tutorial over het aanpassen van het uiterlijk van de scrollbalk.

Scrollen, Scroll Snap, overflow-behavior, en dergelijke

(Onderafdeling van CSS)

bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation
Artikel over manieren om soepeler te scrollen.

css-tricks.com/practical-css-scroll-snapping
Tutorial over Scroll Snap. Met ook aandacht voor de (nog vele) problemen en praktische voorbeelden.

web.dev/articles/css-scroll-snap
Uitgebreide tutorial over Scroll Snap.

ishadeed.com/article/css-scroll-snap
Tutorial over Scroll Snap.

ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior
Tutorial over overscroll-behavior.

newinweb.com/2018/09/06/css-scroll-snap
Tutorial over het maken van een slideshow met behulp van Scroll Snap.

smashingmagazine.com/2018/08/scroll-bouncing-websites
Tutorial over hoe bij fixed footers en dergelijke het stuiter-effect bij scrollen te voorkomen.

Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke

(Onderafdeling van CSS)

Trigonometrische functies

(Onderafdeling van CSS)

danielcwilson.com/posts/css-shapes-with-trig-functions
Voorbeelden van het maken van vormen met behulp van functies als cos() en sin().

danielcwilson.com/posts/mathematicss-rem-mod
Interactieve tutorial over rem() en mod().

dev.to/jh3y/circular-text-with-css
Tutorial hoe in een cirkel ronddraaiende tekst te maken.

tympanus.net/codrops/2021/06/01/trigonometry-in-css-and-javascript-introduction-to-trigonometry
Deel 2   Deel 3
Driedelige tutorial met veel praktische voorbeelden.

Validators

(Onderafdeling van CSS)

csstree.github.io/docs/validator
CSS-validator.

jigsaw.w3.org/css-validator
W3C CSS-validator. Geeft vaak raadselachtige meldingen, maar is wel redelijk beknopt. Om overbodige foutmeldingen te voorkomen: onder Meer opties zit de mogelijkheid om te kiezen voor CSS3 en om voorvoegsels als -moz- geen fout te laten geven.

Variabelen ('custom properties') en @property

(Onderafdeling van CSS)

blog.logrocket.com/how-to-use-css-variables
Tutorial met voorbeelden over CSS-variabelen.

codersblock.com/blog/what-can-you-put-in-a-css-variable
Overzicht van wat er allemaal in een CSS-variabele kan worden gestopt.

css-tricks.com/a-complete-guide-to-custom-properties
Uitgebreide tutorial over custom properties.

freecodecamp.org/news/everything-you-need-to-know-about-css-variables
Zeer gedetailleerde tutorial over CSS-variabelen met uitleg op beginnersniveau.

ishadeed.com/article/css-vars
Tutorial met veel voorbeelden over CSS-variabelen.

matthiasott.com/notes/css-custom-properties-fail-without-fallback
Artikel over hoe te voorkomen dat (meer ingewikkelde) CSS-variabelen soms niet werken.

moderncss.dev/how-custom-property-values-are-computed
Artikel over de soms onverwachte effecten van een variabele met een ongeldige waarde.

sitepoint.com/how-to-use-variables-in-css
Uitgebreide tutorial over CSS-variabelen.

utilitybend.com/blog/taking-a-closer-look-at-property-in-css
Tutorial over @property.

web.dev/articles/at-property
Tutorial over @property.

Afbeelding maken, bewerken, converteren en optimaliseren

(Onderafdeling van Gereedschap)

Audio

(Onderafdeling van Gereedschap)

Code leesbaar maken

(Onderafdeling van Gereedschap)

a11y-tools/markup-de-crapulator
In elke browser kun je de code van een pagina bekijken. Maar dat levert vaak een volstrekt onleesbare brij op. Op deze site kun je online allerlei bijzaken weghalen, zodat je door de bomen het bos weer kunt zien.
Het bijbehorende artikel is te vinden op tpgi.com.

cleancss.com/css-beautify
Ongeformatteerde of gecomprimeerde CSS netjes laten inspringen en dergelijke.

cleancss.com/html-beautify
Ongeformatteerde of gecomprimeerde HTML netjes laten inspringen en dergelijke.

cleancss.com/javascript-beautify
Ongeformatteerd of om andere redenen onleesbaar JavaScript netjes laten inspringen en dergelijke.

cleancss.com/php-beautify
PHP netjes laten inspringen en dergelijke.

cleancss.com/sql-beautify
Ongeformatteerde of om andere redenen onleesbare SQL netjes laten inspringen en dergelijke.

cssportal.com/less-to-css
LESS converteren naar gewone CSS.

cssportal.com/scss-to-css
SCSS converteren naar gewone CSS.

j-brooke.github.io/FracturedJson
JSON omzetten naar een voor mensen leesbaarder formaat.

json.pub
Ongeformatteerde JSON omzetten naar een voor mensen leesbaarder formaat.

jsoncrack.com/editor
Geneste JSON-objects grafisch weergeven op een uiterst duidelijke manier.

jsonformatter.org/scss-to-css
SCSS converteren naar gewone CSS.

onlinetools.com/json/prettify-json
JSON formatteren.

pretty-print-json.js.org
Ruwe JSON-code omzetten naar geformatteerde code.

unminify.com
Gecomprimeerde CSS, HTML, JavaScript, XML en JSON weer netjes formatteren.

Combinaties van CSS, HTML, JavaScript, enzovoort uitproberen en eventueel delen

(Onderafdeling van Gereedschap)

codepen.io
CSS, HTML en JavaScript uitproberen en eventueel delen met anderen. (Voor opslaan en/of delen moet je je registreren).
Op imaginarycloud.com staat een korte tutorial.

cssdeck.com
CSS, HTML en JavaScript uitproberen en eventueel delen met anderen.

dabblet.com
CSS, HTML en JavaScript uitproberen en eventueel delen met anderen.

developer.mozilla.org/en-US/play
CSS, HTML en JavaScript uitproberen en eventueel delen met anderen (daarvoor is wel een gratis account nodig). Vanuit de documentatie op mozilla.org kunnen voorbeelden hier simpel worden bewerkt.

jsbin.com
CSS, HTML en JavaScript uitproberen en eventueel delen met anderen. Er kunnen ook bibliotheken worden gebruikt.

jsfiddle.net
CSS, HTML en JavaScript uitproberen en eventueel delen met anderen.

jsitor.com
CSS, HTML en JavaScript uitproberen. Er kunnen ook bibliotheken worden gebruikt.

jsplayground.dev
Heel simpele editor om CSS, HTML en JavaScript uit te proberen.

liveweave.com
CSS, HTML en JavaScript uitproberen. Er kunnen ook bibliotheken worden gebruikt.

rendera.org
CSS, HTML en JavaScript uitproberen. Met voorbeelden.

Commandline (terminal, NPM, Grunt, Gulp, en dergelijke)

(Onderafdeling van Gereedschap)

bun.sh
Alternatief voor Node.js.

css-tricks.com/a-complete-beginners-guide-to-npm
Uitgebreide tutorial over NPM en Node.

itsfoss.com/linux-terminal-basics
Beginnerstutorial over de terminal.

joshwcomeau.com/javascript/terminal-for-js-devs
Inleiding voor websitebouwers in het gebruik van de terminal.

modernways.be/myap/it/school/course/De terminal voor ontwikkelaars
Vlaamstalige cursus werken in de terminal, waarbij ook het installeren van een server, MySQL, en dergelijke worden behandeld. (De cursus is voor een school, maar ook prima daarbuiten te volgen.)

sherpa.guide/paths/node
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om Node.js te leren. Daarnaast veel links naar allerlei sites met cursussen, tutorials, en dergelijke.

CSS

(Onderafdeling van Gereedschap)

Data-URI maken en base64-hulpmiddelen

(Onderafdeling van Gereedschap)

codebeautify.org/all-tools#base64-tools
Hulpmiddelen voor base64, waaronder een groot aantal converters van en naar base64.

csswizardry.com/2017/02/base-64-encoding-and-performance
Artikel waarin wordt uitgelegd, waarom je beter geen grote afbeeldingen op deze manier kunt opnemen in CSS.

debugbear.com/blog/base64-data-urls-html-css
Artikel over de invloed van base64 op de laadsnelheid van de pagina.

dopiaza.org/goodies/data-uri-generator
Data-URI maken van eigen afbeelding of afbeelding op internet.

Debuggen

(Onderafdeling van Gereedschap)

E-mail ontwerpen

(Onderafdeling van Gereedschap)

caniemail.com
Overzicht van ondersteuning van HTML en CSS in een groot aantal e-mail-programma's.

github.com/hteumeuleu/email-bugs/issues
Overzicht van bugs in verschillende e-mail-programma's, met soms oplossingen.

smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools
Overzicht van hulpmiddelen, tutorials, en dergelijke om e-mails te ontwerpen. Met heel veel links.

webdesign.tutsplus.com/build-an-html-email-temoplate-from-scratch
Gedetailleerde stap-voor-stap tutorial voor het ontwerpen van een e-mail.

webdesign.tutsplus.com/series/mastering-html-email
Pagina met links naar serie tutorials over het ontwerpen van een e-mail.

Editors, IDE's, en dergelijke

(Onderafdeling van Gereedschap)

bluefish.openoffice.nl
Bluefish: open source editor voor 'n hele reeks talen, waaronder HTML, CSS en PHP.

code.visualstudio.com
Visual Studio Code: (oorspronkelijk) door Microsoft gemaakte open source editor met onder andere ondersteuning voor CSS, HTML en JavaScript.
Visual Studio Code is gebaseerd op open source. Iedereen kan dat in principe zelf compileren. Visual Studio Code is wat Microsoft van deze open source maakt. Er zit bijvoorbeeld wat telemetrie in over gebruik en crashes. (Overigens zijn ze hier heel open over.)
Een compilatie zonder de door Microsoft toegevoegde telemetrie en dergelijke is te vinden op vscodium.com. Hier zitten wel wat nadelen aan, zoals dat extensies van marketplace.visualstudio.com niet gebruikt kunnen of mogen worden. VSCodium heeft echter een eigen site voor extensies: open-vsx.org.
Een uitgebreider verhaal over de verschillen tussen beide versies is te vinden op ruky.me. En in aanvulling op bovenstaande: die telemetrie gaat toch wel heel erg ver, blijkt uit roboleary.net/tools/2022/04/20/vscode-telemetry.

cudatext.github.io
CudaText: open source editor voor onder andere HTML en CSS.

eclipse.org
Eclipse: open source framework voor het ontwikkelen in zo'n beetje elk denkbare taal.

en.wikipedia.org/wiki/Comparison_of_text_editors
Uitgebreide vergelijking van groot aantal editors.

geany.org
Geany: IDE voor onder andere CSS, HTML, JavaScript, Perl, PHP en Python.

jedit.org
jEdit: open source editor met ondersteuning voor meer dan 200 talen.

kate-editor.org/nl
Kate: tekstverwerker, onder andere Nederlandstalig. Met behulp van plug-ins kunnen allerlei talen worden bewerkt.

kdevelop.org
KDevelop: IDE voor onder andere JavaScript, PHP en Python. Site is Engelstalig, programma is ook Nederlandstalig.

lap.dev/lapce
Lapce: open source editor voor allerlei talen, waaronder HTML, CSS en JavaScript.

microsoft.github.io/language-server-protocol/implementors/tools
Lijst met programma's die LSP ondersteunen.

neovim.io
Op Vim gebaseerde open source editor met veel uitbreidings­mogelijkheden.

notepad-plus-plus.org
Notepad++: simpele, maar goede open source editor voor Windows.. Ondersteunt veel talen. (Als 'snap' ook te installeren op Linux.)

penpot.app
Penpot: open source alternatief voor Figma.

pragtical.dev
Pragtical: editor met support voor tal van talen, waaronder CSS, HTML en JavaScript.

phcode.io/#/home
Phoenix Code: (opvolger van Brackets). Ondersteunt HTML, CSS en JavaScript. Er is ook een online-versie beschikbaar op phcode.div.

scintilla.org
Scintilla: editor voor Windows en Linux, geschikt voor 'n hele serie talen.

slant.co/topics/1686/~best-javascript-ides-or-editors
Vergelijkend overzicht van groot aantal IDE's, die geschikt zijn voor (onder andere) JavaScript.

theia-ide.org
Theia: IDE voor tal van talen. Open source alternatief van Eclipse voor Visual Studio Code.

VSCodium. Open sourceversie van Visual Studio Code zonder de telemetrie en dergelijke van Microsoft. Links en dergelijke staan iets hierboven bij code.visualstudio.com.

Emulators en SDK's voor mobiele apparatuur

(Onderafdeling van Gereedschap)

Zie bij Mobiele appratuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen.

Favicon maken, testen, en dergelijke

(Onderafdeling van Gereedschap)

en.wikipedia.org/wiki/Favicon
Overzichtsartikel met links naar meer artikelen, browser support, enzovoort.

evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
Tutorial hoe met drie bestanden toch overal een favicon te tonen.

favicon.cc
Zelf ontwerpen of bestaande afbeelding uploaden en bewerken. Alleen ico-formaat.

favicon.io
Favicon maken gebaseerd op eigen ontwerp, tekst, afbeelding of emoticon.

icon.kitchen
Icon uitkiezen en aanpassen en daar vervolgens een volledige set favicons van maken.

xiconeditor.com
Zelf ontwerpen of bestaande afbeelding uploaden en bewerken. Alleen ico-formaat.

Fonts

(Onderafdeling van Gereedschap)

FTP-programma's

(Onderafdeling van Gereedschap)

filezilla-project.org
Uitstekende open source ftp-client. Site is Engelstalig, programma is ook Nederlandstalig.

Grafiek en diagram maken

(Onderafdeling van Gereedschap)

Voor bibliotheken en dergelijke die SVG en dergelijke gebruiken zie SVG.

app.diagrams.net
Diagram maken. Keuze uit veel voorbeelden, die bewerkt kunnen worden. Kan worden opgeslagen als onder andere SVG en PNG.

chartle.com
Diagram maken en opslaan als JPG, PNG, WebP of PDF.

nces.ed.gov/nceskids/createagraph
Diagram maken en opslaan als onder andere PNG, JPG, PDF of SVG.

piechartmaker.co
Taartdiagram maken. Veel instelmogelijkheden. Downloaden als PNG, JPG of SVG.

rawgraphs.io
Diagram maken van tekst of spreadsheet en exporteren als SVG, JPG of PNG. Keuze uit heel veel soorten.

HTML

(Onderafdeling van Gereedschap)

HTTP Request en Response Header, cache

(Onderafdeling van Gereedschap)

csswizardry.com/2019/03/cache-control-for-civilians
Gedetailleerde tutorial over cache-control.

redbot.org
Inhoud van Response Header bekijken. Geeft suggesties om eventuele problemen op te lossen.

request.urih.com
Inhoud HTTP Request bekijken.

simonhearne.com/2022/caching-header-best-practices
Uitgebreide tutorial over het gebruik van headers voor cache-controle.

whichbrowser.net
Browser-identificatie-string bekijken.

Imagemap maken

(Onderafdeling van Gereedschap)

image-map.net
Met behulp van klikken en slepen imagemap maken.

maschek.hu/imagemap
Met behulp van klikken en slepen imagemap maken.

Kleuren

(Onderafdeling van Gereedschap)

codebeautify.org/all-tools#color-tools
Kleuren converteren naar en van een groot aantal formaten.

codepen.io/robdimarzo/full
Hexadecimale kleur uitkiezen door middel van uiterst simpel te bedienen kleurencirkel.

color.hailpixel.com
Op uiterst intuïtieve wijze bij elkaar passende kleuren zoeken. Zoeken in hex, levert notatie ook in hsl() en rgb().

colorbox.io
Tussenkleuren tussen twee kleuren opzoeken en daarvan de hex-code krijgen. Aantal tussenkleuren, begin- en eindkleur, en nog veel meer, is in te stellen.

colorcolor.in
Twee (of meer) kleuren opgeven en tot 19 tussenkleuren krijgen. Met een indrukwekkend aantal instelmogelijkheden voor de tussenkleuren. Notatie in hex.

colordesigner.io/convert
Kleuren omzetten naar en van rgb(), hex, hsl(), cmyk(), hsv() en lab().

components.ai/color-scale
Heel gedetailleerd in te stellen kleurenpalet met bijbehorende code maken.

cssgenerator.org/rgba-and-hex-color-generator
Op uiterst makkelijke manier rgba()- of hex-kleur aanmaken.

degraeve.com/color-palette
Op zelf te kiezen afbeelding gebaseerd kleurenpalet maken. Notatie in hex.

fffuel.co/cccolor
Kleur kiezen met behulp van schuifknoppen. Notatie in hsla(), rgba(), rgb(), oklch() en hex.

hslpicker.com
hsl(), hwb() en rgb() kleuren uitproberen en gelijk vertalen naar de andere formaten.

htmlcolorcodes.com/color-picker
Tot zes (niet) bij elkaar passende kleuren zoeken. Levert notatie in hex, hsl() en rgb().

it-tools.tech/color-converter
Kleur uitzoeken en weergeven in hex, rgb(), hsl(), hwb(), lch(), cmyk() en (dichtstbijzijnde) css-naam.

johndecember.com/html/spec/colorshades
Uitgaande van een basiskleur worden drie bijbehorende lichtere kleuren getoond. Notatie in hex.

maketintsandshades.com
Twee (of meer) kleuren opgeven en codes voor de negen tussenliggende kleuren genereren. Notatie in hex.

meyerweb.com/eric/tools/color-blend
Twee kleuren opgeven en tot tien tussenliggende kleuren krijgen. Notatie in rex of rgb().

oklch.com
Kleurenkiezer oklch() en lch(). Werkt heel intuïtief met schuifknoppen. Laat ondersteuning door monitor zien en geeft eventueel fallback-kleur.

pinetools.com/monochromatic-colors-generator
Kleur kiezen in hex of door slepen. Levert code voor (vrijwel) onbeperkt aantal donkerder en lichtere tinten. Uitvoer in hex.

planetcalc.com
Complementaire hexadecimale kleur vinden.

projects.verou.me/css-colors
Namen van css3-kleurnamen omzetten naar hsl(), rgb() en hex.

projects.susielu.com./viz-palette
Kleurenreeks maken, speciaal gericht op grafieken. Notatie in hex, hsl() en rgb().

slayeroffice.com/tools/color_palette
Kleurenreeks maken van twee keer vijf bij elkaar horende kleuren (notatie in hex).

toolness.github.io/accessible-color-matrix
Van een kleurenpalet met zes aan te passen kleuren van elke combinatie gelijk het (on)voldoende contrast geven.

webfx.com/web-design/color-picker
Uiterst simpele kleurenkiezer voor één kleur. Levert notatie in hex, rgb() en hsl().

workwithcolor.com
Allerlei gereedschappen voor kleuren, waaronder een hsl() kleurzoeker met vertaling naar hsla(), rgba() en hex, zoeken op kleurnaam en een kleurenschema maken.

Knoppenmakers

(Onderafdeling van Gereedschap)

bestcssbuttongenerator.com
Knop ontwerpen en bijbehorende CSS genereren. Veel aanpassingen mogelijk.

cooltext.com
Knoppenmaker. Tekst in de knop kan op veel manieren worden weergegeven. Het eindresultaat is een afbeelding in GIF, JPG of PNG-formaat.

css-tricks.com/examples/ButtonMaker
CSS-knoppenmaker. De CSS moet wel worden ontdaan van verouderde regels.

sciweavers.org/1i2style
CSS-knoppenmaker. Het basispatroon kan op heel veel manieren worden aangepast. De CSS moet wel worden ontdaan van verouderde regels.

Label maken

(Onderafdeling van Gereedschap)

acme.com/labelmaker
Label, zoals dat uit een lettertang komt, maken, maar is op veel manieren aan te passen. Levert een afbeelding in GIF-formaat.

Links controleren

(Onderafdeling van Gereedschap)

brokenlinkcheck.com
Tot 3000 pagina's gratis controleren. De gratis versie controleert niet op links naar documenten (PDF, DOC, en dergelijke), afbeeldingen en adressen waarin een '/' zit. Je kunt met de gratis versie dus alleen de hele site controleren.

github.com/linkchecker/linkchecker
Open source link-checker met veel extra's. Hier zijn de instructies voor installatie te vinden. (In Linux zal deze meestal ook in de repositories zitten.)
Als je ook ankers wilt valideren, moet je hiervoor een plugin inschakelen. Zie hiervoor de handleiding.

home.snafu.de
Xenu's Link Sleuth: gratis programma om links te controleren. Werkt helaas alleen op Windows. (Jaren geleden zou het volgens geruchten op Linux goed draaien onder Wine. Of dat nog zo is, is onduidelijk. Linux-gebruikers weten wat met Wine wordt bedoeld. En voor de rest: nee, dat betekent niet dat al je links mooie dingen tevoorschijn toveren als je maar genoeg gezopen hebt.)

validator.w3.org/checklink (W3C)
Links controleren van 1 tot maximaal 150 pagina's. Geeft heel gedetailleerde info over fouten en suggesties hoe die te herstellen. Deze validator controleert ook ankers en dergelijke.

Logo maken

(Onderafdeling van Gereedschap)

cooltext.com
Logo maken. Maakt een PNG-afbeelding.

Lorem Ipsum (opvultekst) maken

(Onderafdeling van Gereedschap)

blindtextgenerator.com/lorem-ipsum
Lorem Ipsum-tekst genereren. Keuze uit meerdere teksten.

catipsum.com
Lorem Ipsum-tekst voor kattenliefhebbers genereren.

cupcakeipsum.com
Lorem Ipsum-tekst voor zoetekauwen genereren.

generator-lorem-ipsum.info
Lorem Ipsum-tekst genereren. Keuze uit meerdere talen. Deze generator kan meerdere paragrafen maken, inclusief de benodigde <HTML>, maar je krijgt dan wel de HTML voor een complete pagina, inclusief <head> en dergelijke. De lengte van de paragrafen is niet in te stellen.

hipsum.co
Artistieke Lorum Ipsum-tekst genereren.

it-tools.tech/lorem-ipsum-generator
Lorum Ipsum-tekst genereren. Aantal woorden, zinnen en paragrafen is in te stellen. Levert ook benodigde HTML-tags.

meettheipsums.com
Hele serie links naar allerlei soorten generators voor opvultekst.

nl.lipsum.com
Lorem Ipsum-tekst genereren. Nederlandstalige site. Keuze uit meerdere talen, waaronder Nederlands.

tinywow.com/other/lorem-ipsum-generator
Lorem Ipsum-tekst genereren. Als je voor paragrafen (<p>'s) kiest. wordt ook de benodige HTML gegenereerd. Aantal paragrafen is in te stellen, de lengte van de paragrafen niet.

webfx.com/web-design/html-ipsum
Lorem Ipsum-tekst maken. Tekst kan desgewenst gelijk binnen een element zoals <ol>, <dl>, <p>,enzovoort geplaatst worden, maar gelijktijdig meer dan één element maken is niet mogelijk.

Monitor site

(Onderafdeling van Gereedschap)

downforeveryoneorjustme.com/
Is 'n site alleen voor mij down of voor iedereen?

uptimerobot.com
Meldt per mail, twitter, en dergelijke of site offline is. Tot vijftig sites.

visualping.io
Meldt als een pagina op 'n site is veranderd. Gratis tot vijf controles per dag.

webbuddy.nl
Meldt per mail als site offline is. Nederlandstalig. Met uitgebreide statistieken en dergelijke. Uiterst betrouwbaar, wordt op deze site al jaren gebruikt.

PDF bewerken

(Onderafdeling van Gereedschap)

ilovepdf.com
Van en naar PDF converteren en enkele simpele bewerkingen.

tinywow.com/tools/pdf
Hele serie gereedschappen om PDF te bewerken, te converteren, samen te voegen, afbeeldingen te extraheren, en dergelijke.

Reguliere expressies

(Onderafdeling van Gereedschap)

Server installeren

(Onderafdeling van Gereedschap)

Sitemap maken en dergelijke

(Onderafdeling van Gereedschap)

Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke

(Onderafdeling van Gereedschap)

Sprite maken

(Onderafdeling van Gereedschap)

css.spritegen.com
Afbeeldingen uploaden en sprite plus bijbehorende code aanmaken.

cssportal.com/css-sprite-generator
Afbeeldingen uploaden en sprite plus bijbehorende code aanmaken.

responsive-css.spritegen.com
Afbeeldingen uploaden en responsieve sprite plus bijbehorende code aanmaken.

toptal.com/developers/css/sprite-generator
Afbeeldingen uploaden en combineren tot een sprite. De manier waarop de afbeeldingen binnen de sprite worden verwerkt, zoals padding, kan enigszins worden opgegeven.

Tabel maken

(Onderafdeling van Gereedschap)

divtable.com/table-styler
HTML-tabel maken met bijbehorende CSS. Met heel veel opmaakmogelijkheden.

tableizer.journalistopia.com
HTML-tabel maken van Excel-, Calc- of andere spreadsheet.

tablesgenerator.com/
HTML-tabel maken met bijbehorende CSS. Met veel opmaakmogelijkheden. Ook kan een bestaande tabel of CSV-bestand als basis worden gebruikt.

Tekstbrowser simuleren

(Onderafdeling van Gereedschap)

invisible-island.net/lynx
Website van Lynx met onder andere downloads voor 32-bits Windows. Nieuwere versies van Lynx zijn te vinden op invisible-mirror.net. (In Linux zal Lynx meestal in de repositories aanwezig zijn.)

links.twibright.com
Links. De site is een puinhoop. Downloads voor Windows (ook 64 bit) zijn te vinden op download. In Linux zal Links meestal in de repositories aanwezig zijn.

w3.org/services/html2txt
HTML omzetten in platte tekst zonder enige opmaak, behalve 'n indeling in alinea's. Prima manier om te zien of de inhoud logisch is opgebouwd.

Teksten vergelijken

(Onderafdeling van Gereedschap)

difftext.com
Twee teksten met elkaar vergelijken. Heel simpeL en heel duidelijk.

Thumbnails maken

(Onderafdeling van Gereedschap)

makethumbnails.com
Thumbnails maken van (groot) aantal geüploade afbeeldingen. Maat en kwaliteit kunnen worden ingesteld.

Tijdelijk online zetten

(Onderafdeling van Gereedschap)

codeshare.io
Tijdelijk code online zetten en gezamenlijk met anderen bewerken.

webdevout.net/test
Tijdelijk 'n pagina online zetten, zodat anderen hem kunnen bekijken en bewerken.

URL-encoding

(Onderafdeling van Gereedschap)

Validators

(Onderafdeling van Gereedschap)

Vector-editor

(Onderafdeling van Gereedschap)

Video

(Onderafdeling van Gereedschap)

Weergave en dergelijke testen

(Onderafdeling van Gereedschap)

asisness.com/asisness/tools/screensize
Uiterlijk van de pagina bekijken in een aantal vooringestelde resoluties.

mattkersley.com/responsive
Uiterlijk van een pagina gelijktijdig in meerdere resoluties testen, die naast en onder elkaar op het scherm worden gezet.

virtualbox.org
Binnen een bestaand besturingssysteem een ander besturingssysteem installeren. Omdat je echt een heel besturingssysteem met browsers en al installeert, geeft dit een (vrijwel) perfecte testmogelijkeheid. Hiermee kun je Windows 7 installeren binnen Windows 8 of Linux, OS X installeren binnen Linux, Linux installeren binnen Windows 10, enzovoort. Pagina's met handleidingen worden hier niet vermeld, want die veranderen te snel. Maar als je even op internet zoekt, vind je zat goede en actuele handleidingen. Om echt lekker te kunnen werken, heeft je computer wel voldoende geheugen nodig.

WhoIs, traceroute, en dergelijke

(Onderafdeling van Gereedschap)

ping.eu
Ping, traceroute, whois, DNS lookup, en dergelijke.

sidn.nl
Informatie over in Nederland geregistreerde sites. Nederlandstalig.

sitereport.netcraft.com
Allerlei info over 'n site en de hoster daarvan.

viewdns.info/reverseip
Welke andere domeinen staan er op dezelfde server?

whatismyip.com/ip-address-lookup
Naam van 'n site bij het IP-adress opzoeken.

whois.domaintools.com
Eigenaar, hoster, enzovoort van site opzoeken.

<audio>, <embed>, <iframe>, <object> en <video>

(Onderafdeling van HTML)

<b>, <blockquote>, <cite>, <del>, <em>, <i>, <ins>, <mark> en <strong>

(Onderafdeling van HTML)

adrianroselli.com/2023/07/blockquotes-in-screen-readers
Test hoe schermlezers verschillende vormen van <blockquote> en <cite> voorlezen.

css-tricks.com/the-double-emphasis-thing
Artikel over de verschillen tussen <i>, <b>, <em> en <strong> en wanneer wat te gebruiken.

Browser support

(Onderafdeling van HTML)

Bugs en hacks

(Onderafdeling van HTML)

<canvas>

(Onderafdeling van HTML)

blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve
Canvas Bézier-kromme uitproberen. De lijn verandert door de controlepunten te verslepen, waarbij de code gelijk mee verandert.

blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve
Canvas kwadratische Bézier-kromme uitproberen. De lijn verandert door de controlepunten te verslepen, waarbij de code gelijk mee verandert.

developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
Zeer uitgebreide <canvas>-tutorial.

goalkicker.com/HTML5CanvasBook
Gratis PDF-boek over <canvas>, samengesteld door Stack Overflow. Dit is geen echte stap-voor-stap-cursus, maar het staat wel boordevol nuttige informatie en is daardoor eigenlijk toch 'n soort cursus.

jenkov.com/tutorials/html5-canvas
Tutorial over <canvas>.

pauljadam.com/demos/canvas
Tutorial over toegankelijkheid en <canvas>.

udacity.com/course/html5-canvas
Cursus canvas. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

Charsets, unicode, entiteiten

(Onderafdeling van HTML)

Code bekijken

(Onderafdeling van HTML)

Cursusen

(Onderafdeling van HTML)

Omdat HTML en CSS in toenemende mate in samenhang worden behandeld, staan alle algemene cursussen HTML en/of CSS bij elkaar bij CSS → Cursussen CSS en/of HTML.

Cursussen en dergelijke specifiek voor het optimaliseren van een website zijn te vinden bij Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke → Snelheid (theorie en verbeteren).

Cursussen en dergelijke specifiek voor Responsive Web Design, responsieve afbeeldingen, en dergelijke staan bij CSS → Media Query's, Container Query's en Responsive Web Design.

Cursussen en dergelijke specifiek voor toegankelijkheid zijn te vinden bij Toegankelijkheid → Cursussen, algemene tutorials, en dergelijke.

Specificaties voor HTML en overzichten met (alle) HTML-elementen, -attributen, en dergelijke zijn te vinden bij HTML → Overzicht elementen, attributen, tips, specificatie, en dergelijke. (Soms is de uitleg bij een element en dergelijke uit zo'n overzicht zo uitgebreid dat het ook een soort cursus is.)

data-attribuut (data-*)

(Onderafdeling van HTML)

css-tricks.com/a-complete-guide-to-data-attributes
Tutorial met voorbeelden.

developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_data_attributes
Korte uitleg over het data-attribuut.

sitepoint.com/how-why-use-html5-custom-data-attributes
Tutorial met voorbeelden over het gebruik van het data-attribuut.

<details> en <summary>

(Onderafdeling van HTML)

css-tricks.com/exploring-what-the-details-and-summary-elements-can-do
Allerlei niet direct voor de hand liggende voorbeelden van wat mogelijk is met <details> en <summary>.

scottohara.me//blog/2022/09/12/details-summary
Uitgebreide beschrijving van <details> en <summary>.

<dialog>, inert- en popover-attribuut

(Onderafdeling van HTML)

amitmerchant.com/popover-api
Tutorial over popover-attribuut.

css-tricks.com/focus-management-and-inert
Tutorial over het inert-attribuut.

frontendmasters.com/blog/menus-toasts-and-more
Tutorial over het popover-attribuut.

frontendmasters.com/blog/whats-the-difference-between-htmls-dialog-element-and-popovers
Gedetailleerd overzicht van de verschillen tussen <dialog> en het popover-attribuut.

gomakethings.com/an-intro-to-the-dialog-element
Tutorial over <dialog>.

hidde.blog/dialog-modal-popover-differences
Artikel over het verschil tusen <dialog> en het popover-attribuut.

hidde.blog/popover-accessibility
Artikel over het popover-attribuut en toegankelijkheid.

hidde.blog/popover-semantics
Artikel over waar het popover-attribuut geschikt voor is.

matuzo.at/blog/2023/focus-dialog
Artikel over verschillen tussen browsers bij <dialog> en focus, en hoe die op te lossen.

scottohara.me/blog/2019/03/05/open-dialog
Tutorial over <dialog>, met veel aandacht voor toegankelijkheid.

stefanjudis.com/blog/a-look-at-the-dialog-elements-super-powers
Uitgebreide tutorial over <dialog>.

voorhoede.nl/nl/blog/the-popover-api-your-new-best-friend-for-tooltips
Tutorial hoe met het popover-attribuut tooltips te maken.

web.dev/articles/building/a-dialog-component
Uitgebreide tutorial over <dialog>.

webkit.org/blog/12209/introducing-the-dialog-element
Tutorial over het <dialog>-element, aangestuurd door JavaScript.

webkit.org/blog/12578/non-interactive-elements-with-the-inert-attribute
Tutorial over het inert-attribuut.

Dingen mogelijk maken die (nog) niet werken

(Onderafdeling van HTML)

Doctype (DTD)

(Onderafdeling van HTML)

css-voorbeelden.nl/artikelen/html/head/artikelen-102
Wat is het beste doctype? En waarom is dat zo? En hoe is dat zo gekomen? En waarom...? Daarom! Nederlandstalig.

w3.org/QA/04/valid-dtd-list
Lijst met geldige doctypes (DTD's).

w3schools.com/xml/xml_dtd_intro
DTD Tutorial en overzicht. (Dit is een heel theoretisch verhaal en alleen interessant voor echt geïnteresseerden.)

xhtml5.nl/naslag/html/doctype
Nederlandstalig overzicht van doctypes, met korte uitleg.

Favicon

(Onderafdeling van HTML)

<figure> en <figcaption>

(Onderafdeling van HTML)

scottohara.me/blog/2019/01/21/how-do-you-figure
Artikel over het gebruik van <figure>, <figcaption> en eventueel alt.

Formulieren, <input>, en dergelijke

(Onderafdeling van HTML)

adrianroselli.com/2022/07/use-legend-and-fieldset
Artikel over het nut van <fieldset> en ≤legend> voor toegankelijkheid, en hoe bepaalde problemen daarbij op te lossen.

austingil.com/how-to-build-html-forms-right-semantics
Zeer uitgebreide tutorial over het maken van (toegankelijke) formulieren.

business.scope.org.uk/how-to-design-accessible-web-forms
Tutorial over het maken van toegankelijke formulieren.

buttoncheatsheet.com
Voorbeelden met uitleg van (on)toegankeljke knoppen.

cloudfour.com/thinks/progressively-enhanced-form-validation-part-1-html-and-css
Tutorial over het valideren van (toegankelijke) formulieren.
Deel 2    Deel 3    Deel 4

css-tricks.com/form-validation
Zeer uitgebreide tutorial over in de browser valideren van formulieren. (Vier delen, onderaan staan de links naar de andere delen.)

css-tricks.com/html-inputs-and-labels-a-love-story
Artikel over het belang van (een juist gebruik van ) <label> voor toegankelijkheid.

deque.com/blog/accessible-forms-the-problem-with-placeholders
Artikel over problemen met toegankelijkheid en het placeholder-attribuut en mogelijke oplossingen daarvoor.

htmhell.dev/adventcalendar/2024/15
Waarom een echte <button> beter is dan een tot <button> omgebouwde <div>.

inputtypes.com
Kijken welke invoer bij welk soort velden en dergelijke geldig is.

hackernoon.com/a-quick-guide-on-how-to-create-accessible-buttons-in-html
Tutorial hoe toegankelijke <button>'s te maken.

matuzo.at/blog/2022/button-baader
Allerlei manieren om een <button> toegankelijk te maken.

nativeformelements.com
Laat zien hoe alle form-elementen er in de browser, waarmee je deze pagina bezoekt, uitzien.

nngroup.com/articles/checkboxes-design-guidelines
Tutorial over een juist gebruik van keuzevakjes.

ovl.design/text/inclusive-inputs
Handleiding hoe <input>'s toegankelijk te maken.

scale.at/blog/forms-ux-problems-solutions
Aantal veel gemaakte fouten in formulieren en hoe het beter kan.

smashingmagazine.com/2022/09/inline-validation-web-forms-ux
Artikel over de voor- en nadelen van diverse manieren van valideren van velden.

smashingmagazine.com/2023/02/guide-accessible-form-validation
Tutorial over valideren van toegankelijke formulieren.

stackoverflow.blog/2022/12/26/why-the-number-input-is-the-worst-input
Artikel over de problemen met <input type="number"> en hoe die te voorkomen.

tetralogical.com/blog/2025/01/31/foundations-fieldset-and-legend
Tutorial over een juist gebruik van <fieldset> en <legend>.

tpgi.com/labeling-the-point-scenarios-of-label-misuse-in-wcag
Voorbeelden van (vaak gemaakte) fouten bij <label> die toegankelijkheid verminderen.

udacity.com/course/building-high-conversion-web-forms
Cursus efficiënte formulieren maken. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

web.dev/learn/forms
Interactieve cursus formulieren maken. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

webcode.tools/html-generator
Code voor allerlei onderdelen van formulieren en dergelijke maken, waarbij gelijk het resultaat wordt getoond.

xd.adobe.com/ideas/principles/web-design/best-practices-form-design
Uitgebreid artikel met tips om goede formulieren te maken.

Forums

(Onderafdeling van HTML)

<head>, metadata, Priority hints, Resource hints, en dergelijke

(Onderafdeling van HTML)

3perf.com/blog/link-rels
Uitgebreide uitleg over preload, prefetch, preconnect, dns-prefetch, prerender en modulepreload.

blog.logrocket.com/understanding-css-preload-other-resource-hints
Tutorial over preload, prefetch, dns-prefetch en preconnect.

debugbear.com/resource-hint-validator
Validator voor resource hints.

htmhell.dev/adventcalendar/2022/21
Overzicht met voorbeelden van waarden die bij rel="..." kunnen worden gebruikt.

htmlhead.dev
Uitgebreid overzicht van alles wat in <head> kan worden geplaatst. (En dat is veel...) Met veel links naar meer uitleg en dergelijke.

iana.org/assignments/link-relations
Overzicht van alle geregistreerde relaties bij <link ...>. Met link naar bijbehorende specificatie en dergelijke.

imkev.dev/fetchpriority-opportunity
Tutorial over priority hints.

microformats.org/wiki/existing-rel-values
Lijst met toegestane waarden bij rel="..."

smashingmagazine.com/2019/04/optimization-performance-resource-hints
Uitgebreide uitleg over het gebruik van dns-prefetch, preconnect, prefetch, prerender.

<hr>

(Onderafdeling van HTML)

Imagemap

(Onderafdeling van HTML)

<img>

(Onderafdeling van HTML)

lang-attribuut en internationalisatie

(Onderafdeling van HTML)

Lay-outs

(Onderafdeling van HTML)

Lijsten (<dl>, <li>, <ol> en <ul>)

(Onderafdeling van HTML)

benmyers.dev/blog/on-the-dl
Artikel over de voordelen van <dl> wat betreft toegankelijkheid. Met voorbeelden.

tutorialspoint.com/html/html_lists
Uitgebreide tutorial over <ul>, <ol>, <dl> en de bijbehorende elementen en attributen.

Links, URL-encoding, en dergelijke

(Onderafdeling van HTML)

dev.to/frontenddeveli/a-down-to-earth-explication-of-the-noopener-noreferrer-attributes
Heldere uitleg over de attributen noopener en noreferrer in een link.

digitala11y.com/external-links-in-or-out
Artikel over de ontoegankelijkheid van links die in een nieuwe tab openen, en hoe dat te voorkomen.

meyerweb.com/eric/tools/dencoder
url encoderen (speciale tekens vervangen door codes) en decoderen.

opinionatedgeek.com/codecs/urlencode
url encoderen (speciale tekens vervangen door codes).

prototypr.io/post/designing-better-hyperlinks
Uitgebreid artikel hoe goede, toegankelijke links te maken.

w3schools.com/tags/ref_urlencode
Lijst met URL-encoding codes (dat zijn die % in url's).

<meter> en <progress>

(Onderafdeling van HTML)

htmhell.dev/adventcalendar/2022/5
Tutorial over <meter>.

quackit.com/html/tags/html_progress_tag
Tutorial over <progress>.

Microdata

(Onderafdeling van HTML)

html.spec.whatwg.org/multipage/microdata
Rechtstreekse link naar het hoofdstuk microdata in de HTML-specificatie.

linter.structured-data.org
Validator voor microdata.

schema.org
Overzicht van gedefinieerde microdata.

search.google.com/test/rich-results
Validator voor bepaalde extra gegevens voor Google's zoekmachine, zoals data en te kopen producten.

validator.schema.org
Validator voor schema.org.

MIME-types

(Onderafdeling van HTML)

freeformatter.com/mime-types-list
Lijst van MIME-types zoals die onder andere kunnen worden gebruikt bij formulieren.

it-tools.tech/mime-types
Lijst van MIME-types zoals die onder andere kunnen worden gebruikt bij formulieren.

Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken

(Onderafdeling van HTML)

Nieuwsbrieven en dergelijke

(Onderafdeling van HTML)

Online wijzigingen uitproberen

(Onderafdeling van HTML)

w3schools.com/html/html_examples
HTML-voorbeelden online uitproberen.

Kopregels (<h...>) en sectievormende elementen (zoals <section> en <nav>)

(Onderafdeling van HTML)

a11yproject.com/posts/how-to-accessible-heading-structure
Artikel over het belang van een juist gebruik van <h>'s voor toegankelijkheid.

blog.pope.tech/2022/08/04/5-heading-accessibility-issues-and-how-to-fix-them
Artikel over fouten bij het gebruik van <h>'s en hoe die fouten te herstellen.

gsnedders.html5.org/outliner
Outline controleren (juiste volgorde van <h...> en dergelijke).

scottohara.me/blog/2021/07/16/section
Artikel over het juiste gebruik van <section>.

scottohara.me/blog/2022/01/20/divisive
Artikel over wanneer een <div> gebruikt kan worden, en wanneer een semantisch element beter is.

smashingmagazine.com/2022/07/article-section-elements-accessibility
Heel uitgebreide tutorial wanneer <article> en wanneer <section> te gebruiken. Met veel links naar meer info.

webaim.org/techniques/headings
Artikel over een juist gebruik van <h>'s en veel voorkomende fouten.

webdesign.tutsplus.com/the-importance-of-heading-levels-for-assistive-technology
Artikel over het belang voor toegankelijkheid van (een juist gebruik) van <h>'s.

Overzicht elementen, attributen, tips, specificatie, en dergelijke

(Onderafdeling van HTML)

cssportal.com/html-attributes
Overzicht van attributen. Met veel aan te passen voorbeelden.

cssportal.com/html-tags
Overzicht van elementen. Met veel aan te passen voorbeelden.

devdocs.io
Browser support voor zo'n beetje elk denkbare taal, ook in mobiele browsers. Met voorbeelden, links naar meer info, enzovoort. Zeer overzichtelijk ingedeeld.

developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes
Overzicht van alle HTML-attributen en bij welke elementen ze gebruikt mogen worden.

developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements
Overzicht van alle HTML-elementen met bij elk element link naar uitgebreide uitleg.

html.spec.whatwg.org/dev
(Min of meer) leesbare versie voor sitebouwers van de HTML-specificatie hier gelijk onder.

html.spec.whatwg.org/multipage
'Living Standard' HTML. Dit is de laatste versie van HTML, die voortdurend wordt bijgewerkt. Deze link gaat naar de inhoudsopgave.
De hele (echt gigantische) specificatie op één pagina.

htmlreference.io
Alfabetisch overzicht van elementen met bij elk element een voorbeeld.

internetacademy.nl/ebooks/webtechniek
Nederlandstalige zeer uitgebreide uitleg van de belangrijkste begrippen, opbouw van een pagina, en dergelijke. Ook te downloaden als PDF en ePub.

quackit.com/html/codes
Elementen gegroepeerd naar gebruik. Met veel live aan te passen voorbeelden.

quackit.com/html/tags
Alfabetisch overzicht van elementen. Met veel voorbeelden.

rawgit.com/w3c/elements-of-html
Overzicht van álle elementen uit xhtml en HTML, ook elementen die niet meer bestaan. Met links naar bijbehorende specificatie. Wat verouderd, maar kan nog handig zijn.

tutorialrepublic.com/references
Overzicht van elementen met mogelijkheid om ze interactief uit te proberen.

w3schools.com/tags
HTML-referentie met overzicht van tags, attributen, en dergelijke. Met uitgebreide uitleg bij elke ingang.

<picture>

(Onderafdeling van HTML)

<pre>

(Onderafdeling van HTML)

sitepoint.com/everything-need-know-html-pre-element
Uitgebreid artikel over het <pre>-element met allerlei mogelijke problemen en daarbij horende mogelijke oplossingen.

Snelheid

(Onderafdeling van HTML)

Tabellen (<table>, <td>, en dergelijke)

(Onderafdeling van HTML)

css-tricks.com/complete-guide-table-element
Uitgebreid artikel over het gebruik van tabellen. Met een beschrijving van alle onderdelen, links naar meer info, enzovoort.

smashingmagazine.com/2019/01/table-design-patterns-web
Artikel over het maken van toegankelijke responsieve tabellen.

smashingmagazine.com/2022/12/accessible-front-end-patterns-responsive-tables-part1
Tutorial hoe een toegankelijke responsieve tabel te maken deel 1.
Deel 2

w3.org/WAI/tutorials/tables
Voorbeelden van verschillende soorten toegankelijke tabellen.

webaim.org/techniques/tables/data
Tutorial over het maken van een toegankelijke tabel.

Validators

(Onderafdeling van HTML)

htmlhint-playground.netlify.app
HTML-validator die desgewenst ook kan controleren op het sluiten van <p>, plaats van het doctype, en dergelijke. Dingen die niet móéten, maar wel verstandig zijn. Zoiets als HTML controleren met de strengere maatstaven van het overleden xhtml.
Je kunt deze validator installeren of online gebruiken op htmlhint-playground.

jsonschemavalidator.net
Web manifest validator.

manifesttester.com
Web manifest validator.

validator.nu
Alternatief adres voor de hieronder genoemde validator op validator.w3.org/nu.

validator.w3.org/nu
Validator van W3C, de club die de officiële specificactie van onder andere HTML5 bijhoudt. Online bij één pagina tegelijk HTML valideren. Valideert op onder andere HTML5, ARIA, MathML en SVG.

Web Components (Custom elements, Shadow DOM, <template> en <slot>, en de bijbehorende pseudo-classes en -elementen)

(Onderafdeling van HTML)

abeautifulsite.net/posts/a-web-components-primer
Uiterst duidelijke uitleg over Web Components en Shadow DOM.

css-tricks.com/an-introduction-to-web-components
Uitgebreide tutorial in vijf delen over Web Components (bovenaan de pagina staan links naar de andere delen).

css-tricks.com/web-component-pseudo-classes-and-pseudo-elements
Tutorial over ::part, ::slotted, :defined, :host, en:host-context.

dev.to/thepassle/web-components-from-zero-to-hero
Uitgebreide tutorial over Web Components en alles daaromheen.

genericcomponents.netlify.app
Kleine sortering toegankelijke Web Components die je kunt gebruiken zonder dat half github aan frameworks nodig is.

github.com/web-padawan/awesome-web-components
Pagina met veel links naar van alles wat met Web Components te maken heeft.

lea.verou.me/blog/2020/09/the-failed-promise-of-web-components
Kritisch artikel over de huidige staat van Web Components.

matuzo.at/blog/2023/web-components-accessibility-faq
Veel voorkomende vragen (en antwoorden) over Web Components en toegankelijkheid.

thenewobjective.com/web-development/a-criticism-of-web-components
Kritisch artikel over de huidige staat van Web Components.

CSSOM

(Onderafdeling van JavaScript, DOM en CSSOM)

css-tricks.com/an-introduction-to-the-css-object-model-cssom
Uitleg over de CSSOM en hoe deze gebruikt kan worden om CSS te wijzigen.

DOM en events

(Onderafdeling van JavaScript, DOM en CSSOM)

cssportal.com/html-event-attributes
OVerzicht van events. Met veel aan te passen voorbeelden.

developer.mozilla.org/en-us/docs/Web/Events
Overzicht van events, met links naar bijbehorende specificatie en dergelijke.

digitalocean.com/community/tutorials/introduction-to-the-dom
Uitgebreide uitleg over de DOM.

egghead.io/courses/your-ultimate-guide-to-understanding-dom-events
Zeer uitgebreide curus in videovorm over events. Met ondertiteling.

freecodecamp.org/news/dom-manipulation-htmlcollection-vs-nodelist
Gedetaillerde beschrijving van het verschil tussen een HTMLCollection en een NodeList.

itnext.io/using-the-dom-like-a-pro
Overzicht van veel gebruikte methoden voor DOM-manipulatie, zoals toevoegen, wijzigen en verwijderen van elementen.

Forums

(Onderafdeling van JavaScript, DOM en CSSOM)

Scripts, bibliotheken, frameworks en API's

(Onderafdeling van JavaScript, DOM en CSSOM)

apislist.com
Overzicht van publieke API's. (Variërend van fantastische sympathieke non-profit projecten tot de meest griezelige datadieven, dus wel even kritisch bekijken voor je iets op je site zet.)

github.com/Chalarangelo/30-seconds-of-code
Groot aantal korte stukjes code voor veel voorkomende taken.

github.com/mnater/Hyphenopoly
Script dat woorden automatisch laat afbreken, net zoals dat in een tekstverwerker zou gebeuren. Werkt met veel talen, waaronder Nederlands. Nederlands is summier getest, en het lijkt goed te werken.

jquery.com
Bibliotheek met allerlei functies.
Heel vaak wordt een grote bibliotheek als jQuery gebruikt, terwijl één regeltje JavaScript die hele bibliotheek overbodig maakt. jQuery blonk uit in het oplossen van incompabitliteiten tussen browsers, maar is daar nauwelijks nog voor nodig. Als je het alleen daarvoor gebruikte, heb je het dus inmiddels mogelijk niet meer nodig.
youmightnotneedjquery: laat zien wat jQuery doet en wat de code rechtstreeks in JavaScript is.
tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript: handige gids om jQuery te vervangen door JavaScript.

jster.net
Gigantisch overzicht van bibliotheken, ingedeeld naar waar ze voor zijn bedoeld.

microjs.com
Gigantisch aantal gespecialiseerde kleine bibliotheken.

plainjs.com
Groot aantal scripts en functies die werken zonder externe bibliotheek.

selection.datavisualization.ch
Lijst met links naar bibliotheken, frameworks, en dergelijke voor gespecialiseerde doeleinden.

Tutorials, voorbeelden

(Onderafdeling van JavaScript, DOM en CSSOM)

code.tutsplus.com/learn-modern-javascript-fundamentals-in-7-hours-free-course
Basiscursus JavaScript in de vorm van video's (met ondertiteling).

dapelican.dev/js-exercises
Links naar oefeningen.

devdocs.io
Browser support voor zo'n beetje elk denkbare taal, ook in mobiele browsers. Met voorbeelden, links naar meer info, enzovoort.

developer.mozilla.org/en-US/docs/Web/JavaScript
Links naar allerlei uiterst nuttige onderwerpen, zoals wat nieuw is in welke versie van JavaScript, uitgebreide tutorials, referentie, enzovoort.

eloquentjavascript.net
Uitgebreid online lesboek over JavaScript. Met oefeningen (en oplossingen). Ook te downloaden als PDF, ePub en MOBI.

exploringjs.com/impatient-js
Online boek over JavaScript, inclusief ECMAScript 2022.
Op exploringjs.com/deep-js staat het vervolg voor gevorderden.
Van beide boeken kan ook een betaalde, iets uitgebreidere, versie worden besteld.

freecodecamp.org/news/learn-javascript-with-new-data-structures-and-algorithms-certification-projects/
Interactieve cursus JavaScript in de vorm van 21 projecten. (Op deze site staat ook een enorme hoeveelheid meer gespecialiseerde tutorials over JavaScript.)

freecodecamp.org/news/the-complete-javascript-handbook
Korte cursus JavaScript.

freecodecamp.org/news/whats-the-difference-between-javascript-and-ecmascript
Artikel over het verschil tussen JavaScript en ECMAScript, maar ook uitleg over Babel, JavaScript-engines in browsers, enzovoort.

geeksforgeeks.org/javascript
Korte interactieve handleidingen, gesorteerd op onderwerp. (Voor het interactieve deel moet je je wel registreren.)

github.com/leonardomso/33-js-concepts
Enorme lijst met links naar artikelen, tutorials, enzovoort, ingedeeld naar onderwerp.

javascript.info
Waanzinnig goede, zeer uitgebreide en duidelijke tutorial in de vorm van een boek. Overzichtelijk ingedeeld in hoofdstukken. Met opgaven (en oplossingen), een uitstekende zoekfunctie en de mogelijkheid om (na registratie) vragen te stellen.

javascriptkicks.com/stories
Site met enorme hoeveelheid aan tutorials en handleidingen. Als je 'n zoekterm invoert, vind je gegarandeerd een (of heel veel) tutorials.

kirupa.com/html5/learn_javascript
Uiterst duidelijke cursus JavaScript.

michael-karen.medium.com/learning-modern-javascript-with-tetris
Cursus JavaScript in de vorm van het maken van het spelletje Tetris. (Mogelijk mis je hierdoor wel wat dingen, maar het is wel heel erg leuk. En je kunt later altijd een wat schoolsere cursus volgen.)

o7planning.org/12171/ecmascript-javascript
Duidelijke, uitgebreide tutorials over allerlei onderdelen van JavaScript.

phuoc.ng/collection/html-dom
Kant-en-klare stukjes code voor veel voorkomende bewerkingen.

sherpa.guide/paths/javascript
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om JavaScript. Daarnaast veel links naar allerlei sites met cursussen, tutorials, en dergelijke.

tutorialrepublic.com/javascript-tutorial
Interactieve cursus JavaScript.

udacity.com/catalog
Aantal kwalitatief goede cursussen, waaronder een aantal gratis. Bovenaan de pagina kun je zoeken op onderwerp, prijs, en dergelijke. Je moet je wel registreren.

udemy.com/course/javascript-essentials
Basiscursus JavaScript in videovorm. Met automatische ondertiteling. De cursus is gratis, maar je moet je wel registreren.
Een iets dieper gaande vervolgcursus: udemy.com/course/advanced-and-object-oriented-javascript.

v8.dev/blog/cost-of-javascript-2019
Uitgebreid artikel over de vertragende werking van JavaScript en hoe dat zoveel mogelijk te voorkomen.

w3schools.com/js
Interactieve JavaScript-tutorial en overzicht van de taal.

web.dev/learn/javascript
Cursus JavaScript. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

wesbos.com/javascript
Uitgebreide cursus.

Validators, debuggers, formatteren, online uitproberen, generators, en dergelijke

(Onderafdeling van JavaScript, DOM en CSSOM)

jshint.com
JavaScript-validator. Online, maar kan ook worden gedownload.

jslint.com
JavaScript-validator. Gruwelijk streng.

mothereff.in/js-variables
Namen van variabelen valideren.

omatsuri.app/events-keycode
Code generen voor eventlistener keydown. Geeft ook de codes voor event.key, event.code, en event.which.

runjs.app/play
Online JavaScript uitproberen. Geeft ook foutmeldingen.

toptal.com/developers/keycode
Waardes vinden bij het indrukken van een toets voor event.key, event.location, event.which en event.code.

w3schools.com/js/ (JavaScript Examples)
Wijzigingen in JavaScript uitproberen.

Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen

(Onderafdeling van Mobiele apparatuur)

Theorie, links, forums, en dergelijke

(Onderafdeling van Mobiele apparatuur)

developer.mozilla.org/en-US/docs/Web/HTML/Guides/Viewport_meta_element
Uitleg hoe de viewport-tag wordt gebruikt om de lay-out aan te passen aan mobiele browsers.

mobiforge.com
Site met handleidingen, artikelen, enzovoort.

quirksmode.org/mobile/viewports
Zeer uitgebreide, zeer gedetailleerde en zeer duidelijke uitleg over de gespleten persoonlijkheid van viewport (het verschil tussen CSS-pixels en hardware- of device-pixels).

sebastien-gabriel.com/designers-guide-to-dpi
Tutorial over (de verschillen tussen) dpi, ppi, CSS-pixels, device-pixels, en dergelijke.

Validators, browser sniffing, en dergelijke

(Onderafdeling van Mobiele apparatuur)

bing.com/webmaster/tools/mobile-friendliness
Online (oppervlakkig) testen of de pagina geschikt is voor mobiel.

experte.com/mobile-friendly
Online hele site (maximaal 500 url's) testen op geschiktheid voor mobiele apparaten. Met tips voor verbeteringen.

nielsleenheer.com/articles/2024/the-problem-with-user-agent-strings
Geschiedenis van de User Agent String en waarom deze (tegenwoordig) volstrekt onbetrouwbaar is.

whatismybrowser.com/detect/what-is-my-user-agent
Geeft de User Agent String van de gebruikte browser weer. Met desgewenst gedetailleerde analyse.

Forums

(Onderafdeling van PHP)

phphulp.nl/php/forum
Forum met de nadruk op PHP. Nederlandstalig.

Overig

(Onderafdeling van PHP)

apachefriends.org
Pakket met de Apache server, PHP, Perl en MariaDB downloaden om op de eigen computer te installeren (XAMPP). Dit is nodig als je op je eigen computer PHP en/of Perl wilt testen.

phphub.net
PHP formatteren, valideren en uitproberen.

Scripts

(Onderafdeling van PHP)

pear.php.net
Enorme bibliotheek met open source code.

phpclasses.org/browse
Gigantische hoeveelheid classes.

phphulp.nl/php/scripts
Scripts. Nederlandstalig.

Tutorials, voorbeelden

(Onderafdeling van PHP)

code.tutsplus.com/php-tutorial-for-beginners-free-7-hour-course
Cursus PHP in de vorm van video's.

css-voorbeelden.nl/tekst/invoegen/tekst-052
Tekst invoegen met behulp van PHP. Nederlandstalig.

devdocs.io
Uitgebreide overzichten van elementen, attributen, enzovoort. Met browser support, ook voor mobiele browsers, voorbeelden, links naar meer info, enzovoort.

freecodecamp.org/news/the-php-handbook
Uitgebreide tutorial in boekvorm.

geeksforgeeks.org/php-tutorial
Interactieve cursus PHP. (Voor het interactieve deel moet je je wel registreren.)

modernways.be/myap/it/school/course/Programmeren 4
Vlaamstalige cursus PHP. (De cursus is voor een school, maar ook prima daarbuiten te volgen.)

php.net
Officiële site van PHP met veel documentatie.

phpboek.net
Nederlandstalig uiterst leesbaar boek over PHP. Feitelijk een cursusboek.

phphulp.nl/php/tutorials
Tutorials. Nederlandstalig.

phptherightway.com
Site met tutorials, links naar tools, enzovoort, waarbij geprobeerd wordt verouderde informatie te vermijden.

quackit.com/php/tutorial
Interactieve tutorial.

w3schools.com/php/default
Interactieve PHP-tutorial en overzicht van de taal.