Training HTML&CSS
In deze module leer je de basis van HyperTextMarkupLanguage (HTML), de programmeertaal waarmee bijna alle websites zijn gemaakt, en de opmaaktaal Cascading StyleSheets (CSS). Je leert pagina’s maken en opmaken.
Les 1 – de basis
Handige tutorials, generators, referenties en meer …
Handige links
Valideren
- HTML valideren bij W3Schools
- CSS valideren bij csslint
- Alles tegelijk valideren met een handig tooltje
Referenties
- W3Schools – HTML referentie
- W3Schools – CSS referentie
- Vette trucjes met CSS leer je op css-tricks.com
- Interessante web/css weetjes vindt je o.a. op Kirupa.com
- Scripts voor vette buttons, animaties, mooie effecten vind je op codepen.io
HTML en CSS code leren online
- Linkedin Learning (inloggen met je Mediacollege account)
- CodingLab: Youtube kanaal met heel veel tutorials. Van het maken van een login formulier tot het coderen van een portfolio site.
- CSS Grid reference op css-tricks.com
- CSS Flexbox reference op css-tricks.com
- CSS flex-box leren met een spelletje: Flexbox Froggy
WordPress
- WordPress ChildTheme maken
- WordPress website verhuizen naar een eigen hosting server
- WordPress Password hash generator
Kom je niet meer in je wordpress installatie met je loginnaam en wachtwoord en krijg je ook geen wachtwoord herstel mail? Dan biedt deze Password hash generator uitkomst. Dit is wel een ingewikkeld proces.
Klik hier voor de instructie
Font tools
- Gebruik een online font converter om een font die in jouw fonts-bibliotheek staat (of ergens anders) in een website te gebruiken. Een font-converter converteert niet alleen jouw font maar maakt ook de @font-face CSS code voor je.
- Google Fonts: snel en makkelijk gebruik maken van de font bibliotheek van google.
Handig
- Photoshop vertalingen van tools NL – EN
- Horizontale scrollbar? Maar weet je niet waarom?
Zet dit script onderin je pagina vlak voor de sluit-tag</body>en herlaad je pagina.<script src="http://bethuelheldt.nl/welk-html-element-veroorzaakt-een-horizontale-scrollbar.js"></script>
Interessant
- Wat is een UX designer
- CSS hell: de don’ts met CSS
- De voors en tegens van het hamburgermenu
- What are SVG Images: interessante uitleg (Youtube) van Kirupa over SVG-images
Showcases en voorbeelden
- Show and hide div-toggle pure css
- Animated-background pure css
- Michels barometer puur css
- Bethuel’s CSS konijn
- CSS Skater (Codepen.io)
- Puur CSS bal met shadow en dropshadow (Codepen.io)
- Kunst met CSS:
- Stilleven (Ben Evans)
- Puur CSS Super Mario (Ben Evans)
- Download de CSSUI.dev voor handige dropdowns, tooltips, slides, accordions en meer
Generators en andere online hulpjes
- Kleur combinaties genereren op mycolor.space
- SVG golfen maken die je kunt gebruiken als achtergrond afbeelding op getwaves.io
- CSS buttons haal je van uiverse.io
- Deze site helpt je met het maken van hele mooie drop-shadow’s (slagschaduw), kleuren en gradients (kleurverlopten): neumorphism.io
- Genereer streep structuren die je kunt gebruiken als achtergrond afbeelding (background-image) met
stripesgenerator.com - Genereer glas achtige structuren (ook matglas) met css.glass
- Genereer lineaire en cirkel gradients voor achtergrond afbeelding (background-image) met cssgradient.io
- SVG afbeelding als code in je CSS
- Pijltje aan je
<div>maken aan met CSS doe je met cssarrowplease.com - Schaduw:Tekst schaduw maak je met text-shadow
- Schaduw achter een html element (bijvoorbeeld een divje) maak je met box-shadow
- 3D effect op afbeeldingen (Codepen.io)
Inspiratie
- Heel veel inspiratie voor web ontwerp is te vinden op awwwards.com
Zoek bijvoorbeeld op:- awwwards.com/websites/wordpress/ voor interessante websites gebouwd met WordPress