HTML, CSS, design en DPS tutorials

Als docent bij het Grafisch Lyceum Rotterdam haal ik veel plezier uit het maken van lesmateriaal. We maken op school veel materiaal zelf en werken weinig uit boekjes. In mijn blog maak ik een combinatie tussen materiaal wat ik zelf schrijf en materiaal wat ik op internet vind.

Zelf een sidebar maken

placeholder_featured_image February 3rd, 2016

In een ontwerp (een child thema van twentyfifteen) heb ik 1 sidebar. Hierin staat een kalender. Stel dat ik in de footer van mijn site ook een sidebar wil, bijvoorbeeld met alle links. Hoe los ik dat op? Dit kan in 3 stappen: je sidebar regi… Meer

Het _s thema

placeholder_featured_image November 28th, 2015

WordPress kent frameworks of starter templates. Een framework / starter template is de kale structuur van een WordPress website maar zonder opmaak. Er is geen sprake van vormgeving en het is niet bedoeld om zo te gebruiken. Het is overigen… Meer

Collapsing margin-top

placeholder_featured_image September 21st, 2015

Je kent het wellicht wel: je hebt een container gemaakt met daarin een header. De header heeft een aantal pixels margin-top maar tot je verbazing wordt deze margin-top toegekend aan de container en niet aan de header!… Meer

User stories

placeholder_featured_image September 17th, 2015

Om goed te begrijpen hoe je je website wilt indelen en welke informatie je wilt tonen is een userstory essentieel. Een user story is een korte, eenvoudige beschrijving over een product vanuit het perspectief van een persoon die dit wil gebr… Meer

Een print css maken

placeholder_featured_image September 17th, 2015

Het kan nuttig zijn om een apart stylesheet aan te maken voor een pagina die geprint moet worden. Bijvoorbeeld omdat je een kortingsbon wilt weggeven via internet of omdat je je cv printbaar wilt aanleveren aan een toekomstig werkgever.… Meer

inline-block vs float

Child selectoren September 17th, 2015

HTML elementen naast elkaar plaatsen kan op verschillende manieren. In deze korte tut wil ik float en inline-block bespreken. Optisch gezien is er weinig verschil tussen beiden. In beide gevallen komen de elementen naast elkaar te staan… Meer

Je site online zetten

placeholder_featured_image September 13th, 2015

Na al je werk is het tijd om je site aan de wereld te tonen. Voordat je dit kunt doen zul je moeten uploaden. Dit is niet een op zichzelfstaand proces maar het aanvragen van een domeinnaam en het gebruik van juiste bestandsnamen zijn hier onderd… Meer

Naming conventions

placeholder_featured_image September 13th, 2015

Wanneer je je site online gaat zetten dan moet je je houden aan bepaalde afspraken over de naam van je homepage en de plaatsing van je homepage. Wanneer je echter wilt dat je site door zoekmachines goed gevonden gaat worden zul je hier nog secu… Meer

Sitemaps

placeholder_featured_image September 13th, 2015

Voordat je met je site kunt beginnen moet je veel zaken al besloten hebben. Denk maar aan het doel van de website, de doelgroep, wat de klant wil bereiken. Je moet weten hoeveel inhoud je straks kwijt moet op je site, deze informatie heb je nodi… Meer

Formulieren stylen

Formulieren stijlen September 6th, 2015

In combinatie met tabellen of div’s kun je je formulier mooi opmaken. Dit doe je zodat je formulier in stijl met je website blijft maar dit doe je ook om het je gebruiker makkelijker te maken. Je kunt namelijk bij het opmaken van je formu… Meer

Formulieren

placeholder_featured_image September 6th, 2015

Een van de meest bekende manieren voor bezoekers om contact met je op te nemen is met behulp van een formulier. In tegenstelling tot een gewoon e-mail adres hoeft een gebruiker geen e-mail programma op te starten maar kan men direct, vanaf jo… Meer

Viewport meta tag

placeholder_featured_image September 6th, 2015

Met de viewport meta tag kun je de breedte en schaal van je website instellen voor mobiele apparaten. Dit is essentieel, je geeft namelijk weer wat 100% is. Doe je dit niet dan zal je website op een mobiel apparaat als gewone website getoond wo… Meer

Werken in percentages

placeholder_featured_image September 6th, 2015

Er zijn tegenwoordig meer mobiele telefoon met internet verbinding dan computers. Nog even en er zullen ook meer page views zijn vanaf een mobiele telefoon dan vanaf een gewone computer. Tijd dus om te leren hoe je je site voor mobiel geschi… Meer

Over child en sibling selectoren

Child selectoren September 4th, 2015

Een descendent selector is een selector waarmee je aangeeft wat er moet gebeuren wanneer een bepaalde tag (of id / class) binnen een andere tag (of id / class) zit. Door descendent selectoren te gebruiken hou je de ruimte om elementen te stij… Meer

Tabellen

September 4th, 2015

Regelmatig moet er op een website informatie worden geordend. Denk maar aan een site met een overzicht van producten, hierin staan afbeeldingen netjes onder elkaar met tekst er naast bijvoorbeeld. Meestal zijn dit websites die hun conte… Meer

Mediaqueries

Mediaqueries September 3rd, 2015

Een mediaquery stelt je in staat om binnen je stylesheet stijlen aan te geven die gelden onder een bepaalde voorwaarde. Dit kan zijn schermbreedte, scherm orientatie (portrait of landscape). Een mediaquery is een stukje code ter uitbere… Meer

One page parallax

placeholder_featured_image June 11th, 2015

One page designs zijn veel gezien tegenwoordig. Ze zijn bijzonder handig wanneer je niet heel veel content aan te bieden hebt en je bezoeker niet al te veel wilt laten klikken. Ik vind het zelf ook goed werken voor mobiel gebruikt aangezien e… Meer

SVG insluiten op je pagina

svg afbeelding insluiten June 9th, 2015

Een svg is een scalable vector graphic. Hiermee kun je schaalbare vector afbeeldingen op je site invoegen wat bijzonder handig kan zijn voor ikoontjes bijvoorbeeld. Met behulp van Illustrator is dit echter zo gedaan.… Meer

Google map toevoegen

Featured image bij een post over Google map toevoegen aan je site June 9th, 2015

Een kaart insluiten op je website is tegenwoordig standaard. Gelukkig is dit vrij eenvoudig te doen. In deze tutorial vind je niet alleen de stappen om een map toe te voegen maar ook om deze te personaliseren.… Meer

Pictogrammen ontwerpen

Featured image bij een post over pictogrammen May 28th, 2015

Pictogrammen (of ikoontjes) kennen we allemaal. We komen ze immers in het dagelijks leven vaak tegen: denk maar aan de wasmerkjes in je kleding, de aanduidingen naar de toiletten of het pictogram wat ons duidelijk maakt dat er een pinautom… Meer