In deze workshop kan je een uitgebreide workshop vinden die je begeleidt bij jouw eerste stappen met HTML & CSS. Onder het motto ‘oefening baart kunst’ raden we dan ook aan om je nieuwe vaardigheden verder uit te bouwen door zelf te experimenteren. Codepen is daar de ideale plaats voor.
Wanneer je even snel een stukje HTML, CSS (en eventueel Javascript) wil uitproberen, kan je een document aanmaken op je computer en dat openen in je browser. Eenvoudig, maar het nadeel is dat je er niet overal toegang tot hebt en bovendien moet je ook steeds de browser verversen wanneer je het bestand bijwerkt. Via Codepen.io worden jouw stukjes code in realtime weergegeven, zodat je meteen kan zien welke code wat doet. Een onmisbaar hulpmiddel bij het bestuderen van talen zoals HTML en CSS.
Codepen.io beschikt over een betalend lidmaatschap. Via dat lidmaatschap kan je bijvoorbeeld codevoorbeelden privé maken. Standaard zijn alle codevoorbeelden die je maakt namelijk voor iedereen toegankelijk. Dat hoeft niet meteen een probleem te zijn, zolang je maar geen gevoelige gegevens (zoals inloggegevens) in je code plaatst. Daarom volstaat een gratis account in de meeste gevallen. Zo kan je namelijk je codevoorbeelden opslaan zodat je ze later opnieuw kan raadplegen. Navigeer naar https://codepen.io/accounts/signup/user/free. Je kan kiezen om je te registreren via Twitter, Github of Facebook of via mail. Maak een account aan op een manier naar keuze. Na het registeren krijg je een mail die je nog even moet bevestigen.
Elke verzameling van HTML/CSS/Javascript kan je in Codepen onderbrengen in een ‘Pen’. Navigeer naar https://codepen.io en klik links op Create Pen. Je krijgt nu de editor te zien met een veld voor HTML, CSS en JS. Van zodra je nu begint met HTML-elementen toe te voegen en ze te stylen met CSS krijg je de wijzigingen onderaan te zien. Geef je projectje een naam door naast “Untitled” bovenaan te klikken op het potloodje. Vergeet niet om regelmatig op ‘Save’ te klikken. Wanneer je al jouw ‘Pens’ wil raadplegen, moet je enkel even op je profielfoto klikken rechtsboven en vervolgens kiezen voor Your Work.
Schrijf je in op onze nieuwsbrief en ontvang elke week het beste van Clickx in je mailbox.
Volg Clickx op Google Nieuws om onze nieuwste artikels in je feed te krijgen. Vergeet niet om op ‘Volgen’ te klikken.
Krijg Clickx magazine 10 keer per jaar (waarvan 2 extra dikke dubbelnummers) keurig thuisbezorgd.
Schrijf je in op onze nieuwsbrief
Ontvang elke week het beste van Clickx in je mailbox.
Geniet van exclusieve deals in onze webshop, met verbluffende kortingsacties op hoogwaardige producten.
