Teaching kids how to do coding has recently become quite popular here in Singapore. I checked out some of those classes that aim to teach children how to code. Most classes are either robotics or uses the Scratch platform. I checked out the Scratch website and attempted to learn programming via their method but did not understand nor how to code without using the website. If you have done flash animation before, it feels more like that than doing coding. Drag and drop pre-configured motion action, logic for the various conditions that you want to animate the otherwise motionless still-image sprite.
To get started, we need
- A computer (Desktop, Laptop, Macbook etc)
- Any browser (Chrome, Safari, Microsoft Edge etc)
- A text editor App (see recommendation below)
For the text editor, any computer should come with a default text editor, for example NotePad on Windows or TextEditor on Mac. Although the basic editor works as well, but using applications built for coding would make the task much easier. You would have less chance for bugs in the program due typo error because a suitable text editor will provide suggestions to help you autocomplete your code.
‘Bugs’ in programming refers to errors in the code that make the code not to work as you expect. The ‘bug’ could be due to
Typo error – you spelt some keyword wrongly
Logic error – no typo error code works but not the way you wanted it. For example, you wanted your animation to move left upon click but it moved right.
Keyword – there are many different programming languages. Each language have their own keyword for you to use to build your code. They usually have lots of documentation, official and non official, to explain the keywords and even the ready made functions (similar to excel functions) that you can use to build your code logic.
Back to the text editor recommendation.
Here’s some suggestions and screenshots using different editors
Notepad should be familiar to anyone who uses Windows. It’s good enough to use for taking down and storing some notes but definitely not good enough for coding.
2. Notepad++ (Download here)
The Notepad++ is a free software, downloadable for Windows. Just navigate to their site and hit the big Download button to install. Using Notepad++ looks better than using Notepad but you would still need to type everything out yourself.
3. Visual Studio Code (Download here)
For those familiar with Microsoft Visual Studio, no, this is not the same as that. Visual Studio Code is also developed by Microsoft but is a freeware that can be downloaded at no cost. In the book, the author recommended Sublime but on the website it indicated that a licence is required for continued use (which means you need to buy) so I would prefer Visual Studio Code instead. Both applications can be downloaded for both Windows or Mac. Firstly, you just need to type a few words and the Visual Studio Code would list out some suggestions for you so that you only need to select the option that you want. And the fonts are colour coded, so you know which are the keywords.
Now we can start our very first program! The first basic program, basically just pops up a “Hello World” message when you open the file in a browser.
Open your text editor and type in the words, unless you use Visual Studio Code, you might not need to type in everything.
alert (“Hello World”)
Save the file somewhere. Click the File button at the top of the editor and select Save. Enter the filename as Hello.html. Go to the folder where you save your file. In windows, the default should be in My Documents (full path should look something like this “c:\users\<your username>\Documents”. In Mac, the default document folder should be in Documents. Open the Finder. Select Documents folder. You should see the file Hello.html.
Double click on the file. It should open up in your default browser and look something like this.