{the jump}

Full-time 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 TA

• TA stands for 'Teaching Assistant'
• Our current TA is Cath Levett
• You will 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 Mon/Wed
• 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 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. (Codepen at first.)
  • BE A NEAT FREAK!!
  • Submit by midnight Sunday
    • Feedback will be given by midnight Wednesday

Homework Folder/Document Naming

• SHORT
• LOWER CASE
• NO SPACES, ONLY '_' (unless part of a URL, then '-')
• SEMANTICALLY NAMED
• 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...
• Avoid special characters (!@£$%^&*, etc.)

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?'

"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

• Not the brightest (not necessarily a problem)
• Did not practice (problem)
• Shit computer (broken trackpad)
• Did not complete.

David

• Works in sales...
• 'Yeah! Right! Got ya!!' (Not truthful about not understanding)
• Was not stupid
• 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
• Ended up looking stupid in front of everyone

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 with nothing valuable
  • unlikely to be able to create solutions reliably in real life

Rules of Struggling

• Struggle for 15 mins max
• Get up, walk away/do something else
• Try another 15
  • maybe have a quick google to get some inspiration
• Stop
• Contact me
  • (and later the TA)
  • (You can even ask Rob, as he's done [parts of] this course!) - in emergencies only!

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.

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 16 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
• Command line (git bash?)
• Next presentation