CodePen is an ideal environment for educators to teach front-end design and development. CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing.
Need to build a reduced test case to demonstrate and figure out a bug? CodePen is great for that. Want to show off your latest creation and get feedback from your peers? CodePen is great for that. Want to find examples of a particular design pattern for your project? CodePen is great for that.
CodePen is entirely in the browser. It will work on any computer with a modern web browser. There is nothing to install. There are no upgrades you’ll ever have to download and run.
Even better, many students have their own computers. CodePen will work in the classroom, and then students can continue work at a lab, at home, or on any other computer right on CodePen. It will be the exact same environment with all their saved work.
You could start out just teaching raw HTML and CSS. That’s fundamental stuff that is vital to a web curriculum. Then incorporate JavaScript. Perhaps add jQuery, that takes just selection from a menu.
You can get as advanced as you like on CodePen. Teach about JavaScript compiling with Babel, ES6, and JSX. Teach a library like D3. Show students CSS preprocessing and import dependencies. Output HTML in Slim. Ajax for some JSON. Anything you can do on the front end web, you can do on CodePen.
Flag this Resource
