Categoriearchief: HTML

CSS, HTML, Interviews, JavaScript, Web Development

De boeken van Peter Kassenaar in de Web Development Library

1 reactie

Peter Kassenaar geeft trainingen, programmeert en schrijft boeken en artikelen. De onderwerpen waar Peter over schrijft zijn o.a. Windows, Word en Outlook. Daarnaast heeft hij één duidelijke specialisatie: frontend. Van HTML, CSS en JavaScript, tot libraries en frameworks zoals Angular, React en Vue. Hij schrijft daar boeken over en geeft er trainingen in. We spraken met hem over zijn serie boeken voor de Web Development Library. Over Vue.js, Angular en andere frameworks voor het maken van webapplicaties. (Een interview over zijn nieuwe handboeken Windows 11 en Word 2021 vind je HIER op dit blog.)

Waarom ben je met frontend aan de gang gegaan en niet met backend?
Peter Kassenaar: ‘Dat was een toevallige keuze. Ik vind beide onderdelen van het web leuk. Bij frontend ben ik er ingerold. Ik heb eind jaren negentig het eerste Nederlandstalige boek over HTML geschreven. Daarna schreef ik een JavaScript boek, alle twee over frontend. Het spreekt me aan. Je kunt niet alles doen en in alles even goed zijn, je moet keuzes maken. Het is niet zo dat ik niets van backend weet. Voor de site van Van Duuren Media doe ik ook wat aan de backend-kant. Het blijft een ingewikkelde balans. Als je nu van je opleiding informatica komt, is het moeilijk in te schatten wat je van de verschillende vakgebieden moet weten. Het is lastiger dan 10 jaar geleden.’ Lees verder De boeken van Peter Kassenaar in de Web Development Library →

CSS, HTML, JavaScript, Web Development, Webdesign

Maak een schakelaar met CSS en HTML

Een reactie plaatsen

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

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

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

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

Lees verder Maak een schakelaar met CSS en HTML →

HTML, Web Development, Webdesign

Emoji als favicon

Een reactie plaatsen

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

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

Lees verder Emoji als favicon →

CSS, HTML, Web Development, Webdesign

Toveren met CSS Grid Layout

Een reactie plaatsen

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

Toveren met CSS Grid layout

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

Lees verder Toveren met CSS Grid Layout →