Websites maken is een mooie combinatie van techniek (code) en design. Een site moet technisch gezien goed werken, maar het oog wil ook wat natuurlijk.
Natuulijk zijn er allerlei mooie tools waarmee je snel een functionele website de lucht in hebt, zonder een regel code te schrijven. Maar wij zijn informatica-helden en we willen graag snappen hoe het werkt. We duiken daarom in de talen HTML en CSS om zelf met code websites te gaan bouwen. Dit is natuurlijk wat meer werk en de eerste paar keer dat je het doet is het resultaat wat minder sjiek dan uit zo'n tool. Maar dan begrijp je wel fundamenteel hoe een website in elkaar zit en dat maakt je ook op de langere termijn een betere site-bouwer (en een betere infomatica-held natuurlijk).
Met de opgedane kennis van de cursus en op basis van je eerder gemaakte functioneel ontwerp ga je een eigen website bouwen.
Even de draad kwijt vanwege lesuitval en een tijdelijke docentwissel? Snappen we.
Deze flowchart helpt je weer op de rit!
Lesstof:
- HTML&CSS Gitbook (lesboek met stof HTML & CSS + opdrachten)
- Replit - Online editor waar je je site (en opdrachten) kunt maken. Maak een account aan en kies voor een "html, css, javascript" project. Je kunt er daarna overal bij via je browser
PO:
De PO bestaat uit twee onderdelen. Eerst maak je een functioneel ontwerp voor je website, en dan, je raadt het al, maak je je website. Voordat je aan de opdracht begint, neem eerst nog eens de criteria door.
- Functioneel Ontwerp Opdracht
- Planning
- Beoordelingsrubric
- De websiteopdracht vind je achteraan het Gitbook over Html en Css
Cheatsheets en andere handige links:
- HTML5 cheatsheet - Beknopt overzicht met voorbeelden van de bealngrijkste html5 tags
- CSS cheatsheet - Beknopt overzicht met het css boxmodel en de belangrijkste css codes
- Tutorial Css Grid layout - Wil je een modernere manier (dan die uit de filmpjes van Wt) om een flexibele site layout te maken? Dan is css Grid waarschijnlijk de juiste keuze. Dit is een goede tutorial
- Alternatieve cursus, overzichtelijk op onderwerp. Handig om dingen op te zoeken: html deel en css deel.
- Color scheme generator - Tool om mooie kleurenschema's te genereren (kleuren die goed bij elkaar passen) om te gebruiken voor je ontwerp.
- Unsplash - site vol met hoge kwaliteit foto's die je vrij mag gebruiken. Ideaal voor achtergronden en illustaties.
- Lorem impsum generator - Lorem Ipsum is de standaard "dummytekst" voor webdesign. Deze tekst zet je alvast neer om de indruk van een gevulde site te geven (en je design erop aan te passen. Later vervang je de tekst door echte tekst)
Lollige maar leerzame spelletjes
- CSS Diner - Leer spelend over css selectors (wel handig als je al een stuk van het CSS deel van de cursus hebt gedaan)
- Pixactly - Schat de pixelafmetingen van een rechthoek. train je gevoel voor pixelgroottes
- Hex invaders - test je kennis van hexadecimale kleurcodes in deze space invaders variant
