Seven Sites and Apps to Help Students Learn Coding and Programming

The other day I was in a Zoom meeting with someone who is relatively new to field of educational technology. I was asked about any "must read" books or sites. The first thing that came to mind was Seymour Papert's Mindstorms. Mentioning Mindstorms then took me down the path of talking about Logo and its importance in the development of using personal computers in the classroom. 

Logo was my introduction to programming back in my elementary school days 30+ years ago. You can still find and use Logo and its many iterations today. There are also many other good sites and apps that can introduce your students to various types of programming and coding. Here's a short list of some of my favorite options today. 

MIT App Inventor
The MIT App Inventor is a free app development tool that I've used with students and teachers for over a decade now. It's a great tool to use to introduce students to some programming concepts while letting develop apps that they can actually use on their phones. While it might seem complicated at first glance, after they have mastered a few basic concepts students can create some amazing applications through the MIT App Inventor. Here's my video overview of how to create your first app with the MIT App Inventor. 

Blackbird

Blackbird is a platform that launched in early 2021 to help teachers teach programming to middle school and high school students. Blackbird positions itself as a platform that fills the gap between using a blocks-based service like Scratch and writing code in an IDE. Blackbird doesn't use blocks or even offer any blocks. Instead, Blackbird provides a series of interactive lessons in which students write JavaScript. Blackbird lessons are arranged in progressive units. From the first lesson students are building a game they can customize to their heart's content. When they've finished all of the lessons students can move onto a "workshop" where they can work on independent projects that you can observe from your teacher dashboard in Blackbird. You can see a full overview of Blackbird and read my students' impressions of it right here. 

Daisy the Dinosaur

Daisy the Dinosaur is a free iPad app designed to introduce young students to some programming basics. The app asks students to create commands for Daisy the Dinosaur to carry out. There is a free play mode in which students can make Daisy do whatever they want. But to get started you might want to have students work through the beginner challenges mode. Daisy the Dinosaur asks students to enter commands in the correct sequence in order to make Daisy complete tasks correctly. Daisy the Dinosaur could be used with students as young as Kindergarten age.

Scratch & Scratch Jr.

Scratch like the MIT App Inventor has been around for over a decade and is still the first thing that many people mention when talking about introducing students to programming concepts. Scratch allows students to program animations, games, and videos through a visual interface. Students create their programs by dragging together blocks that represent movements and functions on their screens. The blocks snap together to help students see how the "if, then" logic of programming works. Watch the video here to learn more about Scratch. And check out the ScratchEd team’s curriculum for teaching with Scratch (link opens a PDF). 

Scratch Jr. is based on the aforementioned online Scratch program. Scratch Jr for iPad and for Android  uses the same drag and drop programming principles used in Scratch. On Scratch Jr students can program multimedia stories and games. To program a story or game on Scratch Jr. students select background settings for each frame of the story. Then in each frame students select the actions that they want their characters to take. Students snap programming pieces together to make characters move and talk in their stories and games.

Snap!

Snap! is a drag-and-drop programming interface designed to help students learn to program. Snap! uses a visual interface that works in your browser on your laptop as well as on your iPad. To design a program in Snap! drag commands into a sequence in the scripts panel. The commands are represented by labeled jigsaw puzzle pieces that snap together to create a program. You can try to run your program at any time to see how it will be executed. After previewing your program you can go back and add or delete pieces as you see fit.

Grasshopper
Grasshopper teaches JavaScript coding through a series of easy-to-follow tutorials. It is available to use in your web browser or as an Android app. It starts off with an introduction to the basic vocabulary of coding before moving into the coding lessons. You have to pass the vocabulary quiz before your can jump into the lessons. Each lesson has a tutorial, a practice activity, and a quiz. You have to successfully complete each lesson before progressing to the next one. If you need to stop a lesson, Grasshopper saves your place until you can resume. Grasshopper offers an optional reminder service that will encourage you to practice on a daily schedule.

CodePen

CodePen is a code editing environment in which students can see how HTML, CSS, and JavaScript work together to form web applications. As you can see in the screenshot that I've included below, the screen is divided into four parts. There's a column for HTML, a column for CSS, and a column for JavaScript.

The best aspect of CodePen is that it is a real-time editor. That means you can change any aspect of the HTML, CSS, or JS and immediately see the effects of those changes in the preview panel. This is a great way to see what happens when a variable is changed in an application. If the change didn't work as anticipated, a quick "CTRL+Z" on your keyboard reverts it back to the previous state. The same is true when you edit an aspect of the HTML or CSS.  

CodePen does have a gallery of publicly shared projects that you can copy and modify. Those public projects make it easy for students to get started using CodePen as I demonstrate in this short tutorial video. 

CodePen - One of My New Favorites in 2021

I'm taking this week to recharge and get ready for the next session of the Practical Ed Tech Virtual Summer Camp. For the next few days I'm going to highlight some of my favorite new and new-to-me tools so far this year. 

CodePen is a site on which students can create web apps or modify existing web apps that others have added to the CodePen galleries. The neat thing about CodePen is that in real-time students can see how HTML, CSS, and Javascript are used together to create web apps. 

In the following short video I provide an overview of the basic features of CodePen. In the video I also show how students can use CodePen to tinker with web apps to learn about the functions on HTML, CSS, and Javascript in a web application. 

CodePen Free and Paid Plans

