Merge pull request #57 from foundersandcoders/precourse

First draft of precourse docs

coursebook/general/house-rules.md

@@ -10,4 +10,7 @@
 
 + **20-minute rule**. Struggle is good, but not too much of it. As a general rule, if you cannot solve a problem within 20 minutes, then stop and talk to somebody about it (there should be a timer on your desk)
 
-+ **No frameworks**. For the first 10 weeks of the course, stick to vanilla JavaScript. That means no frameworks, backend or frontend (i.e. no Bootstrap/jQuery etc...). This is for the benefit of your understanding of JavaScript; trust us (and all the previous FAC cohorts) – it works!
++ **No frameworks**. For the first 10 weeks of the course, stick to vanilla JavaScript. That means no frontend frameworks (i.e. no Bootstrap/jQuery etc...). We want you to build your skills without being reliant on these.
+  + By solving problems using the foundations of the language first, you will begin to understand what problems frameworks were built to simplify. This will let you make more effective judgements on which technologies to use in future.
+  + It arms students with the flexibility to switch between technologies, as the popularity of each one can shift.
+  + F&C values are heavily aligned with open source software. You should be better able to contribute to and improve upon existing technologies if you have a deeper understanding of what is going on.

coursebook/precourse/README.md

@@ -1,3 +1,5 @@
-## Pre-course
+# Pre-course
 
-To contain a menu to the files inside this folder.
+- [Learning Outcomes](learning-outcomes.md)
+- [Resources](resources.md)
+- [Installation list](installation-list.md)

coursebook/precourse/installation-list.md

