Order of Business

1. Introductions
2. Housekeeping
3. Role of the TA
4. Homework workload
5. How to succeed
6. Expectations and results
7. Resources
8. The Web Platform
9. Course Timetable (approx.)

Tutor Intro

TA Intro

Class Intro

Introduce yourselves!

• What is your name?
• What do you do? (no pressure to overshare)
• Do you have experience coding?
• What are your goals for the course?
• What is your favourite app?

Housekeeping

• The downstairs doors lock at 6:30pm
• We are in unit 3.10
• Use whichever buzzer panel you can get to
• Press '3 1 0 call'
• If we buzz you in, go quickly through any doors into the lobby
• WIFI
  • redclarity5g
  • unit310e1
• ​Kitchen just around the corner
• Toilets
  • Male up 1 floor
  • Female down 1 floor
  • Keys

Homework

• Homework is set throughout the course
• Expect to spend around nine hours each week outside of class on homework. 
• We will curate the best pieces of homework and push them to your github accounts to build your portfolio
• You can only get out what you put in​!
• If you don't do your homework, you won't have anything to build a portfolio with.

Role of the TA

The teaching assistant is here to help you with:

• questions about the homework outside of the lessons
• questions about the lessons during the lesson breaks.
• general questions about bootcamping into tech.
• motivation and positivity!

How to win at this...

Errors, Mistakes and Ego

• The 'Age of Image' - where appearance is everything
  • 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: 'Your past self - are you making the grade? / Are you improving?'

Cautionary Tales

Why tell these tales?

• 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
• All names have been changed!!
  • And sometimes these names represent an amalgamation of people

Alex

• Not the brightest (not necessarily a problem)
• Did not practice (problem)
• Shit computer (broken trackpad) - did take action!
• Failed to complete the course.

Taylor

• Salesperson...
• 'Yeah! Right! Got ya!!' (hid weaknesses)
• Was not stupid
• Did not practice
• Lacked focus
• Often winged it & looked for short-cuts
• Didn't follow instructions, preferred their way.
• Did not understand the importance/value of understanding the instruction in each line of code
• Embarrassed themselves in-front of others.

Jessie

• Perfectionist
• Afraid of errors
• Would become frustrated and quit when errors occurred
• Tried to hide their lack of understanding
• Wouldn't submit homework because it wasn't 'perfect'
• Refused to struggle/grind
• Technically completed the course
  • did not walk away with all the valuable soft skills
  • unlikely to be able to reliably solve problems  in real life production scenarios

Jordan/Rory

• Jordan - question machine gun!
  • Questions are very important! Please ask!
  • BUT they are often covered on the next slide
• Rory- Flow breaker
  • Genuinely nice person
  • Questions they asked were VERY relevant.
  • Often broke the flow.
• Help us to maintain flow & velocity
  • 1 question = fine (if too big I'll answer later)
  • + follow up/clarification = sure, but...
  • If it's a bigger question or more of a tangent then please try to ask in the breaks.

Our cooperation

1. WE are going to work together to make you a developer
2. THE INSTRUCTOR cannot do that alone
3. YOU will struggle and grind and work hard
4. THE INSTRUCTOR will show you the good paths
5. YOU must follow what we say and do what we ask of you
6. YOU must practice and take charge of your learning
7. YOU must communicate with us
8. Hiding your weaknesses prevents cooperation and could risk you falling behind! Please ask for help!
9. THE SCHOOL will put in 100% to make you a developer
10. YOU will make it, but only if you work hard and cooperate.

Back to it...

End Game

• Upon completion you will receive a certificate of completion
• If Career Assistance is relevant to you:
  • We will talk about that more towards the end of the course
  • Robert will be your point of contact
  • Endorsement: We will only endorse those who complete the program to the standard required

Course Timetable

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

But what does all that stuff mean?

Resources

• 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
• Codepen

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

Throughout the course you are completely at liberty to GOOGLE THE ANSWER.

This is something EVERY professional dev does ALL DAY LONG.

There is no shame in it whatsoever. In fact, it will help you learn!

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
  • 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
• Graceful degradation & polyfills

• 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)
  • Responding to clicks, hovers, etc.
  • Calling server for more information
  • Manage local resources (e.g. localStorage, etc.)
  • Local programming (Maths operations, etc.)

Codalong & Go live

https://github.com/join

Required Reading

1. HTML tag cheatsheet
2.  https://ogp.me
3. https://metatags.io

Exercise

1. Try making a basic HTML site in code pen by filling this template about your favourite animal, hobby, destinations etc.