coding for beginners - future assembly 2016

CODING FOR BEGINNERSAmelia Schmidt @meelijane

ABOUT MEINTRODUCTIONS

‣ Formal training: Arts degree

‣ Past experience: Journalism, writing

‣ Training: Google ‣ Writing code for: 5 years ‣ Designing things for: 3 years

2

ABOUT YOUINTRODUCTIONS

‣ ???????????

2

LEARNING TO CODEAGENDA

‣ Hand-holding honeymoon

‣ Cliff of confusion

‣ Desert of despair ‣ Upswing of awesome ‣ Job ready!

2

5

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

IMPORTANT!CODING FOR BEGINNERS

PLEASE ASK QUESTIONS WHENEVER YOU WANT

CODING FOR BEGINNERS

WHY SHOULD YOU LEARN TO CODE?

CODING FOR BEGINNERS

CODING FOR BEGINNERS 3

The world of work is changing!

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

Learning to code is learning to learnCODING 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

It’s surprisingly very creativeCODING 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

It teaches you life skillsCODING FOR BEGINNERS

‣ Debugging

‣ Efficiency

‣ Paradigm shifting ‣ Minimalism ‣ Systems thinking

4

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

WHAT DOES IT TAKE TO WORK AS A PROGRAMMER?

CODING FOR BEGINNERS

Learning to code takes timeCODING 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

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

WHAT YOU NEEDCODING FOR BEGINNERS

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

5

Getting started todayCODING 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

HTML, CSS AND JAVASCRIPT

CODING FOR BEGINNERS

5CSS, HTML, JAVASCRIPT

CONTENT

PRETTY STUFF

COOL ANIMATIONS

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

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

HTMLCODING FOR BEGINNERS

5CSS, HTML, JAVASCRIPT

CONTENT

5CSS, HTML, JAVASCRIPT

<div class=“codingtext”></div>

TAG ATTRIBUTES

CLOSING TAG

5CSS, HTML, JAVASCRIPT

<div class=“codingtext”><span>Coding for beginners</span>

</div>

BLOCK LEVEL ELEMENT

INLINE ELEMENT

5CSS, HTML, JAVASCRIPT

<div class=“codingtext”><span>Coding for beginners</span>

</div>

BLOCK LEVEL ELEMENT

INLINE ELEMENT

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>

5CSS, HTML, JAVASCRIPT

‣ Chrome > Inspect element

‣ Chrome > View Source

Secrets of HTML

HTML

CSS

5CSS, HTML, JAVASCRIPT

EDIT EXISTING RULES

EDIT THIS TO ADD NEW

RULES

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

CSSCODING FOR BEGINNERS

5CSS, HTML, JAVASCRIPT

PRETTY STUFF

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

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.

5WHAT IS CSS?

Selectorselement (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)

5WHAT IS CSS?

Selectors

.big-box {background-color: red;

}

Selector

5WHAT IS CSS?

Selectors

.big-box .inner-box {background-color: red;

}

Nestedselectors

.big-box, .small-box {background-color: red;

}

Multiple selectors

5WHAT IS CSS?

Selectors

.big-box.green-box {background-color: red;

}

Bothselectors

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

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;

}

Declarationblock

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

5WHAT IS CSS?

Cascading style sheets

.big-box {height: 100%;display: block;background-color: red;

}

Declarationblock

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

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>

NestedHTML

elements

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.

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

5WHAT IS CSS?

Specificity

https://designshack.net/articles/css/what-the-heck-is-css-specificity

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/

5WHAT IS CSS?

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!

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

5WHAT IS CSS?

Box model

http://codepen.io/meeli/pen/pyoNej

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

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

JAVASCRIPTCODING FOR BEGINNERS

5CSS, HTML, JAVASCRIPT

COOL ANIMATIONS

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

5WHAT IS JAVASCRIPT?

Javascript uses…‣ Variables

‣ Objects

‣ Functions ‣ Arrays ‣ Prototypes

‣ Closures

‣ Numbers, strings, etc.

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

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

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

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

5HTML, CSS AND JAVASCRIPT

Check out all three working together!

http://codepen.io/meeli/pen/aNXydv

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

WHAT NEXT?CODING FOR BEGINNERS

Resources for youCODING 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

Tools you might want to tryCODING FOR BEGINNERS

‣ https://developers.google.com/blockly/

‣ http://getbootstrap.com/

‣ https://webflow.com/ ‣ https://codepen.io ‣ https://html5boilerplate.com/

4

MORE QUESTIONS?15CODING FOR BEGINNERS

THANK YOU!16INSERT CLASS TITLE