Andrew Marks presents Why Code Is Cool (And Why You Should Learn It) on a lunchtime webinar presented by The Creative Collective on 25th August 2016.

3. “Everybody should learn how to program a
computer because it teaches you how to think.”
- Steve Jobs

4. Six Reasons a Non-Computer Nerd
Might Want to Learn to Code
1. It's like learning to read or write
2. It's useful, even outside of computer geek
circles
3. It's helps you talk to actual programmers
4. It's actually a fun hobby
5. Computers are a part of society
6. It teaches other skills

5. A Brief History of Code
• 1940s – first recognisably
modern, electrically powered
computers created
• 1950s – first high-level
programming languages
developed
• Late 1960s to late 1970 –
major push in development of
programming languages
• 1980s – personal computers
• 1990s – the internet age

6. Computational Thinking
• An algorithm is basically a set of step by step
instructions
• Before writing any code, you need to start with an
algorithm
• We need to determine what we're trying to achieve,
and then break down the problem into step by step
instructions.
• Once we have an algorithm, we can write code to
make a program

7. A coder is going to the grocery store and his
partner asks him, “Would you buy a bottle of
milk, and if there are eggs, buy a dozen.”
What would you bring home?
What do you think the coder brought home?
SCENARIO #1

8. Upon arrival, his partner angrily asks him, "Why
did you get 12 bottles of milk?" The programmer
says, "There were eggs!"
This is an example of why we don’t program computers with
plain spoken language – we need to formalise the instructions
we give to computers
SCENARIO #1

9. SCENARIO #2
1 + 2 x 3 + 4
The answer is 11. Mathematics is a much stricter
“language” than spoken English. There are rules
about how things happen. In that way, coding is
a lot of maths.

10. SCENARIO #3
How do you make toast?
‘How do you make toast?’ is an interview question for software
developers, because it reveals whether you think computationally.
The ideal answer is a couple of steps away from something a robot
could understand. For a robot, clarity and precision are everything.
“Take four steps forward, open packet of bread, remove one slice
of bread”, for example, is a better start than “put bread in toaster”.

11. Coding in Websites
Three main elements make up a modern
website:
– HTML
– CSS
– Javascript

12. Is HTML a Programming Language?
• HTML defines the structure of a web page
• HTML is a “markup language”
• HTML is used for structural purposes on a web
page, not functional ones
• Think of it this way: you can’t compute the
sum of 2 + 2 in HTML; that’s not what it’s for.
This is because HTML is not a programming
language.
• HTML5

13. How Does HTML Work?
• Early Word Processors were “markup”
programs
• Surround the text you want to “mark up” with
code
• For example:
– <b>bold</b>
– <i>italics</i>
– <u>underline</u>

14. How Does HTML Work?
More examples:
<a href="http://google.com.au">Google</a>
<img src="http://site.com/img.jpg" />
<iframe
src="https://www.youtube.com/embed/video"></
iframe>

15. How Does HTML Work?
A HTML Table: <table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

17. Website Wireframe
<table>
<tr>
<td colspan="2">Header</td>
</tr>
<tr>
<td colspan="2">Navigation</td>
</tr>
<tr>
<td width="70%">Content</td>
<td width="30%">Sidebar</td>
</tr>
<tr>
<td colspan="2">Footer</td>
</tr>
</table>

18. Introducing CSS
• Cascading Style Sheets describe the
presentation of a HTML document
• Centralises these rules in a single file
• Makes websites look the same across different
platforms and browsers
• Allows for mobile-responsiveness!

19. Introducing CSS
Cascading Style Sheets describe the presentation
of a HTML document
body {
background-color:white;
color:black;
font-family:Arial,sans-serif;
border: 12px solid;
}

20. Introducing Javascript
• JavaScript is the programming language of HTML and
the Web
• Javascript runs in your browser
• Adds dynamic features, such as mouseovers, popups,
and animations.

21. Looking under the hood
• You can see how any website works by viewing the
source code:
• Under “View” pull-down menu
• Ctrl-U or Cmd-U (Firefox / Explore)
• Ctrl-Shift-U (Chrome)
• Right-click / Inspect
• Firebug (Firefox)

22. Introducing PHP
PHP is the language used to write many of your favourite
online applications:
• Facebook
• Wikipedia
• Flickr
• Yahoo!
• WordPress
• Mailchimp

23. Introducing PHP
• PHP adds a new level of complexity and control
over your website
• PHP runs on the web server – it is never seen by the
browser
• Allows you to collect and save information to a
database
• Generate dynamic content (based on browser /
location / etc)
• Set cookies

24. Have Fun Learning Programming
code.org – “Hour of Code” (ages 6 – 106)
• Choose from Star Wars, Minecraft or Frozen
tynker.com
• Based on Minecraft, teaches kids how to program and
build games
alice.org
• create computer animations using 3D models

25. HERE’S MATHS PROBLEM
Add all the numbers from 1 to 200 in your head.
You’ve got 30 seconds!
1 + 2 + 3 + ... + 198 + 199 + 200
1 + 200 = 201
2 + 199 = 201
3 + 198 = 201
201 x 100 = 20,100

26. THE TRAVELLING SALESMAN PROBLEM
A travelling salesman travels door to door
through a number of towns and cities. The
problem – what’s the shortest route to take?
The answer to this problem is so important that
there is a $1 million reward for anyone who can
produce an efficient algorithm, or prove that
none exists…

27. THE TRAVELLING SALESMAN PROBLEM
Imagine you’re a travelling salesman, and you
need to visit a list of cities. The challenge is to
find the shortest route so you visit each city
once, before returning to your starting point.
You might imagine the best thing is to just
consider all the possible routes..? The method of
checking all the possibilities is a type of
algorithm, but is it efficient?

28. THE TRAVELLING SALESMAN PROBLEM
• For 3 cities, it works fine because there are
only 3 possible routes to check
• For 5 cities, there are 60 possible routes
• For 6 cities, there are 360 possible routes
• For 10 cities, there are over 1.8 million
possible routes. If a computer calculated 10
routes per second, it would take 2 days before
it found the shortest.

29. WANT TO LEARN MORE?
Head to thetrainingcollective.com.au to learn more
about our training options
• Learn to Code – FULL DAY training (TBA)
• WordPress for Business – FULL DAY training (Oct 5th)
• We also provide private consults and group training