How can we help?

Getting Started with CodePen.io

Learn about how to signup and share code with CodePen.io

 

✅ Part 1: Create a CodePen Account

  1. Go to: https://codepen.io
  1. Click the “Sign Up” button (top right corner).
  1. Choose a free plan (you don’t need a paid one to get started).
  1. You can sign up with:
      • Email and password, or
      • GitHub, Twitter, or Facebook account
  1. After signing up, confirm your email address if prompted.

📝 Part 2: Create and Submit Your Code

notion image
  1. Once logged in, click the “Pen” button at the top.
  1. Your Editor will open.
  1. In the Pen editor:
notion image
  • Add your HTML in the HTML box
  • Add your CSS in the CSS box
  • Add your JavaScript in the JS box (if needed)
  1. Give it a name
    1. notion image
  1. Your work is saved automatically, but you can also click “Save” to be sure.

📤 Submit Your Code for Review

  1. After saving, click the “Share” button (bottom right).
notion image
  1. Under “Full Page View” or “Editor View”, click “Copy Link”.
 
notion image
  1. Send the copied link to your teacher (by email, messaging app, or wherever they ask you to submit it).

✅ Example of a Share Link:

https://codepen.io/your-username/pen/abc123