Voor de minor Web Design & Development is het belangrijk dat je gedegen kennis hebt van HTML, CSS en JS, en dat je al een aantal vakken en/of projecten hebt gevolgd over web development en web design. In de minor gaan we meteen volle kracht vooruit met het vak Web Apps From Scratch. Zonder deze voorkennis en code ervaring is de minor niet haalbaar. We gaan er van uit dat je dit weet van HTML, CSS en JS:
Je kent de basisstructuur van HTML en je kan een webpagina opmaken. Je bent bekend met verschillende HTML-elementen en kent de semantische betekenis, zoals <main>, <article>, <footer>, <aside>, <section>, <nav> en <H>. Je begrijpt het Document Object Model (DOM). Je kunt een link maken, je kunt een formulier maken, je kunt een image, video en audio element tonen, en je weet hoe deze elementen werken.
Je weet hoe je CSS aan een pagina moet toevoegen en je kunt met CSS DOM-elementen stylen. Je kent verschillende selectors, zoals bijvoorbeeld id, class, child, target en de attribute selector. Je kunt verschillende states van een interactief element vormgeven. Je kunt Flexbox en Grid toepassen om een layout te maken, en je kunt een responsive pagina ontwerpen en maken met media-queries en/of schaalbare units.
Je kunt je eigen code schrijven en je weet hoe je JavaScript aan een pagina moet toevoegen. Je kunt een functie schrijven en gebruiken, je kunt verschillende type variabelen gebruiken, je kunt arrays gebruiken en manipuleren en je kunt condities en loops gebruiken. Je kunt met de querySelector, het classList-object en verschillende UI-Events een microinteractie maken. Je kunt een JSON bestand laden en je weet hoe je de data kunt koppelen en aan de DOM kunt toevoegen.
Om je goed voor te bereiden:
Een aantal links, voorbeelden en oefeningen waar je op kunt studeren:
Voor de minor moet je met de querySelector, het classList object en verschillende UI-Events een microinteractie kunnen maken. In dit artikel staat goed uitgelegd hoe je dat doet: Hey designers, if you only know one thing about JavaScript, this is what I would recommend.
Zorg dat je weet hoe je de querySelector moet toepassen om één of meerdere elementen in de DOM te selecteren. Zorg dat je weet hoe je events kunt gebruiken voor het coderen van interactie. Zorg dat je het classList object begrijpt en weet hoe je een CSS class aan een element kunt toevoegen of weghalen.
Om te oefenen kun je opdracht 1 van het vak Frontend voor Designers te maken: Een Micro-interactie uitwerken en testen.
Met JavaScript kun je JSON data laden om te gebruiken in een website. Hier staat een goede tutorial om te leren hoe dat moet: Working with JSON. Het is belangrijk dat je goed begrijpt wat er in de tutorial wordt beschreven, voor de minor moet je dit zelf kunnen maken en begrijpen.
Zorg dat je weet wat JSON data is, hoe de Fetch API werkt. Met de Fetch API kun je data ophalen (en versturen). Het is ook goed om te begrijpen dat een server een response code geeft waar je in de interface iets mee kan doen, zoals het tonen van een error state of loading state.
Om te oefenen kun je opdracht 3 van het vak Frontend voor Designers te maken: Een interactie uitwerken met externe data.
Om meer ervaring op te doen in JavaScript kun je de 30 Days JS Coding Challenge van Wes Bos volgen. Elke dag bouw je iets met HTML, CSS en JavaScript en leer je over functies, arrays, variabelen en meer.
JavaScript leer je door dingen te maken. In de 30 Days JS Coding Challenge bouw je 30 verschillende toepassingen, zoals een klok, video player of navigatie patterns. In de Challenge zitten makkelijke en best moeilijke opdrachten. Happy coding !