{"id":17324,"date":"2012-06-27T11:11:40","date_gmt":"2012-06-27T18:11:40","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=17324"},"modified":"2015-02-25T20:12:03","modified_gmt":"2015-02-26T03:12:03","slug":"112-using-codepen","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/112-using-codepen\/","title":{"rendered":"#112: Using CodePen"},"content":{"rendered":"

CodePen<\/a> is an app for sharing and playing around with front end code. I made it with some friends of mine: Alex Vazquez and Tim Sabat. In this typical ramble-ridden screencast I introduce what it is, what it’s for, how to use it, and some of its fancy features.<\/p>\n","protected":false},"excerpt":{"rendered":"

CodePen is an app for sharing and playing around with front end code. I made it with some friends of mine: Alex Vazquez and Tim Sabat. In this typical ramble-ridden screencast I introduce what it is, what it’s for, how to use it, and some of its fancy features.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":151298,"url":"https:\/\/css-tricks.com\/https-codepen-test\/","url_meta":{"origin":17324,"position":0},"title":"HTTPS CodePen Test","date":"September 26, 2013","format":false,"excerpt":"See the Pen Tweetbot iOS 7 Icon (Pure CSS) by Kamil Czujowski (@kamil) on CodePen","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":307423,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-repeat\/","url_meta":{"origin":17324,"position":1},"title":"mask-repeat","date":"April 24, 2020","format":false,"excerpt":"In CSS, the mask-repeat property tells a mask if it should repeated or not and in which directions. It's a lot like background-repeat. The default is repeat. This mask does not repeat: CodePen Embed Fallback This mask repeats both ways: CodePen Embed Fallback This mask repeats along the x axis:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19803,"url":"https:\/\/css-tricks.com\/video-screencasts\/118-introduction-to-codepen-pro\/","url_meta":{"origin":17324,"position":2},"title":"#118: Introduction to CodePen PRO","date":"January 8, 2013","format":false,"excerpt":"CodePen PRO offers a slew of new features. You can read about them, but much better to show them right? [Deep awesome voice]: and this is just the beginning.","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":242706,"url":"https:\/\/css-tricks.com\/snippets\/css\/typewriter-effect\/","url_meta":{"origin":17324,"position":3},"title":"Typewriter Effect","date":"July 11, 2016","format":false,"excerpt":".typewriter h1 { overflow: hidden; \/* Ensures the content is not revealed until the animation *\/ border-right: .15em solid orange; \/* The typwriter cursor *\/ white-space: nowrap; \/* Keeps the content on a single line *\/ margin: 0 auto; \/* Gives that scrolling effect as the typing happens *\/ letter-spacing:\u2026","rel":"","context":"With 78 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":147868,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/02-file-setup-linking-up-jquery\/","url_meta":{"origin":17324,"position":4},"title":"#02: File Setup \/ Linking Up jQuery","date":"August 22, 2013","format":false,"excerpt":"In this screencast I cover the absolute bare minimum setup for utilizing jQuery on a \"real\" website. We have an index.html file with the basic HTML5 structure stubbed out. jQuery is included as a I wanted to cover that right away so that you can experience how easy using jQuery\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":262330,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-grid-starter-layouts\/","url_meta":{"origin":17324,"position":5},"title":"CSS Grid Starter Layouts","date":"November 24, 2017","format":false,"excerpt":"This is a collection of starter templates for layouts and patterns using CSS Grid. The idea here is to show off what the technique is capable of doing and provide a starting point that can be re-purposed for other projects. Remember that browser support for Grid is good but requires\u2026","rel":"","context":"In \"grid\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/11\/grid-starter-layouts-featured.png?fit=1200%2C682&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17324"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17324"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17324\/revisions"}],"predecessor-version":[{"id":17325,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17324\/revisions\/17325"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17324"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}