I am a free code camper exactly like you...

I love helping people that are helping themselves

If you ask, we will figure it out

write code that does not suck,

collaborate with others,

can communicate ideas,

and does not drool on themselves or bath in perfume.

And I worked really hard to become a developer!

Grampa says, "Send out resumes!!"

Now how do I find my first gig?

?? WTF is this?

Yo Anne!

Don't tell me!

Show Me!

Just Telling You:

This is the most amazing thing I have ever seen.

I offer no proof; you have to believe me at my word.

I offer a little proof; perhaps you might me believe me.

This is the most amazing thing I have ever seen.

Open Source Team

zero projects

low focus; no brand; no story

Highly Focused; Branded; Compelling Story

Hiring Manager:

Focused; Some brand; A story

15 projects

Project Detail Includes:

• What it does
• Technology Used
• Stuff You Learned

Projects by technology used - by tag

Code in a Browser

Codepen

c9

local

Code in a Browser

c9

local

FCC progression

FCC-Ballard progression

emmet class

Portfolio

class

Windows?Vagrant

Terminal or CommandLine

Project Navigator

Editor

Preview

an open source

coding collaboration website

based on the git version control system

that turned into a social network

Git is a version control system written by Linus Torvalds

Git and github are so linked together they are almost one thing 

Fun Fact: Linus Torvalds also wrote the linux kernel

Fun Fact: As of 2015 there are 30 Million+ repositories on github!

Feature: You can share & partake of open source software

Benefit: Amazing code, free for the taking; sharing is good and feels good too

So let's share some sweet source with the world... using git and git hub!

http://github.com/[github user name]

Click on Create a new workspace

Workspace Name: first_one

Clone from Git or Mercurial URL:

https://github.com/ricmclaughlin/simple-project.git

# <- the hash make a comment in bash

# type this next line in and notice it does NOTHING

# type me in - I am a comment

# use pwd to show what directory are we in!

pwd

How do I make a comment?

What directory am I in?

# us ls to list files and subdirectories

ls

What files and directories are there?

Make first_one workspace

Connect first_one repo from github

Make first_one repo

first_one

c9 Clones 

(two way link)

c9 makes a window into first_one vm 

Fun Fact: Everyone screws up 

Feature: Git saves a version of your stuff that you can find later!

Benefit: You never loose your progress; you always know where your work is

rm readme.md             # oh crap, I just deleted all my work.
                         # oh crap, it didn't work... why?

rm README.md                # oh crap, I really did deleted my stuff..

git checkout README.md      # Amazing, octocat has my six!

Not Fun Fact: Your machine will crash someday

Feature: Github backs up your stuff

Benefit: When your machine crashes your stuff remains safe

Let's add a file to our project and push our changes up to github

Make a file

Save the file as index.html

Right click on index.html and do preview

Checkout our awesome work in the preview tab

<h1>Yeah, this is it - My new page!</h1>

<h1>Yeah, this is it - My new page!</h1>
<p>and now I added some text</p>

Save

Refresh your preview browser tab

http://github.com/[github user name]/first_one

Did it work???

# stage your changes
git add .

# does git see your changes?
git status

# now push your changes

git push origin master

# commit your changes with
# save message in the present tense

git commit -m "add index.html"

staging

master

Change

git add .

git commit -m "message in present tense"

index.html

index.html

changes are committed

origin

git push origin master

changes are pushed

Fun Fact: You will experiment a lot in the coming months years

Feature: Branch to leave the working stuff working before you start changing things

Benefit: Experiments only cost time; 

Experiment on a feature branch!

# make a branch called "add_octocat"
git branch add_octocat

# Use your new branch                        
git checkout add_octocat
                     
# what does your terminal prompt tell you?

# make a new file on your website
echo "Hey there Octocat!" > octocat.html   

# what does git tell you?
git status

Create

git branch add_octocat

git checkout

add_octocat

octocat.html

working

(add_octocat)

add_octocat

# what did we change?
git status

# add our single change
git add octocat.html

# commit our change                        
git commit -m "add octocat.html"
                     
# are we good?
git status

# what branch are we one?

octocat.html

git add 

octocat.html

git commit -m "add octocat.html"

# switch to master branch

git checkout master                         

# what does your terminal prompt tell you?

# master should not have octocat.html!
ls                                          

# merge my_branch into master
git merge add_octocat                         

# octocat.html should be in the house!
ls                                          

working

(master)

No octocat.html

git checkout 

master

git merge 

add_octocat

octocat.html!!!

# delete add_octocat branch to clean up
git branch -d add_octocat                   

# did we delete add_octocat?
git branch                                  

# everything good?
git status

# push to github
git push origin master                                           

git branch -d add_octocat

octocat.html!!!

git push origin master

Now Let's Make a Portfolio!

You almost have one now!

Imagine it is more like:

 Contributions, repositories and public activity = Collaboration

Browser

http://github.com/Swiip

Fun Fact: You can personalize your website with its own domain!

Feature: Every github profile can have a free website associated with it

Benefit: A free portfolio website, baby!

Create a new repository called

[github username].github.io

(ignore setup page - we will do this in sec)

http://github.com/[github user name]

Create a new workspace called

portfolio

# clone your project
git clone https://github.com/[github user name]/[github user name].github.io

# how do you know it worked?

Open your [github username].github.io workspace

# make the first file in the project
echo "<h1>My Portfolio</h1>" > index.html
# because we cloned your repo git is ready to roll
git add .
# commit your awesome new project                                
git commit -m "initial commit"
# push your portfolio project to git hub
git push origin master                                   
# how do we know it worked?

Ok.

That is, well, good, I guess. 

I see your source on github - where is the live version?

We can do that... right?

Fun Fact: You have gone to lots of github project pages without realizing it....

Feature: Every github project gets a static website on the gh-pages branch

Benefit: Every single one of your github projects, even when it isn't a website, can have a website

Checkout the main bootstrap site hosted on github pages:

Browser

http://getbootstrap.com

Browser

http://github.com/twbs/bootstrap/tree/gh-pages

Now look at the gh-pages branch:

Github stores your project website in the gh-pages branch!

# make your gh-pages branch & checkout (in one step!)
git checkout -b gh-pages

# confirm we did it right
git status

# push the gh-pages branch to github
git push origin gh-pages                

Checkout your project in the web!

http://username.github.com/first_one

Open your first_one workspace

git checkout -b gh-pages

git push origin gh-pages

http://username.github.com/first_one

gh-pages

gh-pages

working

(gh-pages)

# add then commit your changes
git add .
git commit -m "add first project link"

# merge our feature branch
git merge project_link

# confirm we did it right
git status

# push the branch to github
git push origin master

# delete our feature branch
git branch -d project_link

# add this link to your index.html
Checkout my <a href="https://[github user name].github.io/first_one">Project</a>. 
<p>It is raw HTML with no CSS. You can see the styling isn't that great</p>

Open your [github user name].github.io workspace

# branch 
git checkout -b project_link

Mission Accomplished!

You have a portfolio website!

With a first small project that is live!

With a link to the first project from your portfolio!