In this tutorial you will learn basic coding principles in a visually satisfying way (I hope). You will create something of interest while learning to code. That something of interest will be a side scrolling city skyline and you’ll get there in less than 8 hours, promise (you can get your money back if you don’t).
We will be using JavaScript - a programming language that runs in your browser. And everything we do will be online, where code feels most at home.
Also, there will be stuff you may not understand (most notably below the line “Stuff you don’t need to understand” (you will know it when you see it)). Don’t be scared, I’ve been doing this for more than 10 years and I still see lots of stuff I don’t understand, I just blame it on other people writing ununderstandable code.
lesson 1 - functions
We are going to skip the boring theory and head over to where the action happens immediately - functions. BOOM!
Head over to this url, and enter rectangle(20, 20, 40, 40); below the line that says so. Now click on run…
Great! You’ve written your first program! And you can show it to someone, you can even pretend it’s abstract art by adding another rectangle() with numbers other than 20, 20, 40, 40. Go ahead and try that!
What you have done in fancy computer language is you ‘called a function’. Functions have many definitions, but typically they do something (useful). In this instance the function drew a black square on the screen. The four numbers that follows the function are called parameters. The first two are the x and the y position and the next two are the width and the height. See if you can figure out how they change the shape of the square and move it around.
Not all functions take the same parameters, for instance, try this circle(20, 20, 40);. You should now see a circle on your screen. Now the artist in you can go crazy!
That’s it for today, who said learning to code takes long? Click on ‘Update’, wrap the URL up in some nice text and let the world (your friends (actually only those who still reads your updates)) know that you can code!!
Oh, and come back next week, cities don’t get built out of black rectangles and circles!
Mmm, you’re still reading. So you want a challenge do you? Well, wield your keyboard and make a city with more buildings! Don’t let them touch each other (or do) and line them up at the bottom (or don’t). Grap a screenshot and share it somewhere (like twitter) tagged #learn2code.
