In deze workshop krijg je zelf de HTML code aangeleverd, en is het aan jou de taak om de CSS erbij te typen. Je maakt hierbij gebruik van een van de Codepen Challenges die je helpen bij het uitbreiden van je codeer-skills. (Meer coderen = meer ervaring)

1. Ga naar de website ****

CodePen Challenges

en log met je CodePen account (heb je nog geen account?! hurry up and create one! 🙂)

1. klik vervolgens op:

   

2. Je krijgt dan een verse CodePen, met daarin voorgeschreven HTML van een recepten-website:

1. Aan jou de taak om met de inmiddels opgedane kennis van de hierin aanwezige html en css het middelste blok te vullen met jouw eigen CSS. Bij iedere wijziging veranderd de output onderaan vanzelf. Maak het ontwerp zo netjes mogelijk.

Het kan zijn dat er HTML elementen inzitten die je niet kent, zoek deze vervolgens op w3schools op wat dit voor elementen zijn, of vraag het de docent.

1. Als je denkt klaar te zijn laat je het checken bij de docent. Bij een akkoord is het tijd om de code te downloaden en op github te zetten. Klik hiervoor in je CodePen rechtsonder op Export:

en kies voor: Export .zip

1. Je download nu een zip-bestand van het hele project. In dit zip-bestandje vind je een mapje met de naam: dist. Dit verwijst naar de distribution versie, en dát is net de versie die je nodig hebt om op github te zetten. Zet de bestanden uit het dist mapje in een nieuw mapje bij je schoolwerk met de naam: workshop_2. En zet deze op github.