Werken met CodePen

Stap 1: Aanmelden bij CodePen

  1. Ga naar CodePen.io.
  2. Klik op “Sign Up” rechtsboven op de homepage om een nieuw account aan te maken, of “Log In” als je al een account hebt.
  3. Je kunt je aanmelden met je e-mailadres, of inloggen met Google, Facebook, GitHub, of Twitter.

Stap 2: Een nieuwe Pen maken

  1. Klik op 'Create' in de bovenste menubalk en selecteer 'New Pen'.
  2. Je komt nu in een schone werkomgeving waar je HTML, CSS, en JS kunt schrijven.

Stap 3: HTML, CSS, en JS schrijven

  1. In het HTML-gedeelte schrijf je je HTML-code.
  2. In het CSS-gedeelte voeg je je CSS toe.
  3. In het JS-gedeelte kun je JavaScript schrijven.

Stap 4: Instellingen

  1. Je kunt bibliotheken zoals Bootstrap, jQuery, etc. toevoegen via de instellingen van elke sectie.
  2. Klik op het tandwiel icoon boven elk gedeelte om de instellingen te openen.

Stap 5: De Pen opslaan

  1. Klik op ‘Save’ om je Pen op te slaan.
  2. Geef je Pen een naam en voeg desgewenst tags toe.

Stap 6: Je Pen delen

  1. Klik op ‘Change View’ en selecteer ‘Details View’ om de details van je Pen te bekijken.
  2. Kopieer de URL uit de adresbalk van je browser om je Pen te delen.

Voorbeeld van een Pen maken met Bootstrap

  1. Maak een nieuwe Pen.
  2. Klik op het tandwiel icoon boven het CSS-gedeelte.
  3. Zoek naar Bootstrap in de zoekbalk en voeg het toe.
  4. Schrijf je HTML en CSS zoals gewoonlijk, en Bootstrap-stijlen zullen worden toegepast.

Handige tips:

  • Debug View: Gebruik deze weergave om je Pen te zien zonder de CodePen-interface.
  • Projecten: Voor meer complexe applicaties kun je een Project maken in plaats van een Pen.
Naar boven