arrow-left

All pages
gitbookPowered by GitBook
1 of 3

Loading...

Loading...

Loading...

Installation List

hashtag
For OSX Users:

  • Install Brewarrow-up-right

  • Optional: iTerm2

hashtag
For Linux Users:

  • Ubuntu and Linux Mint are probably the two most used desktop Linux distros out there. Mint is becoming increasingly popular and in a lot of ways, is more beginner-friendly than Ubuntu. It also uses up less memory resource (the most lightweight Mint edition is XFCE), and will be better suited to slower machines.

hashtag
For Windows Users:

  • For the course you'll need to install a Linux operating system on your machine and dual boot - students in the past who have tried to use Windows always encounter big setbacks with installation problems and general incompatibility issues.

  • Be sure to back up your files before you start, in case anything goes wrong. You will still be able to use Windows alongside Linux and if everything goes right, you won't lose any data.

  • It's not as scary as it sounds! There are a lot of articles online to help you. Due to a lot of different OS configurations you may be best off searching google for your specific OS + distro (eg: "dual boot windows 10 and Ubuntu"). However here are some links that may be useful:

If you're having hardware or permissions issues when dual booting, you may be able to use . If you're going down this route, please make sure postgres is installed correctly too.

hashtag
Chromebook Users:

  • Chromebooks and is pretty simple, too.

hashtag
For Everyone:

  • Install and manage Node.js using .

    Note: We will be covering Node.js during the course. If you are curious and would like some background reading, is a great resource.

  • We shall have a couple of FAC students and alumni available at the installation party to guide you through installing linux. Please come along if you have Windows OS.

  • Finally please do not hesistate to come to a meetup or contact us on slack if you are having trouble, we can help!

  • Install a text editor of your choice. We recommend:
    • - because of it's source control and liveShare features

  • Install Chrome

  • Install

  • Chrome extensions:

    • JSONView

  • Make sure to explore your editors plugin ecosystem for useful plugins:

    • - we recommend prettier and Rainbow Brackets

  • Download the - the interface is easier to manage the different workspaces you'll be part of

  • ...but don't be overwhelmed, you don't need to install anything further

  • Distro

    Base

    Package Manager

    Windows Subsystem for Linuxarrow-up-right
    all now officially run Linuxarrow-up-right
    setting it up on older machinesarrow-up-right
    nvmarrow-up-right
    Art of Nodearrow-up-right
    Install PostgreSQLarrow-up-right
    How to install Ubuntu 18.04 alongside Windows 10arrow-up-right
    Dual boot Linux on other Windows OS'sarrow-up-right
    VS Codearrow-up-right
    Setup SSH access to your Github accountarrow-up-right
    Postmanarrow-up-right
    VSCode Marketplacearrow-up-right
    Slack Desktop Clientarrow-up-right
    Ubuntuarrow-up-right
    Debianarrow-up-right
    APTarrow-up-right
    Linux Mintarrow-up-right
    Debianarrow-up-right
    APTarrow-up-right

    precourse

    Before you start the course

    The purpose of our 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 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.

    hashtag
    Precourse Material

    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!

    hashtag
    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 .

    hashtag
    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:

    • 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).

    hashtag
    Markdown

    Learning outcome:

    • Know markdown syntax well enough to create readmes

    Resources:

    • No GitHub repo is complete without proper documentation. Follow this to learn the syntax that you need to write a banging Readme!

    hashtag
    Semantic HTML

    Learning outcome:

    • Be familiar with HTML5 elements.

    Resources:

    • 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 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 for more specific examples of useful semantic tags.

    hashtag
    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;

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

    • 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 video to accomplish many important tasks like .

    hashtag
    DOM Manipulation

    Learning outcomes:

    • Understand what the DOM is

    • Create, access, and style a DOM element

    Resources:

    • (archived version) will cover a lot of the basics.

    • - useful for some further reading, if you'd like

    • will help put that into practice.

    hashtag
    SQL

    Learning outcomes:

    • Understand what a relational database is

    • Select, Create and Manipulate data between tables

    Resources:

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

    hashtag
    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 . 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!

  • is an essential guide to understanding how CSS rules are applied and how CSS works in general.
  • this is another essential guide to help you understand the differences between em and rem units and how to combine them effectively.

  • Bonus videos:

    • (includes some jQuery, but provides a useful overview and some vanilla JS examples)

    Command Line
    Git & GitHub
    Markdown
    Command Line Interface Crash Coursearrow-up-right
    Udacity's git & GitHub coursearrow-up-right
    markdown tutorialarrow-up-right
    accessiblearrow-up-right
    Herearrow-up-right
    this articlearrow-up-right
    this articlearrow-up-right
    Learn Layoutarrow-up-right
    Relative & Absolute Positioningarrow-up-right
    Learn Layoutarrow-up-right
    centeringarrow-up-right
    Call Me Nick - DOM Manipulation Basicsarrow-up-right
    MDN article on "Manipulating Documents"arrow-up-right
    Appspot's DOM Tutorials: Exercises 1,2 & 3 onlyarrow-up-right
    Code Academy's Introduction to SQLarrow-up-right
    Free Code Camparrow-up-right
    Semantic HTML
    CSS
    DOM Manipulation
    SQL
    Practical project
    CSS Specificityarrow-up-right
    Rem/Em Unitsarrow-up-right
    The DOM: What is the Document Object Model?arrow-up-right
    Live coding intro to the DOM, with JS examplesarrow-up-right