coding for beginners - future assembly 2016
TRANSCRIPT
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?
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