Teaching How to Code in the Age of iPads

Over the past year or so I have spent much of my time teaching children and finding the best methods to communicate with them. Teaching a child to code can be problematic depending on how comfortable he or she is with math and technology, but with the correct tools and the proper attitude/approach, you can go a long way, regardless of age and math level.

I have found that children that are past 8 or 9 years old have an easy time understanding basic math concepts that are used in coding, such as coordinate planes and variables, but before that it takes patience. For kids between 5 – 8 years old, I really like to take my time making sure that each action is thoroughly explained– that means walking them through basic steps such as clicking vs. dragging vs. double-clicking– because they have not had the schooling to be comfortable with those rudimentary steps that we take for granted.

One issue that I have noticed is how children from the more recent generation have mastered iPads but cannot fathom the mouse-keyboard-screen interaction. It is not uncommon for kids to sit in front of  a computer for one of the first times and attempt to open a browser or window with their fingers– and for you O.C.D. people out there: yes we clean our computer screens daily– but to their dismay they just hear a thump from the finger hitting the screen. For me as a kid, the computer was always around and I was comfortable with the mouse, but things have changed; unfortunately, there is not substitution for the basic inputs, so they must learn.

Another problematic area is the right-click vs. the left-click. On a typical mouse there are two clearly marked buttons and even so I find kids getting them confused all the time. On the newer Mac mice they do not even have two differentiating buttons; instead, it is a single-button mouse that uses click detection to calculate where it is being clicked (you can imagine, even more issues!). With so many devices and different functionalities, it can be confusing for kids!

Regardless of the application, as teachers of young children we must be aware of these details. Children’s computer education is about learning to code as much as it is about getting them comfortable with computer technology. They do not need to be genius programmers or computer scientists as kids, they just need to nurture their tech side and if they happen to find a passion for it along the way, then they will have already picked up the basic skills that are necessary for learning the complexities of computer science/programming.

I did not learn to program (nor was I exposed to it) until I was 20 years old! I was always very drawn to technology and hence become comfortable with it, but learning to program was difficult at times. I had to really change the way that I thought about general logic and truly challenged my brain. Had I been exposed to some of these basic programming concepts as a kid, the logic required for the courses I was taking would’ve been much more intuitive. So next time you are with a child teaching them basic technology concepts, be patient. It is worth it. Nurturing basic concepts yields a huge return in the long run.

Baking a Sleek Website from Scratch: Part 1

The purpose of this How-To is to show a beginner programmer how to make a modern, clean website with no excuses. We will set everything up, so you only have to worry about learning to program! At first, web development can be frustrating (although I won’t say that feeling ever goes away, just subsides), but with the right support it can be done.

We will use a PHP back-end with an HTML, CSS and Javascript (JS) front-end. What this means in a different viewpoint is that what the user (aka, the person visiting the website you are making) will see is controlled by the front-end (the graphics, animations, pretty stuff) and the “sensitive” information or operations (such as sending an email) are controlled by the brain-of-a-back-end.

There are other combinations for languages, but we will use PHP because it works very well with HTML and will provide anyone a great base for making more complex websites on WordPress, built in PHP. Once you get comfortable with this combination, you will be more easily able to go to other languages, as they are similar.

Let’s start with your to-do list (click the headline to open the instructions):

1. Get a server that runs PHP (HTML/CSS/JS are always available).

There are many ways to run a server: (1) you can download MAMP, an application that makes your computer run like a server so you can develop a website; (2) you can pay for server hosting using a service like GoDaddy; (3) find a free hosting provider.

Honestly, I recommend option #1. There is no need to spend time setting up the server– the most important piece is the website– later we can worry about the hosting. If we know the website works locally, it will work on the server, given the correct environment (there’s always an “if” when it comes to programming!).

To use MAMP, download and install the application. Open it: 1) Mac – go to your Applications folder, open the “MAMP” folder (not MAMP PRO), open the MAMP application; 2) Windows – go to your C drive, open the “MAMP” folder (not MAMP PRO), open the MAMP application. After it opens, a small window will appear, with an option to start the server (see the image below). Click start and a page should open automatically in your default web browser. Your new server is running! The URL for your website is http://localhost:8888/.

Screen Shot 2017-01-28 at 11.54.34 AM

2. Add new files to your website

The next step is to add a new file to your website. To do this, go back to the same MAMP folder where you opened the application: you will notice there is a folder called “htdocs”– this is the website, or the root (the fancy name for the highest starting point in the website tree)– open it.

