{"id":490,"date":"2026-07-23T11:49:47","date_gmt":"2026-07-23T11:49:47","guid":{"rendered":"https:\/\/freepostfinder.com\/blog\/?p=490"},"modified":"2026-07-23T11:49:47","modified_gmt":"2026-07-23T11:49:47","slug":"how-to-create-your-first-pen-on-codepen-step-by-step-guide","status":"publish","type":"post","link":"https:\/\/freepostfinder.com\/blog\/how-to-create-your-first-pen-on-codepen-step-by-step-guide\/","title":{"rendered":"How to Create Your First Pen on CodePen (Step-by-Step Guide)"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Introduction<\/h2>\n\n\n\n

CodePen is a popular online code editor and front-end development platform that allows developers to write, test, and share HTML, CSS, and JavaScript directly within their web browsers. On CodePen, a ‘Pen’ is the basic unit of a project, making it easy to create interactive web components, UI designs, animations, and coding experiments without installing any software.<\/p>\n\n\n\n

This guide explains how to create your first Pen on CodePen.<\/p>\n\n\n\n

Step 1: Sign In to CodePen<\/p>\n\n\n\n

Step 1: Sign In to CodePen<\/strong><\/h3>\n\n\n\n
    \n
  1. Open your web browser.<\/li>\n\n\n\n
  2. Visit CodePen<\/em><\/strong>.<\/li>\n\n\n\n
  3. Click Log In<\/strong>.<\/li>\n\n\n\n
  4. Sign in to your CodePen account.<\/li>\n<\/ol>\n\n\n\n

    If you don’t have an account, create one for free.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Step 2: Click on Your work<\/strong><\/h3>\n\n\n\n

    Click on your work to create your work.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Step 3: Click on “create.” <\/strong><\/h3>\n\n\n\n

    Click on “create” to open the editing or creating section.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Step 4: Create a “new pen.”<\/strong><\/h3>\n\n\n\n

    Click on “new pen” for creating.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Step 5: Understand the Editor Layout<\/strong><\/h3>\n\n\n\n

    The CodePen editor is divided into different panels:<\/p>\n\n\n\n

      \n
    • HTML<\/strong> \u2013 Write the structure of your webpage.<\/li>\n\n\n\n
    • CSS<\/strong> \u2013 Add styles and formatting.<\/li>\n\n\n\n
    • JavaScript<\/strong> \u2013 Add interactivity and functionality.<\/li>\n\n\n\n
    • Preview<\/strong> \u2013 View your project in real time.<\/li>\n<\/ul>\n\n\n\n

      As you type your code, the preview updates automatically.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Step 6: Write Your HTML Code<\/strong><\/h3>\n\n\n\n

      Enter your HTML in the HTML<\/strong> panel.<\/p>\n\n\n\n

      Example:<\/p>\n\n\n\n

      <h1>Welcome to CodePen<\/h1>\n<p>This is my first Pen.<\/p><\/code><\/pre>\n\n\n\n
      The preview panel will immediately display the content.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Step 5: Add CSS Styling<\/strong><\/h3>\n\n\n\n
      Open the CSS<\/strong> panel and add styles.<\/p>\n\n\n\n
      Example:<\/p>\n\n\n\n
      body {\n  font-family: Arial, sans-serif;\n  text-align: center;\n  background: #f5f5f5;\n}\n\nh1 {\n  color: #0066cc;\n}<\/code><\/pre>\n\n\n\n
      Your preview updates automatically as you edit the CSS.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Step 6: Add JavaScript <\/strong><\/h3>\n\n\n\n
      If your project needs interactivity, write JavaScript in the JavaScript<\/strong> panel.<\/p>\n\n\n\n
      Example:<\/p>\n\n\n\n
      console.log(\"My first CodePen project!\");<\/code><\/pre>\n\n\n\n
      You can also build interactive buttons, animations, and dynamic web pages using JavaScript.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Step 7: Save Your Pen<\/strong><\/h3>\n\n\n\n
      Click the Save<\/strong> button.<\/p>\n\n\n\n
      Your Pen will be stored in your CodePen account and assigned a unique URL that you can access later.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Step 8: Share Your Pen<\/strong><\/h3>\n\n\n\n
      After saving, you can:<\/p>\n\n\n\n
        \n
      • Copy the Pen URL.<\/li>\n\n\n\n
      • Share it with friends or colleagues.<\/li>\n\n\n\n
      • Embed it in a blog or website.<\/li>\n\n\n\n
      • Include it in your portfolio.<\/li>\n\n\n\n
      • Share it on social media.<\/li>\n<\/ul>\n\n\n\n
        Public Pens can be viewed by anyone with the link.<\/p>\n\n\n\n
        \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
        Introduction CodePen is a popular online code editor and front-end development platform that allows developers to write, test, and share HTML, CSS, and JavaScript directly within their… <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[128,129,132,131,130],"class_list":["post-490","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-codepen","tag-codepen-guide","tag-codepen-tutorial","tag-create-your-first-pen-on-codepen","tag-how-to-create-your-first-pen-on-codepen"],"_links":{"self":[{"href":"https:\/\/freepostfinder.com\/blog\/wp-json\/wp\/v2\/posts\/490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freepostfinder.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freepostfinder.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freepostfinder.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freepostfinder.com\/blog\/wp-json\/wp\/v2\/comments?post=490"}],"version-history":[{"count":1,"href":"https:\/\/freepostfinder.com\/blog\/wp-json\/wp\/v2\/posts\/490\/revisions"}],"predecessor-version":[{"id":530,"href":"https:\/\/freepostfinder.com\/blog\/wp-json\/wp\/v2\/posts\/490\/revisions\/530"}],"wp:attachment":[{"href":"https:\/\/freepostfinder.com\/blog\/wp-json\/wp\/v2\/media?parent=490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freepostfinder.com\/blog\/wp-json\/wp\/v2\/categories?post=490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freepostfinder.com\/blog\/wp-json\/wp\/v2\/tags?post=490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}