/fe-m1-practice

Old FE mod 1 pre-work repo that will help with HTML and CSS exposure

Frontend Practice for Mod 1!

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.

Index

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

3. Click on Fork in the upper right corner of the screen and select your account as the destination

click on 'fork' button, confirm fork to your account

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.

confirm new repository belongs to your github account

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.

1. In YOUR fe-m1-practice repository that your just forked, click on Clone or Download

clone down your copy

2. If you see Clone with HTTPS click on Use SSH

3. Click on the copy icon to copy the SSH link to your clipboard.

4. Use your terminal to copy down this repository

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

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

HTML and CSS Resources

  • Codecademy HTML & CSS

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

  • Try the BEM css methodology

    • 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