Code Example


codepen structure

How to use Codepen?


CodePen is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating tool for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things. We say social, because CodePen is a community.

What's New?




Awesome project work

CodePen has an impressive amount of support for preprocessors (such as Jade, Haml, Slim, Sass, Less, Stylus, Coffeescript and PostCSS). There is also plenty of frameworks and libraries to pick from (Foundation, Bootstrap, Angular, D3, Backbone, Ember etc.).


Share new info and knowledge

You can deploy a Project to create a "production" version of your Project with no CodePen UI around it. Your deployed Project gets a unique URL that you can share with anyone. You can also map a custom domain to a deployed Project! Changes you make in the Project Editor won't be applied to the deployed version of your Project until you redeploy, so you can experiment with changes before they go to your live site.


Challenge yourself!

The codepen profile page allows you to display all of your public pens, and control which order you want them to be viewed in. This is great for showing off your work to possible employers, other devs etc.To fork a pen only requires clicking one button, and you'll be able to modify the pen on your own account.You can search through other pens, either by keyword or popular, picked or recent.CodePen are awesome. This is a must have tool for any front end developer as it allows you to test out concpets and ideas before pushing them to a live enviroment.

Contact Us

Pleae contact me if you have any question!