Lesbrief Les 2 Basis CSS Jullie hebben net de basis uitleg van CSS gehad. Om deze uitleg wat te laten bezinken gaan we aan de slag met de oefenopdracht voor deze week. Lees de opdracht goed door zodat je doet wat er staat. Oefenopdracht De oefenopdracht van deze week luidt: 1. Zet een kopie van je html- bestand van vorige week (oef1.html) in de map 'oefening 2' (mocht je dit bestand niet bij je hebben dan kun je uit de map van deze week het bestand oef2_temp.html gebruiken) 2. Noem deze kopie 'oef2.html' 3. Open 'oef2.html' in Sublime 4. Koppel het CSS bestand uit de map van deze week aan je oef2.html document. (Zet in het html bestand de volgende regel in de head, na </title> <link rel="stylesheet" type="text/css" href="style.css">) (Voor het koppelen van het CSS bestand aan het HTML bestand zorg je dat deze in dezelfde map staan) 5. Nu het CSS bestand gekoppeld is met oef2.html sla je deze op en bekijk je de pagina in een browser. (Als het goed is ziet je pagina er door het CSS bestand al helemaal anders uit) 6. Open 'style.css' in Sublime 7. Ga nu de volgende onderstaande dingen aanpassen in je CSS bestand waardoor je een beeld krijgt van hoe alles werkt. (LET OP! Bij iedere aanpassing die je wilt doorvoeren moet je je CSS bestand saven) 8. Pas de kleur van de letter aan (color) 9. Pas de achtergrondkleuren aan (backgroundcolor) 10. Pas het lettertype aan (font- family) 11. Pas de lettergrootte aan (font- size) 12. Geef <h3> een andere kleur 13. Probeer de extra aangemaakte elementen van vorige week ook een andere kleur te geven etc. (bv. H5, derde article, etc.) 14. Wanneer je nog meer dingen aan wilt passen kun je dit gewoon doen! Meld door middel van een comment in je CSS wat je hebt aangepast. (een comment maak je door: /* maakt de kleur van de tekst wit */. Tekst tussen deze tekens wordt niet door CSS gelezen) Sla je uiteindelijke aanpassingen allemaal op op je computer en bewaar deze goed.
Codecademy opdracht Nu jullie een beetje kennis hebben over HTML en een beetje over CSS gaan jullie aan de slag met codecademy. Omdat ik jullie in een korte tijd de basis van HTML en CSS onder de knie wil laten krijgen zodat jullie je eigen portfolio website kunnen gaan maken, is het handig wanneer jullie zelf gebruik gaan maken van codecademy. Codecademy legt in stappen HTML en CSS uit en helpt je stap voor stap naar het bouwen van een website. Ook kun je gemakkelijk terugkijken hoe iets moest waardoor het een naslagwerk voor je gaat worden. We gaan vandaag dan ook een account aan maken bij http://www.codecademy.com/. Wanneer je een account aangemaakt hebt en ingelogd bent kun je door op de volgende knop te drukken een codetaal gaan leren. Als je hierop geklikt hebt dan begint codecademy meteen met de web fundamentals lessen. Dit zijn de lessen die we gaan volgen en daarop klik je hier op explore.
Aan de linkerkant van de website kun je bij web fundamentals op start klikken. Hier beginnen de lessen van codecademy. Dit ziet er als volgt uit: Aan de linkerkant staat in een instructie omschreven wat je moet doen. Wanneer je dit gedaan hebt kun je onderaan op save & submit code klikken. Als je de opdracht goed hebt gedaan en je code dus goed is kun je verder. Zo niet dan geeft hij aan dat er een fout zit en moet je nog eens naar je code kijken. Wanneer je er echt niet uit komt kun je aan de linkerkant ook nog op de knop stuck? Get a hint! klikken voor hulp. Ook staat er links boven het aantal oefeningen die je moet uitvoeren om dat onderdeel van de cursus af te ronden. (de eerste cursus bestaat uit 13 opdrachtjes). Wanneer je een cursus afgerond hebt wordt het afgevinkt met een groene vink.
Opdracht: Maak als herhaling van de stof van vorige week cursus 1 en 2 van introduction to HTML.
Huiswerkopdracht Voor deze les zijn jullie bezig geweest met het ontwerpen van een homepagina voor je eigen website. Het doel is dat jullie dit portfolio ook echt gaan bouwen om jezelf te onderscheiden van de andere studenten en je beste werk te kunnen tonen aan eventuele stage bedrijven of voor een vaste baan. Voor deze week ontwerp je minimaal 2 andere pagina s voor je portfolio waarop je informatie wil gaan zetten. Voorbeelden van pagina s zijn een contact pagina, een pagina over jezelf, een pagina met daarop je beste werk, etc.. Voor inspiratie bekijk je op het internet andere portfolio websites en kijk je wat deze mensen erop hebben staan. Opsomming wat je deze week te doen staat - Oefenopdracht 2 - Codecademy - cursus 1 & 2 van introduction to HTML - Huiswerkopdracht - Minimaal 2 vervolg pagina s voor je portfolio ontwerpen