Before attending the bootcamp you are expected to complete the prerequisites and work as much as you can on the precourse material.
This is the list of tasks you need to finish before attending the bootcamp:
-
register on Github
-
join our Gitter chat
-
register on FreeCodeCamp
-
complete the following FreeCodeCamp sections:
-
Responsive Web Design Certification:
- Basic HTML and HTML5
- Basic CSS
- Responsive Web Design Principles
- CSS Flexbox
-
Javascript Algorithms And Data Structures Certification:
- Basic JavaScript
- ES6
- Basic Data Structures
- Basic Algorithm Scripting
Or get a minimum 200 points, completing the above plus whatever else you enjoy.
-
-
create your personal website using Github pages
-
register on Codewars
- reach kyu 5
- create a kata
You can find more material below, that might help working on the prerequisites. If you ever get stuck remember our Gitter chat and our Monday evening meetups, we are here to help!
The following material is meant as a reference for what you are expected to know before the bootcamp, but maybe you are not familiar yet. There's no particular order for the following sections, feel free to jump around as you prefer.
- Command line
- Git & Github
- Markdown
- Semantic HTML
- CSS
- DOM manipulation
- Practical project
- Installation list
- Optional extras
Having used the command line before the bootcamp is essential. You are not expected to be a pro, but you need to know your way around.
Learning outcomes:
- be familiar with navigating around your computer without using a GUI
- become proficient in typing
Resources:
- start by watching and repeating the commands of this gentle tutorial introduction.
- if you have time, go deeper with Learn enough command line to be dangerous
- please please please become a decent typist. It will pay off for the rest of your working career as probably you'll be typing all the way through. You can learn at TypingClub and have some fun at typeracer
To collaborate with other on code you need to know the basics of Git and Github.
Learning outcomes:
- understand why we need Git and Github
- know the basic commands:
add,commit,push,pull - know the basics of Git/Github: pull requests, fork, branches
Resources:
- if you have no idea what we are talking about you can watch this series of videos from Github (total of ~80 minutes, at normal speed)
- then be sure to put it into practice, at least by setting up your Github page. There is a tutorial for that too
To share information on Github and beyond you need a way to format text. An easy way to do that on plain text files is Markdown.
Learning outcomes:
- be able to write simple documents in Markdown
Resources:
- you can read this guide from Github again. Be sure to try that out yourself by writing some documentation or presentation of your website hosted in the Github pages
Writing HTML that is semantically meaningful is very important for both machines and humans. Machines (e.g. search engines) can better understand what is going on in our content. Humans using screen readers or different navigation tools can benefit from a more semantically structured document.
Learning outcomes:
- be familiar with HTML5 elements
- understand why and how we need to write semantic HTML
Resources:
- in this article you'll find a good explanation about why semantic is important and a bit of history behind it
- then try to use different elements from this list to become familiar with them
Every project in the bootcamp will have a frontend side. It's important to be able to present the projects in a clean and organised way. We don't need to go fancy, but we need to be able to stay clean, legible and responsive.
Learning outcomes:
- understand basic CSS rules
- understand different positioning techniques:
relative,absolute,float,flex - understand font sizing techniques:
em,rem,px
Resources:
- Learn Layout is a great introduction to most of the useful CSS concepts that you'll need
- Fundamental text and font styling will guide you through everything you need to know about styling text
Optional resources:
- you can carry on with the rest of the MDN CSS guides to learn more about styling boxes and more about layouts, beyond what you've seen in Learn Layout
The DOM is the internal browser representation of the HTML page. It is useful to know how it works because we will use it all the time to create, modify and animate our pages using JavaScript.
Learning outcomes:
- understand what the DOM is
- create, access, move and style a DOM element
Resources:
- The DOM: What's the Document Object Model?
- live coding introduction to the DOM with JavaScript examples
- a more comprehensive guide to the DOM manipulation with exercises
- you can find more exercises that you can do directly in the browser at Appspot's DOM Tutorials: Exercises 1,2 & 3 only
To really understand what you have gone through so far you need to start a small project from scratch. That can be the Github page from the prerequisites or something else that you like. Whatever is your choice, take some time to build a .
Learning outcomes:
- cement your knowledge of the concepts above through practical application
Example tasks:
- build a calculator. This is one of the Free Code Camp's projects. Feel free to pick another one
- build a responsive landing page with some interactivity (e.g. hamburger menu)
- come up with whatever you like!
You should do this directly with your text editor, terminal and browser. Start by creating your repository on GitHub and try to stick to the command line for adding, committing and pushing your changes as you go. It is not important to get a polished product. Even if it is minimal, make sure to get something online.
To avoid wasting time during the bootcamp you should follow this installation list on your own. We will meet one day before the bootcamp to make sure that you are all set, but try this alone first.
Install:
Sorry, but you will need to install Linux. You can keep your Windows and dual-boot with Linux.
Install Ubuntu LTS following the links in that page.
You can use Etcher to burn the image on a USB stick.
You are set. We recommend Ubuntu LTS. But if you are familiar with anything else, it's fine. The tools that we are using will be tested and supported only for that distribution though.
Install:
- Atom with these plugins:
- linter-eslint and its dependencies
- open-in-browser
- autocomplete-paths
- pigments
- color-picker
- Postman
Setup SSH access to your Github account
Extra introductory material that could help you better understand what we are talking about. You are not expected to go through all this before, but you might need to learn more during the bootcamp.
A list of all the keywords you will hear over and over again, explained: how the Web works.
The mistery of getting your website online: publishing your website.
Extra resources for learning JavaScript:
- Eloquent Javascript a free and open source book
- Crockford on JavaScript a series of videos, of Douglas Crockford, a JavaScript master
- What the heck is the event loop anyway is a half-hour video that gives a bit of an understanding about how everything fits together and a nice introduction to the concept of callbacks
FreeCodeCamp has a nice video tutorial section with a series on Chrome Developer Tools. Click on the link and type "Chrome developer tools" to find it.