In this folder, we can place all of our individual HTML, CSS, PHP and JS files. To create a new file, programmers usually use a simple text editor– using Microsoft Word or Text Edit or other formatted editors will add extra code to change the look of the file (formatted file)– when we program we do not want to format the text, just simple plain text so that the computer can read it. I recommend Sublime Text or Notepad++, this way we do not have any formatting and you get to use an awesome programming tool. These text editors are built for programming, so they highlight text with different colors and other features to make it easier for you to build your code.

Once you have your text editor, open it, create a new file with the following text:

<h1>Hello dude!</h1>

Save this file as index.php inside the “htdocs” folder of your MAMP install. Now navigate to http://localhost:8888/index.php and you will see a webpage with the text above as a heading, great job!

Notice how the text above is using HTML code, yet we are using a PHP file (you can tell by the extension on the file name: .php versus .html); this is because you can run HTML inside of PHP files– this is one of the reasons we are using PHP– to keep it simpler.

3. create other file types

Once you have created the index.php page, let’s create some other files with your text editor: style.css and scripts.js, and save them in the same “htdocs” folder as before. Be sure to add the extension, remember it is just a plain text editor, the computer does not care about extensions– those are to make it easier for humans to differentiate the files. Then add some code to each one:

style.css

h1 {color: red;}
scripts.js

alert("Hello dude!");

And change your index.php to this:

index.php

<!DOCTYPE html>
<html>
 <head>
 <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>

<h1>My First Random Number:</h1>

 <?php echo(rand(10,100));  ?>
 
 <script src="scripts.js"></script>
 </body>
</html>

You will notice in the index.php file that we include the style.css file using the <link> tag and the scripts.js is included via the <script> tag. The CSS file will make our heading red, the JS code will pop open an alert box when the page loads, and notice the PHP code between “<?php ?>” that echoes (or displays) a random number between 10 and 100. Save all of this code and go to/refresh  your website: you will notice the JS and CSS being applied, as well as a new, random number being generated every time you refresh the page. Cool right?

Now that you have the basic setup for a website, in part 2 of this tutorial we will show you how to put all of this together to create a modern, clean, responsive website with no excuses. Keep on keepin’ on!

 

A Tool for Teaching Kids to Code

Last week, as a representative of Brain Boost, I attended a community outreach program in Norwalk, Connecticut where organizations teach kids about science and technology– or at least that seemed to be the theme. I had the benefit of presenting my program at the end of the event, and something that I noticed was that children, in this case young teens, do not like to sit there and listen to someone monotonously lecture. Especially topics that are already taught in school. In one case, a young scientist was showing how carbon dioxide’s gaseous form floats around like a ghost, which is pretty cool, but they were looking for any excuse to laugh at or make fun of their peers (never the teacher, of course), distracting from the lesson at hand.

As I sat there and thought of how they were going to roast me up there talking about computer science and learning to code, I had to come up with a different way to reach them. I had originally thought of giving a talk about how the typical PHP web app/server works; instead, I switched the topic to creating a simple game that allows you to choose a hairstyle for a character. And it worked marvelously. Even the event organizers were crowded around trying to create their own hairstyle to add to the game.

Now, as a coding teacher I had to find a way to easily present the information. If I were to show them pure text code or start using a terminal (command line) they would be immediately drawn away from it. You have to be aware of the pressures that society places on children (and adults!), and, when it comes to programming, especially with girls. Programming (and computers in general) are thought of as a “boy thing”, so when I step into a room to teach a mix of boys and girls about coding, I make sure that the app they will be creating is based on a universal theme. Pretty much anybody would love to be able to change his or her hairstyle with the click of a button– which is why this app was successful with the kids.

Moreover, the method of delivery is crucial, which is why I chose to use Scratch, a visual programming language that can be run online. Instead of typing text commands in a boring text file, Scratch allows people to perform similar actions but with colored-blocks, where each block represents a command. Visualizing the process makes it less daunting and it also creates an association: there might be a command that moves an object, and it is a certain shape and color, so children start associating movement with blocks with those attributes. Another plus is that they can create games and animations based on objects they draw using a paint tool within Scratch. This allows kids to put their creativity into coding. There really are no limits, even with Scratch.

Another reason a visual programming language is ideal for teaching kids to code is that the logic for visual languages is the same as for text languages. Making a game in JavaScript (JS) is quite to similar to making one in Scratch, the difference is that the commands are typed. At the end of the day, you still have to portray a set of computer instructions with code… whether it is JS or Scratch.

Scratch is not the only way to teach children about programming, but it certainly is a great way to do it!

As I left the community event that night, it filled me with excitement to know that programming is something that truly interests kids at the present time and if we, educators, are truly passionate about the topic we should make sure that it is taught well. Otherwise, “coding” or “computer science” or “programming” will continue to be a hobby for the geeks.