Free Technology for Teachers: CodePen


CodePen is a code modifying surroundings during which college students can see how HTML, CSS, and JavaScript work collectively to type internet functions. As you may see within the screenshot that I’ve included beneath, the display is split into 4 elements. There is a column for HTML, a column for CSS, and a column for JavaScript. Beneath that there’s a preview panel that shows what the appliance appears to be like like and the way it capabilities. The very best facet of CodePen is that it’s a real-time editor. Which means you may change any facet of the HTML, CSS, or JS and instantly see the consequences of these adjustments within the preview panel. This can be a nice technique to see what occurs when a variable is modified in an software. If the change did not work as anticipated, a fast “CTRL+Z” in your keyboard reverts it again to the earlier state. The identical is true once you edit a facet of the HTML or CSS. You possibly can register for a free CodePen account utilizing an e mail deal with, a GitHub account, Twitter account, or a Fb account. (I signed up utilizing my school-issued Gmail deal with and my college students did the identical). The primary time that you simply signal into your CodePen account you will be taken by way of a really quick tutorial that leads into making your first mission. The primary mission is an easy “Hey World” mission that has some fundamental HTML, CSS, and JS components that you could shortly edit. CodePen does have a gallery of publicly shared tasks that you could copy and modify. Actually, the display picture above is of a mission that I discovered and shared with my college students in order that they may get some enjoyable apply with CodePen. You possibly can entry the identical mission proper right here. Functions for EducationMy Pc Science Rules class is now on the level that they are prepared to interrupt out of scripted actions or tasks and work on making functioning functions of their very own. In the course of the yr they’ve had expertise writing HTML, CSS, and JavaScript (most not too long ago they ripped by way of the teachings in Blackbird Code). So this morning I had them leap into CodePen, particularly this LOLCat Clock, to experiment and see what they may modify and make. With out exception all of my college students preferred utilizing CodePen and one was even effusive in praising how fast it was to see adjustments carried out. Subsequent week my college students will spend some extra time utilizing CodePen to tinker with present tasks earlier than I ship them off to brainstorm and develop internet apps of their very own.CodePen Free and Paid PlansCodePen provides free and paid plans. My college students and I’ve solely used the free plan to this point. The paid plan provides further options that could possibly be useful to me sooner or later. These options embody Professor Mode and Collab Mode. Professor Mode would let me remotely watch my college students’ progress in real-time. Collab Mode would let me and my college students collaborate on tasks in real-time very like working in Google Docs. You possibly can learn extra about CodePen’s paid plans for educators proper right here. This publish initially appeared on If you happen to see it elsewhere, it has been used with out permission. Websites that recurrently steal my (Richard Byrne’s) work embody CloudComputin, TodayHeadline, and 711Web. 


Source link

Leave a Reply

Your email address will not be published. Required fields are marked *