Slide deck for an absolute beginner's intro to learning to code (HTML, CSS and Javascript).

1. CODING FOR
BEGINNERS
Amelia Schmidt
@meelijane

2. ABOUT ME
INTRODUCTIONS
‣ Formal training: Arts degree
‣ Past experience: Journalism, writing
‣ Training: Google
‣ Writing code for: 5 years
‣ Designing things for: 3 years
2

3. ABOUT YOU
INTRODUCTIONS
‣ ???????????
2

4. LEARNING TO CODE
AGENDA
‣ Hand-holding honeymoon
‣ Cliff of confusion
‣ Desert of despair
‣ Upswing of awesome
‣ Job ready!
2

5. 5

6. The actual agenda:
AGENDA
‣ Why should you learn to code?
‣ What does it take to be a programmer?
‣ What are HTML, CSS and Javacript?
‣ What next?
4

7. IMPORTANT!
CODING FOR BEGINNERS

8. PLEASE ASK
QUESTIONS
WHENEVER YOU WANT
CODING FOR BEGINNERS

9. WHY SHOULD YOU
LEARN TO CODE?
CODING FOR BEGINNERS

10. CODING FOR BEGINNERS 3
The world of work is
changing!

11. Jobs that might include coding:
CODING FOR BEGINNERS
‣ Marketer (emails, landing pages, mini-sites)
‣ Designer (prototypes, collaborating with engineers)
‣ Project manager (working with engineers, designers, solving
problems)
‣ Small business owner (landing pages, brochureware sites)
‣ Youth worker, band manager, dog walker…
4

12. Learning to code is learning to learn
CODING FOR BEGINNERS
‣ School and uni teach us passive learning
‣ Most people who are working as programmers are self-directed
learners (autodidacts)
‣ Self-directed learning helps you developed a growth mindset
‣ A growth mindset means you don’t rely on other people or
organisations for your success - you are in control of your future!
4

14. It’s surprisingly very creative
CODING FOR BEGINNERS
‣ Logic and creativity aren’t mutually exclusive concepts
‣ Puzzle solving requires creativity in bucketloads
‣ Coding and engineering are about building things and inventing things
‣ Coding is about elegance, beauty and simplicity (like art)
4

15. It teaches you life skills
CODING FOR BEGINNERS
‣ Debugging
‣ Efficiency
‣ Paradigm shifting
‣ Minimalism
‣ Systems thinking
4

17. Oh and also…
CODING FOR BEGINNERS
‣ Coding pays really well!
‣ The average salary for a Web Programmer (in Australia) is
AU$59,751 per year. The skills that increase pay for this job the
most are Cascading Style Sheets (CSS) and PHP. Most people
move on to other jobs if they have more than 20 years' experience in
this field.
‣ You can start a business online easier than you can start a business in
a bricks and mortar store.
4

18. WHAT DOES IT TAKE
TO WORK AS A
PROGRAMMER?
CODING FOR BEGINNERS

19. Learning to code takes time
CODING FOR BEGINNERS
‣ HTML, CSS and Javascript are basic building blocks
‣ There’s always something that seems simple that requires more
learning
‣ The internet is changing and quite quickly
‣ Like any skill, you need to practice
‣ Some may say learning to code is a never-ending task…
4

22. But the good news is you can do it!
CODING FOR BEGINNERS
‣ You don’t need to be good at maths
‣ You don’t need a degree
‣ You don’t need an expensive computer or special equipment
‣ You don’t need a teacher
4

23. WHAT YOU NEED
CODING FOR BEGINNERS

24. What you need:
CODING FOR BEGINNERS
‣ Beginner’s mind: be humble and open-minded
‣ Patience: be ready to fail and try again
‣ Focus: be ready to concentrate for long periods of time
‣ Snacks: stay hydrated and keep your sugars up!
‣ Attention to detail: single characters can trip you up
‣ Ability to Google: asking the right questions is the best skill
4

25. 5

26. Getting started today
CODING FOR BEGINNERS
‣ HTML, CSS and Javascript can be developed on your computer and
viewed without being on the internet
‣ You should get a text editor - download atom.io (free)
‣ There are some basics we need to have: check out http://
htmlshell.com/
4

27. HTML, CSS AND
JAVASCRIPT
CODING FOR BEGINNERS

28. 5CSS, HTML, JAVASCRIPT
CONTENT
PRETTY STUFF
COOL
ANIMATIONS

29. 5CSS, HTML, JAVASCRIPT
HTML is the core, CSS is the chocolate, JS is the
sugar
‣ HTML must be good on its own - understandable to people who might
be disabled, blind, or unable to see CSS and JS for some reason
‣ CSS should make things look nice, but without CSS it should still work
‣ JS is the final sugary layer - extra jazzy for those who can see it, but
you won’t suffer if you can’t

30. KEY OBJECTIVES
Get a basic index.html page
going
EXERCISE
AGENDA
10 minutes 1. Download a text editor
2. Make a folder
3. In that folder, make index.html
4. Go to htmlshell and copy the basic shell
5. Save the file and view
DELIVERABLE
Your first working code!
7
RESOURCES
atom.io
htmlshell.com

