bronnnen HTML & CSS (Ctrl-click voor een nieuw tabblad)

HTML

HTML cheatsheet van Codecademy
W3-validator Check op HTML-fouten (zet je port op public !)
CheckLink Check je hyperlinks
browsersize Hoe groot is jouw browserscherm?
Lorem Ipsum generator (algemeen gebruikte tekst voor tests)
W3schools cursus HTML & CSS (en nog veel meer)
QuakIt cursus HTML & CSS (en nog veel meer)
ASCII bijzondere tekens
online HTML-editor (voor demo)
Web design in 4 minutes (zou het?)
Boilerform formulier-support (HTML+CSS)
HTML color names handig overzicht van kleurnamen
«speciale karakters» zoals é, ç en ⊙
Unicode bijzondere karakters (en meer)
What the tag?! Wanneer gebruik je welk element?
Can Include Mag dit een daughter zijn van deze parent?
HTML End Tag Labels VS-extension #meeroverzicht
Cloudinary Webspeedtest

CSS bronnen

CSS cheatsheet interactief
W3-validator Check je site op CSS-fouten
CSS Almanac overzicht van CSS commando's
Mozilla.org complete uitleg CSS (en HTML)
CSS vocabulaire overzicht van (Engelstalige) naamgevingen
headers Wat zijn de standaard browserinstellingen?
CSS-referentielijst van W3schools
navigatie menu W3schools (basic)
position uitgelegd
position sticky uitgelegd
CSS clamp uitgelegd
afbeeldingen in een box De details uitgelegd
Text over Images Tekst over een afbeelding
1-line-layouts Site-indeling in compacte CSS-code
Learn CSS Grid Moderne site-indeling met grid
Grid by Example standaard grid-layouts met code
CSS-grids a complete guide to grid
CodeCamp grids uitleg grids door grote tutorialsite
Flexbox A Complete Guide to Flexbox
Flexbox een overzichtelijk online handboek
flexbox Cheat Sheet
CSS animaties bewegende elementen met CSS
CSS variabelen CSS variabelen voor nog meer controle

CSS tools, artikelen & games

css-generatoren van CSSportal (b.v. voor navigatie-menu)
CSS reset #1 reset de default browser-instellingen
CSS reset #2 reset de default browser-instellingen
CSS reset #3 reset de default browser-instellingen
Hoe centreer je een div?
Page Divider in HTML5 & CSS
voor verbeterde schaduweffecten

Box-shadow generator met liveview voor schaduweffecten
transition CSS-animaties
Charts.css CSS voor CSS-diagrammen
CSS diner oefen met het selecteren van elementen
Flexbox Froggy game met flex-boxes
Flexbox Defense flexbox-puzzel
Grid Garden een spel rond grids
calculator hoe rekent CSS?
Favicon Maak je eigen favicon
Browsersupport Welk commando kun je veilig gebruiken?

kleur & beeld

kleurenkiezer van W3schools
rgb colorcode kleurcodes in context
Colorsupply kleurenwiel en liveview
Adobe kleurenwiel voor pro's
kleurfuncties uitleg van alle kleurfuncties
Realtime colors live kleurencombinaties checken op een site
Leonardo Tool voor interface design met kleur
Coolers ontwerp jouw kleurenpalet
ColourLovers paletten en inspiratie
Flat UI paletten zoals Dutch Palette
Color Lisa paletten op basis van kunstwerken
Huemint genereer je palet met AI
Mildliners Mildliners kleurtjes
Parrot Color longlist van kleurennamen
color & contrast An interactive guide to...
c0ffee (kijk zelf maar...)
afbeeldingzoeker die werkt op basis van kleur
Icon Archive voor gratis icoontjes
Icon Finder voor gratis (zet filter aan!) icoontjes
The Noun Project zoek icoontjes en foto's
Overlay Finder Online tester voor tekst over plaatjes
Gradient generator interactief
Grainy Gradients SVG meets CSS
Photopea online editor voor afbeeldingen
Pattern Generator Ontwerp online SVG-patronen
Patternify maak (transparante) png-plaatjes
Squircle Ontwerp SVG-plaatjes
SSShape shape generator
SVG-generators overzicht-generatoren
gratis foto's overzicht van 10 sites
Color accessibility maak inclusive products

tekst & fonts

WebTypografie werkelijk alles dat jij kunt verzinnen...
alinea's in balans met meerdere lettergroottes
lettergrootte varianten in CSS (px, rem, em, %)
rem vs em over root em
Google Fonts enorme gratis catalogus
Google Fonts API hoe gebruik je Google Fonts?
Google Icon Sets Gebruik de filters
Font Style Matcher probeer of fonts bij elkaar passen
Wakamai Fondue probeer een font in de praktijk
I love typography (ook) gratis lettertypes
Google Fonts Knowledge (uitleg op thema)
Typographica artikelen en fonts
FontSpace enorme collectie gratis fonts
DaFont zoek je favoriete lettertype
Open Source Fonts gratis downloadbaar
Typografie Archief : zie praktijkvoorbeelden van fonts
lettertype formaat : True Type vs Open Type
BBC Reith : download het officiële font van de BBC
BBC Reith : uitleg bij het BBC-font met video

overig

interneting is hard tutorials for complete beginners
Web Skills Algemeen overzicht van handige web skills
Tiny Helpers Een site vol handige code-trucs
TinyWow Een site vol handige tools
CSS-tricks topsite vol met CSS-adviezen en code
Dev.to site voor developers
Shapecatcher Teken een symbool en vind de unicode
CSS-art maak kunst met CSS
CSS-art voorbeeldcodes
Formules op je website
Houdini Kijk zelf maar eens...
drummachine met HTML5
Specky online magazine
Smashing Magazine online magazine
SideBar online magazine
SEO Search Engine Optimization>
UI fundamentals cursus user interface design
alle cheatsheets van Codecademy
Update Faker (tja)

Terug naar de startpagina

Suggesties voor een voorbeeld? Stuur een berichtje via MS Teams!