Frontend Mod 0 Capstone Repository
This repository will walk you through the Mod 0 Capstone 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.
Pre-work Index
- 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!
Environment
Install Node.js and NPM using homebrew
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.
Install Node.js:
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
.
Installation
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
Terminal
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.
Forking the Module 0 Capstone Repository
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 frontend-module-0-capstone
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)
this page that you're reading right now.
2. Scroll to the top ofFork
in the upper right corner of the screen and select your account as the destination
3. Click on
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.
Clone down this new repository
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.
frontend-module-0-capstone
repository that your just forked, click on Clone or Download
1. In YOUR
Clone with HTTPS
click on Use SSH
2. If you see 3. Click on the copy icon to copy the SSH link to your clipboard.
4. Use your terminal to copy down this repository
- 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 'frontend-module-0-capstone'...
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 frontend-module-0-capstone
$ 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 frontend-module-0-capstone
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!
Month of Module 0 Capstone: Extended Resources
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.
JavaScript Resources
-
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.
HTML and CSS Resources
-
- 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.
Design, UX, and UI Resources
-
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.