{the jump}

Bootcamp

On-boarding Session

Session 1

Order of Business

1. Tutor intro
2. TA intro
3. Class Intro
4. Day-to-day at { the jump }
5. Role of the TA
6. Sessions
7. Homework
8. Errors, mistakes and ego
9. Endgame for the course
10. Resources
11. The Web Platform
12. Course Timetable (approx.)

Tutor Intro

About the TAs

• TA stands for 'Teaching Assistant'
• Our current school TAs are:
  • Kieran Croft
  • Jon Pitans
    • Both have TA after their slack names
    • Kieran is your first port of call (Jon is fallback)
• You should not need them yet
  • Typically we allow access to the TA in the CSS part of the course, before then you your tutor will be your point of contact for any issues.

Class Intro

Introduce yourselves!

• Name
• Occupation (as much as you're comfortable with)
• Level of web development experience
• What you're hoping to gain from the course
• What type of machine are you on? (windows/mac/linux?)

Sessions

• Sessions for this cohort are Tue/Thu
• 1830 - 2130
• Sessions are recorded and shared with you so you can revisit later in the course
  • obvs this is private to the cohort
  • If we ever need to use something for promotional purposes we'll ask everyone before doing so. (In general, we don't...)
• Being able to see you, particularly remotely, is a part of teaching. It is therefore required that you have your camera switched on during sessions.
  • Also, if possible, please have a photo and your actual name and cohort, e.g.  [C.13] Joe Bloggs on your slack account

Homework

• Homework is set throughout the course
• As this homework reaches an appropriate standard we will push it to your github/codepen accounts to create your portfolio
• You get out what you put in​
• Submitting
  • Methods vary
  • BE A NEAT FREAK!!
  • Submit by midnight Monday
    • Feedback will be given by end of (midnight) Thursday

Homework Folder/Document Naming

• SHORT
• LOWER CASE
• NO SPACES, ONLY '_' (unless part of a URL, then '-')
• SEMANTICALLY NAMED (so about.html, not file002.html)
• NO [NEAR] DUPLICATES
• DO NOT BEGIN WITH NUMBERS
  • ​If numbers are involved, then 001, not 1, so that you don't get 1, 10, 2, etc
  • in general, just don't...

How to win at this...

This course is:

• A marathon, not a sprint!
• Consistency is key
• Practice is everything!!

Errors, Mistakes and Ego

• The 'Age of Image' - where appearance is all
  • People are told that making mistakes makes them look bad
  • ...and that not knowing makes them worthy of ridicule
  • but actually, it is the absolute key to you learning
  • So 'VEGAS RULES': Here is where you make mistakes in safety
  • HOUSE RULE: NEVER ridicule another during learning
• How I became a really good developer:
  • TL;DR - I fucked up. All the time. A lot. (Still do. Every day.)
  • But I practice (Mars Rover)
  • Peers who didn't took much longer to progress
• Ego (skiing)
  • You are all at different levels
  • The person you should compete against is: 'Yourself - are you making the grade? / Are you developing confidently?'

So get your hands dirty!!

• In this job you need to get your hands dirty!
• Finding errors and fixing them is a MAJOR part of it!
• Many will try to shy away from it believing that a solved problem is more important than an understanding of the solution
• It is this flight time that makes you a good dev
• Try lots of things out
• Make lots of mistakes
• Get used to the feeling until errors are just an everyday thing
  • otherwise you're like a person who's scared of getting hit and who's never had a fight applying for a job as door-person!

Attention to Detail

• During the course we go through the absolute basics of everything in meticulous detail.
• It is tempting to think "I already know this" BUT
• Professionally you will be required to have attention to detail and there is a difference between coding and coding well/at a commercial standard
  • in the same way there's a difference between a steak cooked by a mediocre chef and a master chef!
• Knowing things 'in depth' and having that knowledge become reflexive will help you in interviews and later in the workplace to become a respected coder.

Rules of Struggling

1. Struggle for 15 mins max
2. Get up, walk away/do something else
3. Try another 15
   • maybe have a quick google to get some inspiration
   • Talk to your rubber duckie too!
4. Stop
5. Contact me
   • (and later the TAs)
   • Maybe Russell if he's free (he's really nice)
   • In emergencies, ask Robert to get you some help

"Comparison is the thief of joy." - Theodore Roosevelt

• Don't compare yourself to others around you
• You don't know their background and experience
• Even very capable people will struggle at some point
• and everybody has a meltdown at one stage or another.
• Compare yourself to 'you at the start of the course'
• Give it a chance...
• TALK TO US, if you're struggling!
• RELAX!!! ;)

Comparison with peers

• This is a long journey
• It should be fun and exciting!
• Get to know your classmates
  • traditionally the class forms a whatsapp group
  • talk to them and talk to us
• Worry less! (especially at the beginning)
  • "Today's mountain is tomorrow's mole hill!"
• Be excitable!
• Play more! (with the tech)

Morale

Student Case Studies

Why would I do that?

• With everything I teach I like to make sure you have the why and not just the what
• I've taught a few hundred people
• The patterns for success/failure repeat
• The names here are not their real names!!
  • And sometimes it's an amalgamation of people
  • They are not all from this school/course but the patterns repeat...

