Coding 101 with Codeacademy

Blog prompt: Code a short Scratch project (or optionally, a Code Academy project) and then share it on your blog, along with some thoughts about what you learned, what you think about Scratch, and/or why you think coding is important (or not).

I have decided to actually try hands on coding with Code Academy and do their tutorial  for beginners. Mainly because I was intimidated and also because some cost money. Therefore, I thought the beginners one would suffice. With this though, I learnt some crucial things through trial and error and following the required steps. I will show through screenshots and a screencast what I did.

Step one:

This step was to essentially get you to understand how code works and what the words all mean. I used this time to take away words or other icons to see what would happen since I have literally never coded before. What would happen is either the action on the far right hand side (such as bouncing bubbles when I took away the 😉 would stop bouncing and would stay still. I learnt from this that the ; probably means to put something in action or to “go”. If I took away the drawName and just had draw, nothing would show up because the code would be broken. Moving on to the actual instructions, when I change the yellow lettering Ready to Code? to  Coding!!!, the words Coding!!! shows up on the right hand screen and the bubbles are still successfully bouncing. This means I successfully completed the code and can move on.

Step two:

This step was more or less getting you comfortable with the “editor panel”. Learnt that you are writing in code called Java Script. Goal overall was to try to change the code in the correct spot and it really let you try to figure it out by yourself. Initially, I tried to write code in the wrong spot and became very confused. In the spot where it says (‘Enter your name here’) ; I quite literally entered my name there. Once I ran it, I realized this wasnt correct so I re put in the original code and tried again. I then put it in the 6th line and put (‘Kelsey Middagh’) and then ran the code and it worked!


Step three:

We then moved on to changing variables. I learnt that variables are used to store data in code. Usually it will look like message = ‘Change the message!’ ;

So as said on code academy, “this line creates a message variable and store the Change the message! text in it.” So overall, I learnt that this is a crucial part in code where you can type messages and it will properly show up. So as one can see, I wrote in my code message = ‘I love EDTC 300!’ and it popped up perfectly.

Step four:

We now moved on to more complex things, Changing colours! So as one can see from the screenshot, there is var red, var blue, var green, etc and numbers beside it. From what I gathered var (enter colour) is how to get a desired colour name AKA the variable and then the numbers are the message that allow the correct colour to be shown! I initally had issues because I wanted the colour yellow and when I hit run, it was incorrect. I realized you can use only the colours listed in the code.. So i changed my idea to purple, ran it and it worked perfectly. Once you gather the understanding of how variables and messages work together, coding becomes a lot easier.

Step 5:

Here in this step we are building upon our previous knowledge of adding text in colours but now we will be adding in multiple colours. Essentially the exact same but in the code line that says letterColors =  …. You can put in multiple colours rather than just one like in the previous step.

With this I put in letterColors = [blue, red, green, blue, purple];

And my code ended up looking like below! You can put these in any order as long as it has the brackets, commas, and semi colon at the end. Without these, it will break the code.

Step six:

Here in this step it gets a bit more intense and interactive. You are able “change the physics” of the code! So the three variables you are able to change are:

  1. mouseResponseThreshold
  2. Friction
  3. rotationForce

You then put in the message any numbers. As shown in my screencast, I played with the numbers to show how a variety of numbers look when punched in. Some worked out well, others, not so much! This was really fun to have control over the animation like this and be able to change it in a lot of ways. In this section, youre also able to change your colour variables again and change the message

Step seven:

You have completed the course!

Why is coding important?

What I have gathered by doing this lesson, coding is important because it creates any or all animation, websites, and programs. It is a huge part in our tech world and creates a foundation for developing essential tools used in tech and even ed tech! I don’t think we would be able to use apps in class or even the wordpress blog without coding! I noticed that wordpress shows you the coding part of your blog post and just with this, you can tell that coding is the backbone of this webpage.

How was my experience with codeacademy?

I found this coding teaching program to be very useful! It gave you step by step what you should be doing and builds upon previous skills. If you do happen to get stuck, it will solve the code and then you can see where you went wrong. I overall really enjoyed this experienced and seen above, I learnt a lot and came a long way from being completely intimidated by coding! I hope I can use this for future knowledge if I ever do stumble upon coding related material.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s