# Before you start the course

The purpose of our [precourse material](#precourse-material) is to make sure that everyone is familiar with the key concepts we will be using throughout your time here. A solid grounding in the fundamentals will help you immensely.

Please make sure you have finished the precourse material and installed the software on our [Installation List](https://founders-and-coders.gitbook.io/coursebook/src/course/precourse/installation-list) before day 1 of your course.

We will be having an installation party shortly before you arrive. If you are using a **Windows OS** then attending this installation party is **crucial**. But if you are unable to attend, you can also do this by yourself. If you run into any difficulties, please get in touch.

## Precourse Material

1. [Command Line](#command-line)
2. [Git & GitHub](#git-and-github)
3. [Markdown](#markdown)
4. [Semantic HTML](#semantic-html)
5. [CSS](#css)
6. [DOM Manipulation](#dom-manipulation)
7. [SQL](#SQL)
8. [Practical project](#practical-project)

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.

If you have any problems with the following material, feel free to reach out to your peers and FAC Staff through your cohort's Slack channel!

### Command Line

*Learning outcome:*

* Be familiar with navigating around your computer without using a Graphical User Interface (GUI).

*Resources:*

* Learn Python The Hard Way has a great [Command Line Interface Crash Course](https://learnpythonthehardway.org/book/appendixa.html).

### Git & GitHub

*Learning outcomes:*

* Understand the purpose of using Git and GitHub
* Know basic git commands like git add, git commit and git push

*Resources:*

* [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

*Learning outcome:*

* Know markdown syntax well enough to create readmes

*Resources:*

* 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 HTML

*Learning outcome:*

* Be familiar with [accessible](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility) HTML5 elements.

*Resources:*

* [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

*Learning outcomes:*

* 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

*Resources:*\
This section includes condensed articles/videos that will be beneficial when tackling CSS throughout the course;

* [*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.
* [*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/).
* [*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.
* [*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.

### DOM Manipulation

*Learning outcomes:*

* Understand what the DOM is
* Create, access, and style a DOM element

*Resources:*

* [Call Me Nick - DOM Manipulation Basics](https://web.archive.org/web/20170718105716/https://callmenick.com/post/basics-javascript-dom-manipulation) (archived version) will cover a lot of the basics.
* [MDN article on "Manipulating Documents"](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents) - useful for some further reading, if you'd like
* [Appspot's DOM Tutorials: Exercises 1,2 & 3 only](https://dom-tutorials.appspot.com/static/index.html) will help put that into practice.
* Bonus videos:
  * [The DOM: What is the Document Object Model?](https://www.youtube.com/watch?v=80Mr2Z6Qikc) (includes some jQuery, but provides a useful overview and some vanilla JS examples)
  * [Live coding intro to the DOM, with JS examples](https://www.youtube.com/watch?v=eaLKqoB9Fu0)

### SQL

*Learning outcomes:*

* Understand what a relational database is
* Select, Create and Manipulate data between tables

*Resources:*

* [Code Academy's Introduction to SQL](https://www.codecademy.com/learn/learn-sql) - At a minimum, tackle section 1, hopefully section 2 and if you're having fun then section 3 and 4!
* Playing around with creating tables and accessing the data on your local device will increase your confidence in week 6 - feel free to reach out if you'd like a practical project to work on with SQL!

### Practical Project

*Learning outcomes:* Cement your knowledge of the concepts above through practical application.

*Task:*

* Build a calculator. This is one of the "Advanced Front End Development Projects" on [Free Code Camp](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator). Having a look at their guidelines might help you to get started.

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 stick to the command line for adding, committing and pushing your changes as you go.

Make sure to host your project on GitHub pages.

If anyone has already made a calculator and feels that they need a different challenge, please message one of us. Have fun, and don't hesitate to use your Slack channel!
