This repository will walk you through more practice for the Frontend program at Turing.
Each day has a folder containing a README.md
file with instructions for the day, exercises, and questions. You must complete all the exercises and questions.
- Day 0 - More Terminal Practice
- Day 1 - HTML and CSS
- Day 2 - HTML and CSS
- Day 3 - HTML and CSS
- Day 4 - HTML, CSS, and JavaScript
- Day 5 - Javascript
- Day 6 - Javascript
- Day 7 - Build a thing!
Before we're able to write javascript that can be run from the command line (you'll be doing this in mod 1), we need to install Node.js
and NPM
and it'll be expected that you've run through these instructions.
These setup instructions assume that you have completed the setup for Module 0, like installing Atom, xcode-select, Homebrew, git, and Chrome. If you haven't done that yet, please see the mod-0 environment setup instructions.
JavaScript was originally intended to be run in the browser (ie. Chrome). But over time there were a lot of good reasons to allow it to be run server side. Node.js is a framework that allows us to to do just that.
Additionally, there's some very useful "packages" we use while writing code and we cannot install without first installing node
.
Open a terminal with Spotlight search (Command + Space
) and enter these commands:
$ brew update
Wait a few moments for brew
to check its current version and make sure it is ready to be used.
$ brew install node
Wait again, as brew installs node.
Now enter:
$ node -v
This shows us what version of Node.js we are running. You should see something like:
v12.8.0
That same install also installed npm
for us which will allow us to download useful packages down the line.
Now enter:
$ npm -v
This shows us what version of NPM we are running. You should see something like:
6.10.3
We will be referencing many terminal commands throughout the prework. It is recommended that you practice using terminal commands before getting started. See the terminal.md
lesson located in the day_0 directory.
Next, we are going to fork this repository that you're reading right now. Forking is when you copy a Github repository to your Github account to make your own changes. Think of it like a fork in the road -- you're about to make changes that differ from the main path.
In this scenario, the Turing Github account owns this fe-m1-practice
repository. You do not have permission to change anything in this repository, so you need your own copy to work on. In order to fork the repository, follow these steps:
1. Make sure you are logged in to GitHub (if you are not logged in, log in and come back to this page)
2. Scroll to the top of this page that you're reading right now.
4. On the new page, confirm that it says it's the "forked" copy of this repository, with mentions of your username in the URL and repository name.
Now that you have forked this repository, the next thing to do is clone your forked repository.
Cloning is when you copy a remote Github repository to your local computer.
- Open your terminal
$ cd .
// This is a shortcut for `cd ~`, which is "change into the home directory"
$ mkdir turing
$ cd turing
$ mkdir 0module
$ cd 0module
$ git clone <ctrl-v to paste ssh link here >
Cloning into 'fe-m1-practice'...
remote: Enumerating objects: 678, done.
remote: Total 678 (delta 0), reused 0 (delta 0), pack-reused 678
Receiving objects: 100% (678/678), 237.94 KiB | 851.00 KiB/s, done.
Resolving deltas: 100% (332/332), done.
$ cd fe-m1-practice
$ git status .
// If everything worked correctly, you should see:
On branch master
nothing to commit, working tree clean
From here on out, all the work you do will be in your copy of this repository. Other text you read here might refer to this as the "prework repository" or "frontend prework", and they all refer to your forked copy of this fe-m1-practice
repository.
Each day's README
will walk you through the steps you need to take to save your work.
To start, in your terminal, cd
into the day_0
directory. Follow the instructions contained in the readme.md
file, and have a great time!
Have longer than a week to prepare for your time at Turing? Looking for more details and a deeper dive into the materials? Just can't get enough? We've put together a collection of resources to help you continue your ramp up before the first day of class.
-
Codecademy Introduction to JavaScript
- An introduction to the JavaScript programming language.
-
Codecademy Introduction to jQuery
- Learn about the most popular JavaScript library on the web.
-
JavaScript and jQuery: Interactive Front-End Web Development
- A thorough and easy-to-reference introduction to JavaScript by John Duckett.
-
- Get your HTML and CSS foundation locked in. This course teaches the basics of website markup and styling so you'll be ready to roll on day 1.
-
- Once you've got the basics of HTML and CSS down, BEM show you an approach to writing scalable and reusable CSS.
-
UX Crash Course: 31 Fundamentals
- A collection of 31 bite-sized daily lessons to introduce you to UX principles and techniques.
-
Field Guide to Human Centered Design
- A step-by-step guide that will get you solving problems like a designer by IDEO.org
-
- Typography is a big topic, learn the basics of what you need to know about how to use type effectively.