31. HTML
CODING FOR BEGINNERS

32. 5CSS, HTML, JAVASCRIPT
CONTENT

33. 5CSS, HTML, JAVASCRIPT
<div class=“codingtext”>
</div>
TAG ATTRIBUTES
CLOSING TAG

34. 5CSS, HTML, JAVASCRIPT
<div class=“codingtext”>
<span>Coding for beginners</span>
</div>
BLOCK LEVEL
ELEMENT
INLINE
ELEMENT

35. 5CSS, HTML, JAVASCRIPT
<div class=“codingtext”>
<span>Coding for beginners</span>
</div>
BLOCK LEVEL
ELEMENT
INLINE
ELEMENT

36. 5CSS, HTML, JAVASCRIPT
https://simon.html5.org/html-
elements
<div> <span> <img> <a> <em> <strong>
<input> <h1> <h2> <code> <video> <p>
<br>
<table>
<select> <section>

37. 5CSS, HTML, JAVASCRIPT
‣ Chrome > Inspect element
‣ Chrome > View Source
Secrets of HTML
HTML
CSS

38. 5CSS, HTML, JAVASCRIPT
EDIT EXISTING
RULES
EDIT THIS TO
ADD NEW
RULES

39. KEY OBJECTIVES
Make a div
EXERCISE
AGENDA
10 minutes 1. Go to your index.html file
2. Make an html element
3. Refresh the page in your browser
DELIVERABLE
An html element
7
RESOURCES
atom.io
htmlshell.com

40. CSS
CODING FOR BEGINNERS

41. 5CSS, HTML, JAVASCRIPT
PRETTY STUFF

42. 5WHAT IS CSS?
Cascading style sheets
‣ A style sheet consists of a list of rules. Each rule or rule-set consists of
one or more selectors, and a declaration block.
.big-box {
background-color: red;
}
Rule

43. 5WHAT IS CSS?
Cascading style sheets
‣ Selectors may apply to:
‣ all elements of a specific type, e.g. the second-level headers h2
‣ elements specified by attribute, in particular:
‣ id: an identifier unique within to the document
‣ class: an identifier that can annotate multiple elements in a
document
‣ elements depending on how they are placed relative to others in the
document tree.

44. 5WHAT IS CSS?
Selectors
element (HTML tags, e.g. input, div)
#id (only one ID per element)
.class (a group of elements)
[data-attribute] (describes the function)
* (universal selector, targets everything)
!important (overrides everything)
:state (e.g. :hover, :focus)
:pseudo-classes (used for CSS logic)

45. 5WHAT IS CSS?
Selectors
.big-box {
background-color: red;
}
Selector

46. 5WHAT IS CSS?
Selectors
.big-box .inner-box {
background-color: red;
}
Nested
selectors
.big-box, .small-box {
background-color: red;
}
Multiple
selectors

47. 5WHAT IS CSS?
Selectors
.big-box.green-box {
background-color: red;
}
Both
selectors

48. 5WHAT IS CSS?
Selectors
<input id=“search” class=“green” type=“text”>
* { font-family: sans-serif; }
input { width: 100; }
#search { position: relative; }
.green { color: green; }
[type=“text] { float: left; }
HTML
CSS

49. 5WHAT IS CSS?
Declaration blocks
‣ A declaration block consists of a list of declarations in braces.
‣ Each declaration itself consists of a property, a colon (:), and a value.
‣ If there are multiple declarations in a block, a semi-colon (;) must be
inserted to separate each declaration.
.big-box {
background-color: red;
}
Declaration
block
https://en.wikipedia.org/wiki/Cascading_Style_Sheets

50. 5WHAT IS CSS?
Cascading style sheets
.big-box {
height: 100%;
display: block;
background-color: red;
}
Declaration
block
https://en.wikipedia.org/wiki/Cascading_Style_Sheets

51. 5WHAT IS CSS?
Inheritance
‣ Inheritance is a key feature of CSS
‣ Descendant elements may inherit CSS property values from any
ancestor element enclosing them.
<div class=“box”>
<p class=“paragraph”>
<span>CSS is awesome!</span>
</p>
</div>
Nested
HTML
elements

52. 5WHAT IS CSS?
Inheritance
‣ In general, descendant elements inherit text-related properties, but
box-related properties are not inherited. Properties that can be
inherited are colour, font, letter-spacing, line-height, list-style, text-
align, text-indent, text-transform, visibility, white-space and word-
spacing.
‣ Properties that cannot be inherited are background, border, display,
float and clear, height, and width, margin, min- and max-height and -
width, outline, overflow, padding, position, text-decoration, vertical-
align and z-index.

53. 5WHAT IS CSS?
Inheritance
<div class=“box”>
<p class=“paragraph”>
<span>CSS is
awesome!</span>
</p>
</div>
.box {
color: pink;
}
This text
will be pink

54. 5WHAT IS CSS?
Specificity
https://designshack.net/articles/css/what-
the-heck-is-css-specificity

