Hieronder kunnen jullie allerlei bestanden vinden die jullie nodig zullen hebben tijdens de lessen. In der loop van de schoolperiode zal ik deze lijst aanvullen met oefenbestanden, maar ook voorbeeldbestanden zodat jullie een visueel voorbeeld hebben over bepaalde syntax elementen in HTML, CSS en JavaScript. Er zullen uiteraard ook hoofdstukken van de cursus komen, zodat jullie die altijd bij de hand hebben. De .txt bestanden kan je gewoon kopiëren en plakken in je favoriete tekstverwerker.
| Beschrijving | Bestand |
|---|---|
| Om webpagina's te maken heb je uiteraard software nodig. Deze software zal je helpen bij het maken van je website, maar ook bij het testen van je webpagina's. Om jullie het gemakkelijk te maken heb ik in dit bestand de benodigde software opgesomd. Jullie zijn vrij om te kiezen met welk je wil werken. | Benodigde software |
| In de klas ben je vrij om te gebruiken wat je wil van teksteditor. Echter heb ik voor de mensen die met Brackets werken een paar leuke en handige extensies die ikzelf veel gebruik. Je kan de extensies in deze PDF vinden. | Extensies |
| Oefening 1: Hoofding | Headings |
| Oefening 2: Links | Links |
Soms kan het wel eens zijn dat je een vraag hebt, maar ik niet aanwezig ben of kan zijn. Daarom heb ik onderstaande 'Antwoord'-generator ontwikkeld zodat jullie altijd een willekeurig antwoord hebben bij alle vragen! Probeer het maar eens uit 😄! Het enige wat je hoeft te doen is op onderstaande knop te drukken en je vraag te typen.
Om jullie het leven als webontwikkelaar makkelijker te maken heb ik een paar interessante links/software waarop jullie beroep kunnen doen. Dit zal jullie zeker vooruit helpen bij het maken van taken.
Zit je vast, of weet je niet hoe iets moet? Gelukkig bestaat er voor elke progammeer- of opmaaktaal wat documentatie over de werking van bepaalde syntax elementen. Ook HTML, CSS en JavaScript hebben zo'n documentatie. Mozilla, bekend van de open-source Firefox browser, heeft heel uitgebreide documentatie hierover. Je kan ze hier vinden. Wat nóg gemakkelijker is, is om te werken met een API documentatie programma zoals Dash. Zo kan je voor gigantisch veel talen in de ICT wereld de documentatie ervan opzoeken. Je kan Dash ook gebruiken om snippets op te slaan, zodat je je al geschreven code niet opnieuw moet uitvinden.
DashWeet je niet goed welke kleuren je wil gebruiken? Geen probleem! Dan werk je gewoon met kleurenschema's. Je kan aan de hand van onderstaande tool automatisch kleuren genereren die bij elkaar passen. Je kan ook bestaande kleurenschema's gebruiken van andere ontwerpers.
Adobe Color CCZie je bepaalde kleuren die je wil gebruiken, maar je weet de (s)RGB waarde er niet van? Gebruik dan de ingebouwde 'Digitale-kleurenmeter' op je Mac om zo de waardes van kleuren te meten en te gebruiken voor je website. Meer informatie over de werking ervan vind je in onderstaande link. Het is gewoon een kwestie van de waardes te kopiëren en te plakken in je favoriete texteditor.
Digitale-kleurenmeterVooraleer je aan je website begint is het misschien handig om even stil te staan over hoe je website er moet uitzien. Een gebruiksvriendelijke website is namelijk heel belangrijk! Je kan gebruik maken van een digitaal ontwerptool zoals Sketch, of je kan je website ontwerpen in een fotobewerkingsprogramma zoals Pixelmator. Zo kan je naar eigen hand een website ontwerpen, en ze dan maken in HTML en CSS.
SketchWil je zien hoe je website eruit ziet op andere toestellen zoals een bepaalde iPad of iPhone / Google Pixel? Ga dan naar onderstaande website! Zo kan je je website testen op responsive design. Je kan ook gewoon de extensie downloaden zodat je je lokale bestanden ook kan uittesten. Je kan ook rechtstreeks in je browser je website testen op responsive design dankzij de verschillende ontwikkelaartools die Safari en Chrome hebben.
Sizzy