CodePen offers free and paid plans. My students and I have only used the free plan so far. The paid plan offers additional features that could be helpful to me in the future. Those features include Professor Mode and Collab Mode. Professor Mode would let me remotely watch my students' progress in real-time. Collab Mode would let me and my students collaborate on projects in real-time much like working in Google Docs. You can read more about CodePen's paid plans for educators right here. 

This post originally appeared on FreeTech4Teachers.com. If you see it elsewhere, it has been used without permission. Sites that regularly steal my (Richard Byrne's) work include CloudComputin and WayBetterSite. Featured image created by Richard Byrne using Canva.

Code Your Own Retro View-Master

CodePen is one of my favorite sites for helping students learn how web apps are constructed. In fact, I like it so much that I'll be featuring it in one of next week's Practical Ed Tech Virtual Summer Camp webinars. 

The concept of CodePen is that people can share the web apps that they develop and others can copy and modify those projects. The neat thing about it from a teaching and learning perspective is that you can see the how the CSS, HTML, and JavaScript work together. Edits made to the code are almost instantly carried-out for you to see. 

Earlier this week I received an email from CodePen that highlighted a few projects from the public project gallery. One of those projects that jumped out to me was the Visualizer 3000 project. The Visualizer 3000 lets you create an image gallery that is displayed in the form of a View-Master. A new image from your gallery is displayed each time you click on the handle on the side of the View-Master. 

Applications for Education
As I mentioned above, CodePen's format provides a great way for students to see how CSS, HTML, and JavaScript work together to form a web application. The Visualizer 3000 project could be a fun one for students to tinker with to change the color scheme, add pictures of their own, or change the number of pictures that rotate through the gallery.

Here's a video overview of how CodePen works.



This post originally appeared on FreeTech4Teachers.com. If you see it elsewhere, it has been used without permission. Sites that regularly steal my (Richard Byrne's) work include CloudComputin and WayBetterSite.

Students Can Tinker With Web Apps on CodePen

Last week at the end of Two Ed Tech Guys Take Questions & Share Cool Stuff I briefly mentioned a site called CodePen that I've been using with my students for the last couple of weeks. CodePen is a site on which students can create web apps or modify existing web apps that others have added to the CodePen galleries. The neat thing about CodePen is that in real-time students can see how HTML, CSS, and Javascript are used together to create web apps. 

In the following short video I provide an overview of the basic features of CodePen. In the video I also show how students can use CodePen to tinker with web apps to learn about the functions on HTML, CSS, and Javascript in a web application. 

CodePen Free and Paid Plans

CodePen offers free and paid plans. My students and I have only used the free plan so far. The paid plan offers additional features that could be helpful to me in the future. Those features include Professor Mode and Collab Mode. Professor Mode would let me remotely watch my students' progress in real-time. Collab Mode would let me and my students collaborate on projects in real-time much like working in Google Docs. You can read more about CodePen's paid plans for educators right here. 

This post originally appeared on FreeTech4Teachers.com. If you see it elsewhere, it has been used without permission. Sites that regularly steal my (Richard Byrne's) work include CloudComputin and WayBetterSite. Featured image created by Richard Byrne using Canva.

CodePen - See How Web Apps Come Together

CodePen is a code editing environment in which students can see how HTML, CSS, and JavaScript work together to form web applications. As you can see in the screenshot that I've included below, the screen is divided into four parts. There's a column for HTML, a column for CSS, and a column for JavaScript. Below that there is a preview panel that displays what the application looks like and how it functions. 

The best aspect of CodePen is that it is a real-time editor. That means you can change any aspect of the HTML, CSS, or JS and immediately see the effects of those changes in the preview panel. This is a great way to see what happens when a variable is changed in an application. If the change didn't work as anticipated, a quick "CTRL+Z" on your keyboard reverts it back to the previous state. The same is true when you edit an aspect of the HTML or CSS. 

You can register for a free CodePen account using an email address, a GitHub account, Twitter account, or a Facebook account. (I signed up using my school-issued Gmail address and my students did the same). The first time that you sign into your CodePen account you'll be taken through a very short tutorial that leads into making your first project. The first project is a simple "Hello World" project that has some basic HTML, CSS, and JS elements that you can quickly edit. 

CodePen does have a gallery of publicly shared projects that you can copy and modify. In fact, the screen image above is of a project that I found and shared with my students so that they could get some fun practice with CodePen. You can access the same project right here. 

Applications for Education

My Computer Science Principles class is now at the point that they're ready to break out of scripted activities or projects and work on making functioning applications of their own. During the year they've had experience writing HTML, CSS, and JavaScript (most recently they ripped through the lessons in Blackbird Code). So this morning I had them jump into CodePen, specifically this LOLCat Clock, to experiment and see what they could modify and make. Without exception all of my students liked using CodePen and one was even effusive in praising how quick it was to see changes implemented. 

Next week my students will spend some more time using CodePen to tinker with existing projects before I send them off to brainstorm and develop web apps of their own.

CodePen Free and Paid Plans

CodePen offers free and paid plans. My students and I have only used the free plan so far. The paid plan offers additional features that could be helpful to me in the future. Those features include Professor Mode and Collab Mode. Professor Mode would let me remotely watch my students' progress in real-time. Collab Mode would let me and my students collaborate on projects in real-time much like working in Google Docs. You can read more about CodePen's paid plans for educators right here. 

This post originally appeared on FreeTech4Teachers.com. If you see it elsewhere, it has been used without permission. Sites that regularly steal my (Richard Byrne's) work include CloudComputin, TodayHeadline, and 711Web.