Michael

• Took time to get concepts (not necessarily a problem)
• Did not practice (BIG problem)
• Shit computer (broken trackpad)
• Did not complete.

David

• Works in sales...
• 'Yeah! Right! Got ya!!' (Not truthful about not understanding)
• Would have been capable but...
• Did not practice
• Was not focussed
• Winged it & looked for short-cuts
• Didn't do what I asked him
• Always preferred his way (Why hire a tutor then?)
• Did not understand that each line of code is an instruction and you must know what it means
• It did not end well for him

Emma

• Liked to be perfect
• Hated errors
• Would become agitated (to the point of quitting) when they occurred
• Tried to hide her lack of understanding
• Would not submit homework if not 'perfect'
• Would not struggle
• Technically completed the course
  • yet walked away having missed the real point
  • unlikely to be able to create solutions reliably in real life

Neve/Chris

• Neve - question machine gun!
  • Questions are important!
  • Please ask BUT maybe wait to see if answered in the upcoming slides
• Chris - Flow breaking
  • Genuinely nice guy
  • Questions he asked were VERY germane!
  • but ended up breaking the flow
• Help me to maintain flow & velocity
  • 1 question = fine (if too big I'll answer later)
  • + follow up/clarification = sure, but...
  • If bigger than that try to ask in question breaks

The Deal between you and I

1. WE are going to work together to make you a developer
2. I cannot do that alone
3. YOU must struggle and fight and work hard
4. I will show you the good paths
5. YOU must follow what I say and do what I ask of you
6. YOU must practice and own your own learning
7. YOU must communicate with me
8. Being dishonest diminishes this relationship and will slow your performance
9. I will give my all to make you a developer
10. YOU will achieve it, if you work hard and respect this deal.

Back to it...

End Game

• Upon completion you will receive a certificate of completion (amongst other goodies!)
• If Career Assistance is relevant to you
  • We will engage that function towards the end of the course
  • Robert will be your point of contact
  • Endorsement: We will endorse those who complete the program to the standard required

The course itself

Course Timetable

• The timetable works through the entire model
• It is approximate and subject to change
• Both now, and at the start of the JavaScript section, it will be slow BUT it will speed up
• We will start with the 'front end' (or interface) and work backwards up the stack.

Course Portfolio

• Throughout the course you will build a portfolio
• This will not start for a few weeks yet!
• Initially, can you:
  • join trello
  • fork this board
    • Give it a name like "Michael Johnson [C.13] Portfolio" so I can see who's it is!

Resources

• AT ANY POINT DURING THE COURSE YOU ARE COMPLETELY AT LIBERTY TO GOOGLE THE ANSWER.
• THIS IS SOMETHING ALL PROFESSIONAL DEVS DO ALL DAY LONG! THERE IS NO SHAME IN IT WHATSOEVER!
• IT IS KEY TO HOW YOU LEARN.
• StackOverflow (for answers) (Be aware, it can be wrong and unkind!)
• MDN (For guides and references)
• Frontend Masters (Really good!)
• Egghead.io (Good, with some great free courses)
• Github (Used later, but sign up now: https://github.com/join)
• Codepen (You should already have an account)

Code ages fast! Be wary of code >~3 years old.

DON'T TRY TO READ THE ENTIRE INTERNET. Stick with what I give you and ask me questions if you don't understand

The Web Paradigm

Some truths

• It's a brilliant shit-show
  • Browser wars
• Mistakes can never be undone due to backwards compatibility, so there's lots of 'trash'/legacy lying around
• It is uniquely powerful in its generics - i.e. the same basic technologies can solve infinite amounts of problems
• It is complex
• There is regularly more than one answer to the same problem
  • Some answers are better than others for long-term maintenance!

Brief History

• AlohaNet and ARPANET
• Full History
• Browsers
• Growth of the internet

N.B. All this means that the web is peculiar:

• Cross-browser differences
• Device capabilities

• Back-End (Server): Programming for the machine that gives you the document. May include:
  • Sending you back a document
  • Getting, processing & returning data from a database
  • Calling someone else's servers to get information
  • Keeping 'state' for your application (think: items in catalog)
  • Access Control
    • Things held here (outside served folders) are private
• Front-End (Client/Browser): Programming for what happens to the document when it is with the user and the user interacts with it. May include:
  • Document manipulation (show/hide)
  • User Events: Responding to clicks, hovers, etc.
  • Programmer Events: Calling server for more information
  • Manage local resources (e.g. localStorage, etc.)
  • Local programming (Maths operations, etc.)

So, where do we start?

We'll start on the front-end

• Because [initially] it's less technical
• Our 3 technologies are:
  1. HTML
  2. CSS
  3. JavaScript (JS)
• The first 4 sessions are HTML
  • key for good SEO and accessibility/usability
• Then 12 session of CSS
  • For appearance
• Then the rest is JavaScript
  • Which controls all the programming/'behaviour'
  • (except for 1week of git/shell and 2.5 weeks of devops)

How they work together

Let's get started

• Hidden files
  • mac: cmd + shift + .
  • linux: ctrl + h
  • win: (In file explorer) View > Show > Hidden items
• VSCode Setup
• Next presentation