This post initially appeared on FreeTech4Teachers.com. It has actually been used without authorization if you see it in other places. Websites that routinely steal my (Richard Byrnes) work include CloudComputin, TodayHeadline, and 711Web..

My Computer Science Principles class is now at the point that theyre all set to break out of scripted projects or activities and work on making operating applications of their own. Throughout the year theyve had experience composing HTML, CSS, and JavaScript (most recently they.
ripped through the lessons in Blackbird Code). So today I had them jump into CodePen, particularly.
this LOLCat Clock, to experiment and see what they might make and modify. Without exception all of my trainees liked utilizing CodePen and one was even effusive in applauding how quick it was to see changes implemented..

Next week my students will invest some more time utilizing CodePen to play with existing projects prior to I send them off to brainstorm and develop web apps of their own.

CodePen does have a gallery of openly shared tasks that you can customize and copy. The screen image above is of a project that I shared and found with my students so that they might get some fun practice with CodePen. You can.
gain access to the exact same job right here..

CodePen is a code editing environment in which trainees can see how HTML, CSS, and JavaScript work together to form web applications. You can register for a complimentary CodePen account using an email address, a GitHub account, Twitter account, or a Facebook account. The very first time that you sign into your CodePen account youll be taken through a really brief tutorial that leads into making your first project. CodePen does have a gallery of openly shared projects that you can customize and copy. The screen image above is of a task that I shared and discovered with my trainees so that they might get some enjoyable practice with CodePen.

The very best element of.
CodePen is that it is a real-time editor. That indicates you can change any aspect of the HTML, CSS, or JS and instantly see the results of those modifications in the preview panel. This is a terrific method to see what happens when a variable is changed in an application. If the modification didnt work as expected, a quick “CTRL+Z” on your keyboard reverts it back to the previous state. The same is true when you edit an element of the HTML or CSS..

CodePen is a code editing environment in which trainees can see how HTML, CSS, and JavaScript work together to form web applications. As you can see in the screenshot that Ive consisted of below, the screen is divided into 4 parts.

You can register for a free CodePen account using an e-mail address, a GitHub account, Twitter account, or a Facebook account. The very first time that you sign into your CodePen account youll be taken through an extremely short tutorial that leads into making your first project.

Applications for Education.

CodePen Free and Paid Plans.
CodePen provides free and paid strategies. My students and I have actually just used the free strategy so far. The paid strategy uses extra features that could be useful to me in the future. Those functions include Professor Mode and Collab Mode. Professor Mode would let me from another location enjoy my students development in real-time. Collab Mode would let me and my trainees team up on tasks in real-time much like operating in Google Docs. You can read more about.
CodePens paid strategies for educators right here..