55. 5WHAT IS CSS?
Specificity
‣ CSS “cascades” so the rules at the top of the stylesheet are overridden
by the rules at the bottom
‣ Two conflicting rules with the same selector: the later rule will win
‣ Different types of selector (element, id, class, etc) have different
“points” of specificity and the more points you get, your rule will win
the fight
‣ Specificity wars are often won with the !important selector, which is
how the wars turn in to an arms race
‣ http://www.standardista.com/css3/css-specificity/

56. 5WHAT IS CSS?

57. 5WHAT IS CSS?
Specificity
‣ The three-number rating is a matrix - no matter how many classes you
have, an ID will override, and no matter how many IDs you have, an
element will override
‣ Specificity is tricky, and you get a feel for it with experience!

58. 5WHAT IS CSS?
Box model
‣ The CSS box model is essentially a box that wraps around every
HTML element. It consists of: margins, borders, padding, and the
actual content.
‣ The box model is important to understand because it explains why
margin and padding are different
‣ border-box is a standard and very consistent box model.
‣ http://www.w3schools.com/css/css_boxmodel.asp

59. 5WHAT IS CSS?
Box model
http://codepen.io/meeli/pen/pyoNej

60. 5WHAT IS CSS?
Floats
‣ Float an element to make it behave like a helium balloon
‣ float: left;
‣ float: right;
‣ There is no “float: centre;” or vertical floats
‣ Floating an element will make it sit at the top left or top right of its
container, and it will also make it have meaningful size because of that

61. KEY OBJECTIVES
Change the colour of a simple
html element
EXERCISE
AGENDA
10 minutes 1. Using the html element you made in the
last exercise, give it a colour
2. You can use inline or linked CSS
3. Try other things if you feel like it!
DELIVERABLE
A coloured element
7
RESOURCES
atom.io
htmlshell.com

62. JAVASCRIPT
CODING FOR BEGINNERS

63. 5CSS, HTML, JAVASCRIPT
COOL
ANIMATIONS

64. 5WHAT IS JAVASCRIPT?
Javascript
‣ “JavaScript (/ˈdʒɑːvəˌskrɪpt/) is a high-level, dynamic, untyped, and
interpreted programming language.”
‣ Translation: Javascript is hard, complicated and very loose
‣ Javascript is used to make interactivity on the web

65. 5WHAT IS JAVASCRIPT?
Javascript uses…
‣ Variables
‣ Objects
‣ Functions
‣ Arrays
‣ Prototypes
‣ Closures
‣ Numbers, strings, etc.

66. 5WHAT IS JAVASCRIPT?
Javascript is a programming language
‣ HTML and CSS are not programming languages - HTML is a “markup
language” and CSS is a “stylesheet language”
‣ Javascript is a programming language - it can do things like
‣ Change the HTML
‣ Trigger events
‣ Move things around
‣ Make things appear and disappear
http://codepen.io/meeli/pen/xVMLYR

67. 5WHAT IS JAVASCRIPT?
Javascript is NOT a programming language…
‣ “JavaScript is not a programming language in strict sense. Instead, it
is a scripting language because it uses the browser to do the dirty
work. If you command an image to be replaced by another one,
JavaScript tells the browser to go do it.”
http://www.quirksmode.org/js/intro.html

68. 5WHAT IS JAVASCRIPT?
Be careful!
‣ Javascript is dangerous. It can manipulate elements on a page, so if
someone manages to get their Javascript in to your page, they can
change the content of your website.
‣ Javascript can be used to do all sorts of complicated programming -
but for styling and enhancing web pages it’s usually not too complex
‣ Javascript is going to be the hardest to get your head around.
http://www.quirksmode.org/js/intro.html

69. 5WHAT IS JAVASCRIPT?
Why is Javascript currently really popular?
‣ Javascript can be used to write HTML - so now people program the
web in Javascript
‣ A lot of popular web frameworks are now Javascript-based, like React
and Angular
‣ Programming in Javascript is much harder than writing HTML, CSS
and Javascript like we’re doing now

70. 5HTML, CSS AND JAVASCRIPT
Check out all three working together!
http://codepen.io/meeli/pen/aNXydv

71. KEY OBJECTIVES
Write a simple piece of
Javascript
EXERCISE
AGENDA
10 minutes 1. Using the htmlshell boilerplate, add some
Javascript to your page
2. Add jQuery too
3. Write a simple Javascript function
4. Have a play!
DELIVERABLE
Your first ever Javascript
function
7
RESOURCES
atom.io
htmlshell.com

72. WHAT NEXT?
CODING FOR BEGINNERS

73. Resources for you
CODING FOR BEGINNERS
‣ General Assembly’s other workshops and courses
‣ https://www.sitepoint.com/
‣ https://www.lynda.com/
‣ https://www.codecademy.com/
‣ https://teamtreehouse.com/
‣ https://www.coursera.org/
‣ meetup.com
4

74. Tools you might want to try
CODING FOR BEGINNERS
‣ https://developers.google.com/blockly/
‣ http://getbootstrap.com/
‣ https://webflow.com/
‣ https://codepen.io
‣ https://html5boilerplate.com/
4

75. MORE QUESTIONS?
15CODING FOR BEGINNERS

76. THANK YOU!
16INSERT CLASS TITLE