Class #01


FEWD Overview and Setup



Course Overview (expectations, procedures, etc.)



Introductions: Instructional Team

• Chandler Moisen

⇒ Software Engineer @ General Assembly

⇒ Instruction @ GA since 2014

⇒ Previously: Teachable, Percolate, Ende Solutions, agencies...

• Rastko Sasic

⇒ Instruction Assisstant

⇒ WDI Alum

Introductions: Student Services

• Student Services

⇒ studentservicesnyc@generalassemb.ly

• Useful for topics beyond instruction

Introductions: Students

Please share:

• Your name

• What you are up to

• Why you enrolled in FEWD

• Anything else you would like

Course Overview

Course Overview: Logistics

• FEWD will run:

From: Monday, September 17th

To: Wednesday, November 28th

At: 6:30PM - 9:30PM

• Will not meet:

⇒ Monday, November 12th (Veteran's Day)

⇒ Wednesday, November 21st (Thanksgiving travel)

Course Overview

• 20 classes spread over 3 units:

1. HTML/CSS Foundations

2. Responsive Web Layout

3. Adding Interactivity with JavaScript

• Weekly homework assignments

• One final project

Course Overview: Homework

• One assignment per week

• Will start end of class Wednesdays as final exercise

• Due the following Monday

• Expect feedback in three-to-five days

• Grading

⇒ Complete/Incomplete

⇒ Late assignments are accepted; will not receive feedback

Course Overview: Final Project

• Culmination of your FEWD experience

• Due the last day of class

• Weekly deliverables starting mid-course

• To get a head start: start thinking of ideas now

• For inspiration: GA's Gallery

Course Overview: GA Graduation Requirements


Complete 80% of assignments


Miss no more than three classes

Final Project:

Turn it in!

Course Overview: Emotional Learning Curve
Course Overview: Office Hours

• FEWD is challenging

• We want you to succeed and are here for you

• How To Reach Us:

⇒ Slack/email

⇒ Before class

⇒ Schedule office hours

Course Overview: Office Hours

• Additional help via the Student Resource Center

⇒ Mon/Tues/Thurs 5PM - 8PM

⇒ Wed/Sat 12PM - 3PM

⇒ 4th Floor, 10 E 21st St.

“You don’t have to know everything. You simply need to know where to find it when necessary.”

- John Brunner

Getting Help

• Google is your friend

Stackoverflow is your friend - open an account tonight

• (Some) people on the internet are your friends

• Your classmates are your friends

• Rastko is your friend

• I am also your friend

Course Overview: Student Responsibilities

• FEWD is a self-directed program

• Students are a crucial part of the skill-acquisition process

Course Overview: Exit Tickets/Feedback

• GA is REALLY into feedback

• Helps us, help you

• Two BIG feeback surveys:

⇒ Midway/End

• Small feedback after every class:

⇒ Help us improve on a weekly basis

⇒ Useful for questions (addressed next class)

Course Overview: Tools

Web Browser: Google Chrome

Text Editor: Sublime Text 3

GitHub: http://github.com

CodePen: codepen.io

Slack Channel: https://fewd-9-17.slack.com/

Course Website: http://fewd.nyc


GitHub: What is it?

GitHub is a version control platform

• Like Dropbox, but for code

• Stores a history of files and their changes

• Hosts files in the cloud; easy to share finished product

• Serves as a plaform for developer collaboration:

GitHub: Why Do Developers Use It?

• Tracks changes: see who fixed (or broke) what

• Stores history: can easily revert and fix mistakes

• Allows for line-by-line feedback (useful for homework)

GitHub: Some Vocab

1. Repository

2. Clone

3. Commit

4. Push

GitHub: Repository (Repo)

• Basic element of GitHub

• Contains all of a project's files (all the code)

• One or more users can contribute to a single repository

• Repositories are either public or private

• By EOC, you will each create your own repo!

GitHub: Clone (Copy)

• Copies a remote repo to your machine

• This copy is called a local repo

• Changes to the local repo will not affect the remote

• Multiple users can copy the same repo

GitHub: Commit

• A snapshot of changes to a repo

• Think of it as "saving" your local changes

• Commits do not change the original (remote) repo

• Contains a message describing the changes made

GitHub: Push (Send)

• Pushes (sends) commits to a remote repository

• Pushing does update the remote repo

• Allows other developers to see your changes

• Other developers can "pull" your changes

GitHub: How Will We Use It?

• You will create your own repository to host:

⇒ Homework

⇒ Class work

⇒ Final projects

• Instructors will use your repo to grade homework

• Repo will serve as public portfolio

Don't Worry

We Will Practice

GitHub Checklist

1) Create GitHub account

2) Download GitHub desktop application

3) Create a new GitHub repo (see next slide)

4) Add files w/ code to this repo

5) Commit, sync, and push your changes to Github's servers

6) View your changes online

GitHub Desktop: Create A Repo

• In GitHub Desktop, click "Create New Repository"

GitHub Desktop: Create A Repo
Repo Naming: Muy Importante

• Your repo's name needs to match the following format:


• Ex 1:

Username: keanu-reeves

Repo: keanu-reeves.github.io

• Ex 2:

Username: patrick_swayze

Repo: patrick_swayze.github.io

GitHub: Create A Repo
GitHub: Create A Repo
GitHub: Create A Repo

• After publishing your repository, check GitHub.com

GitHub: Edit A Repo

• Let's add code to our repos:

1) Open your repo in SublimeText (click and drag)

2) command + n to create a new file

3) command + s to save this file as index.html

4) Add the following: <h1>Hello, World!</h1>

5) command + s to save

GitHub: Edit A Repo
GitHub: Edit A Repo
GitHub: Edit A Repo
GitHub: Edit A Repo
GitHub: Next Steps

• Open your GitHub URL in a browser window

• Make a few more changes to index.html

• Commit and Push these changes

• Repeat!

Tips For Success

• Do the work...and then some!

• Engage (the class, your work, your peers, etc.)

• Become comfortable with the unknown

• Be curious and resourceful

• Reach out for help and help others

• Don't judge

• Remember why you enrolled

On Deck: Class #02 - Introduction to HTML

•How the internet works

•HTML basics: Elements, tags, and structure

•Image tags

•Anchor (link) tags