@@ -0,0 +1,38 @@
+# Installation List
+
+**We'll be having an installation party before the beginning of the course. If you decide to install solo and run into difficulties, just get in touch.**
+
+For OSX Users:
+
+- Install [Brew](http://brew.sh/)
+- Optional: iTerm2
+
+For Linux Users:
+
+- You're set
+- Optional: [Linuxbrew](http://linuxbrew.sh/) (if you don't want to sudo everything)
+
+For Windows Users:
+
+- [Install / dual-boot Ubuntu](https://www.ubuntu.com/download/desktop) – we can help:
+
+Chromebook Users:
+
+- Crouton (or remove ChromeOS and install Ubuntu)
+
+For Everyone:
+
+- Use homebrew/linuxbrew (if you have it) to install [Node](https://nodejs.org/en/download/package-manager/). [This guide](http://blog.teamtreehouse.com/install-node-js-npm-linux) might help you if you're on Linux.
+- Install [Atom](https://atom.io/) - download the file or click "Build from source"
+- Install Chrome
+- [Setup SSH access to your Github account](https://help.github.com/articles/generating-an-ssh-key/)
+- Atom plugins:
+  - linter & linter-eslint
+  - open-in-browser
+  - autocomplete-paths
+  - pigments
+  - color-picker
+- Chrome extensions:
+  - JSONView
+  - Google Cast
+  - Postman

coursebook/precourse/learning-outcomes.md

@@ -0,0 +1,50 @@
+# Learning Outcomes
+
+The purpose of the pre-course material is to make sure everyone is familiar with some key concepts we'll be using throughout the course. The learning curve at FAC is steep, and a solid grounding in the fundamentals will help you immensely.
+
+## Core Learning Outcomes
+
+### Command Line
+
+Use the command line to navigate around your computer
+
+### Git and GitHub
+
+- Understand the purpose of using Git and GitHub
+- Know basic git commands like git add, git commit and git push
+
+### Markdown
+
+- Know markdown syntax well enough to create readmes
+
+### Semantic HTML
+
+- Use new HTML5 tags that will improve semantics
+
+### CSS
+
+- Be able to apply positioning and layout techniques to solve common problems
+- Understanding basic CSS rules
+- Understand the differences between em and rem units and how to combine them effectively
+
+### JavaScript
+
+- Use common array methods
+- Understand what a JavaScript object is
+- Understand what a callback is, when you would use one, and how callbacks relate to asynchronicity
+- Understand scope in JavaScript, and how it affects your code
+
+### DOM Manipulation
+
+- Understand what the DOM is
+- Create, access, and style a DOM element
+
+### APIs
+
+- Understand the relation between a server, API and client
+
+### Chrome Dev tools
+
+- Use Inspect Element to view the HTML and CSS of a webpage
+- Use the Sources tab to set breakpoints
+- Use the browser console to view console logs and error messages

coursebook/precourse/resources.md

@@ -0,0 +1,69 @@
+# Resources
+
+F&C is an intense course, and you should make sure you're well-rested and ready to work when you get here. Below is a list of material that will help you to be prepared for the start of the course. The list might look a bit long, but each resource itself is quite short. Doing bitesized chunks little and often should make this manageable before the course begins. Your curriculum is designed with the assumption that you'll be familiar with the high priority resources by week one.
+
+Please do not forget that **we don't use frameworks at FAC** – ignore Bootstrap and JQuery, and make sure you work in vanilla HTML, CSS and JavaScript. Head over to our [house rules](../general/house-rules.md) to find out why.
+
+You should also refrain from using ES6 syntax for now, as it is not yet supported across all browsers. (More on ES6 to come later on in the course.)
+
+If you have any problems with the following material, feel free to reach out to us through your cohort's gitter channel!
+
+## High priority
+
+### Command Line
+
+Learn Python The Hard Way has a great [Command Line Interface Crash Course](https://learnpythonthehardway.org/book/appendixa.html). Use this to become familiar with navigating around your computer without using a GUI.
+
+### Git & Github
+
+[Udacity's git & github course](https://www.udacity.com/course/how-to-use-git-and-github--ud775) is a brilliant set of videos. The course is quite long, so don't worry about completing the whole thing. We will go into more depth in week 1. For now, _just complete lesson 1 (Navigating A Commit History section)_.
+
+### Markdown
+
+No github repo is complete without proper documentation. Follow this [markdown tutorial](http://www.markdowntutorial.com/lesson/1/) to learn the syntax that you need to write a banging Readme!
+
+### Semantic HMTL
+
+[Here](https://www.youtube.com/watch?gl=GB&hl=en-GB&v=OGg8A2zfWKg) is a 6 minute youtube video to introduce you to the concept of the semantic web. You will be expected to write semantically during week 1, so brush up with the following:
+
+Read [this article](https://www.smashingmagazine.com/2013/01/the-importance-of-sections/#the-problem-with-div) to stop using too many divs (divitis). Don't be fooled by the scroll bar - the article isn't particularly long, but there are many comments below.
+
+Head to [this article](https://codepen.io/mi-lee/post/an-overview-of-html5-semantics) for more specific examples of useful semantic tags.
+
+
+### CSS
+
+This section includes condensed articles/videos that will be beneficial when tackling CSS throughout the course;
+
+1. [**Learn Layout**](http://learnlayout.com) is a helpful, lightweight, well-ordered guide that covers a lot of concepts in CSS to help you understand how to create a super basic layout. Additional links are provided in each section for more detailed explanations of concepts.
+2. [**Relative & Absolute Positioning**](https://www.youtube.com/watch?v=aFtByxWjfLY) this great 7 minute video will cover the position property, after watching you’ll be able to apply positioning techniques with layout techniques from the [Learn Layout](http://learnlayout.com) video to accomplish many important tasks like [centering](https://css-tricks.com/centering-css-complete-guide/).
+3. [**CSS Specificity**](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/) is an essential guide to understanding how CSS rules are applied and how CSS works in general.
+4. [**Rem/Em Units**](https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984) this is another essential guide to help you understand the differences between em and rem units and how to combine them effectively.
+
+### JavaScript
+
+1. [Understanding The Weird Parts: First 3.5 hours](https://www.youtube.com/watch?v=Bv_5Zv5c-Ts) will help build a deeper understanding of many of JavaScripts core concepts. Followed by...
+2. [What the heck is the event loop anyway](https://www.youtube.com/watch?v=8aGhZQkoFbQ) is a half-hour video that you may want to come back to repeatedly throughout the course. It gives a bit of an understanding about how everything fits together and a nice introduction to the concept of callbacks.
+
+## Recommended
+
+### DOM Manipulation
+
+1. [Call Me Nick - DOM Manipulation Basics](http://callmenick.com/post/basics-javascript-dom-manipulation) will cover a lot of the basics.
+2. [Appspot's DOM Tutorials: Exercises 1,2 & 3 only](https://dom-tutorials.appspot.com/static/index.html) will help put that into practice.
+
+### Intro to HTTP & APIs
+
+[Learn APIS: First 3 chapters](https://zapier.com/learn/apis/) - 3 articles with interactive questions at the end to introduce HTTP theory.
+
+### Chrome Dev Tools
+
+[Free Code Camp: Chrome Developer Tools](https://www.freecodecamp.com/map) has about 30 minutes worth of video content with quizzes after each video.
+
+### Practical Project
+
+The main [objective](learning-outcomes.md) of your precourse material is to become comfortable with the topics in the material above. However, from our experience, you'll find working on a personal project _very_ useful to cement this knowledge. We recommend that you build (a calculator)[FCC Advanced Front End Development Projects](https://www.freecodecamp.com/challenges/build-a-javascript-calculator)], to apply some of what you've learnt in these resources. Make sure to host your project on github pages. Remember, no frameworks ;)
+
+Rather than using Codepen or JS Fiddle, you should do this directly with your text editor, terminal and browser. Start by creating your repo on Github and try to stick to the command line for adding, commiting and pushing your changes as you go. Don't forget to add some documentation ;)
+
+Have fun, and don't hesitate to use your gitter channel! If anyone has already made a calculator and feels that they need a different challenge, please message one of us on there.