Search Results for `pens`

  1. How Do I Contact the Creator of a Pen?

    There are a few different ways you can get in touch with a CodePen member. Comment on the Pen Every Pen has a comment section. You can access it from the Details View of any Pen from the “Change View” menu in the header. You can also open the comments by clicking the “Comments” button […]

  2. Pinned Items

    Every CodePen account has a “pinned items” list to keep Pens, Posts, or Collections handy. You can click the “pin” at the top of the page on a Pen, Post, or Collection to save the item to your pinned list. The pin turns blue when you pin an item. Your pinned items list follows you […]

  3. How Are Picked Pens Chosen?

    They are chosen by hand by the CodePen staff or an invited guest just for that purpose. This goes for Pens, Posts, and Collections. Why do we pick what we pick? There is no science to it. We just pick things we like. Things we find interesting. Things we find unusual. Things we find beautiful. […]

  4. Custom Screenshots

    PRO members can upload a custom screenshot for Pens and Projects. Screenshots are shown: in metadata for social media, like Twitter cards and Facebook shares. in RSS feeds of your content in place of the iframe preview of your Pen on mobile browsers in place of the iframe preview for members who choose to browse […]

  5. Type Ahead for External Resources

    Need to use a third-party JavaScript or CSS library? That’s extremely common on CodePen! We encourage you to use whatever external resources you need. It’s easy to find CDN-hosted copies of thousands of libraries by using our Type Ahead feature. Here’s how it works: Open Pen Settings Go to the JavaScript or CSS tab Start […]

  6. Forks

    A fork is a complete copy of a Pen or Project that you can save to your own account and modify. Your forked copy comes with everything the original author wrote, including all of the code and any dependencies. How to Fork To fork a Pen or Project, click the Fork button in the header […]

  7. Editable Embeds

    As a PRO member, you can make embeds of your Pens editable. Editable embeds are great for documentation and web development tutorials. The preview of your Pen is updated live on your website as your visitors type into the editor panels, just like the Editor on CodePen. And, your visitors can fork a copy of […]

  8. Creating a Project Template

    The Projects editor comes with several pre-built templates. They’re great for kicking off lots of types of Projects, but if they don’t fit your needs you can create your own! Any of your Projects can be a template. To make a Project available as a template, first click “Settings” to open the Project Settings menu. […]

  9. Screenshots

    When you save a Pen, it enters a queue for a screenshot. It’s not instant, but it shouldn’t take too long. We generate two screenshot sizes for your Pen. You can access them at a URL structure like this: Large Image Preview Small Image Preview Note those are just examples. You’d replace the […]