Coding at USC

Thursday, April 7, 2016

Learn Git_Project_Manhattan Zoo

meal-regimens.txt

========================================================================

Manhattan Zoo
Zookeeper Intern Onboarding:
Meal Guidelines

1. California Sea Lions
Meal: 40 lbs. salmon, 40 lbs. herring, 20 lbs. Northern Anchovy, 20 lbs. Octupus
Times: 6:00 am, 9:00 am, 12:00 pm, 3:00 pm, 6:00 pm, 9:00 pm
Directions: Leave buckets for trainer at 12:00 pm and 3:00 pm, otherwise, follow standard protocol.

2. Ring-tailed Lemurs
Meal: 10 bags Tamarind pods
Times: 6:00 am, 3:00 pm, 8:00 pm
Directions: Empty bags over meadow area during designated times

=========================================================================

1.Initialize a new Git repository.

$ git init

Initialized empty Git repository in /home/ccuser/workspace/manhattan-zoo-1/.git/

2.Check the status of the repository.

$ git status

On branch master

Initial commit

Untracked files:

(use "git add <file>..." to include in what will be committed)

meal-regimens.txt

nothing added to commit but untracked files present (use "git add" to track)

3.Add meal-regimens.txt to the staging area.

$ git add meal-regimens.txt

4.Make a commit.

$ git commit -m "First Commit"

[master (root-commit) 8fd7649] First Commit

1 file changed, 14 insertions(+)

create mode 100644 meal-regimens.txt

5.Include this new info in meal-regimens.txt.


======================================================================================= 

3. Long-Tailed Chinchillas
Meal: 1 bag animal pellets, 1 bag dried fruit, 1/2 bag cashews, 5 carrots, 3 stalks kale
Times: 8:00 am
Directions: disperse contents throughout Chinchilla habitat
=======================================================================================

6.Add meal-regimens.txt to the staging area.

$ git add meal-regimens.txt

7.Check the status of the Git project.You should see meal-regimens.txt listed as "modified".

$ git status

On branch master

Changes to be committed:

(use "git reset HEAD <file>..." to unstage)

modified: meal-regimens.txt

8.Make a commit.

$ git commit -m "Second Commit"

[master e9d5308] Second Commit

1 file changed, 4 insertions(+)

9.View your Git commit history.

If your cursor is stuck in Git log mode, press "q" on your keyboard to escape.

$ git log

commit e9d530896c7199324040efc9c2ecbe66dac3b89c

Author: codecademy <ccuser@codecademy.com>

Date: Thu Apr 7 22:19:04 2016 -0400

Second Commit

commit 8fd764938c156fb5c0a5a1905053f814e0d1fed0

Author: codecademy <ccuser@codecademy.com>

Date: Thu Apr 7 22:11:52 2016 -0400

First Commit

10.Here's two more animal reports. Include each in meal-regimens.txt, making a new commit for each animal added.

===========================================================================


4. Poison Dart Frogs
Meal: 1 bag small crickets
Times: 6:00 am
Directions: empty bag in frog habitat once daily. Do not touch frogs! Extremely poisonous.

5. Western Lowland Gorilla
Meal: (Morning) 20 lbs. kale, 10 lbs. celery, 10 lbs. green beans, 5 lbs. carrots, 

1 bag sweet potatoes. (Evening) 10 Bananas, 10 apples, 5 oranges, 5 mango, 20 lbs. 

grapes, 10 lbs. turnips, 5 lbs. white potatoes
Times: 6:30 am, 12:00 pm, 7:00 pm
Directions: feed Gorillas in the morning as group, spread forage items during noon meal, 

and divide quantities for individual feeding in evening
========================================================================================

$ git add meal-regimens.txt

$ git status

On branch master

Changes to be committed:

(use "git reset HEAD <file>..." to unstage)

modified: meal-regimens.txt

$ git commit -m "Third Commit"

[master 62e0c0a] Third Commit

1 file changed, 10 insertions(+)

$ git log

commit 62e0c0a9be659aa877f12ef314965a084cb4ecd8

Author: codecademy <ccuser@codecademy.com>

Date: Thu Apr 7 22:26:25 2016 -0400

Third Commit

commit e9d530896c7199324040efc9c2ecbe66dac3b89c

Author: codecademy <ccuser@codecademy.com>

Date: Thu Apr 7 22:19:04 2016 -0400

Second Commit

commit 8fd764938c156fb5c0a5a1905053f814e0d1fed0

Author: codecademy <ccuser@codecademy.com>

Date: Thu Apr 7 22:11:52 2016 -0400

First Commit

Learn Git_Lesson_Basic Git Workflow

1.Hello Git

Git is a software that allows you to keep track of changes made to a project over time. Git works by recording the changes you make to a project, storing those changes, then allowing you to reference them as needed.

In scene-1.txt, add this text:

Harry Programmer and the Sorcerer’s Code: Scene 1

In the terminal, initialize a new Git project.

2.git init

git init
The word init means initialize. The command sets up all the tools Git needs to begin

tracking changes made to the project. 
Notice the output:  

Initalized an empty git repository in /home/ccuser/workspace/sorcerers-code/.git/
The Git project was created. 
3.Git Workflow

A Git project can be thought of as having three parts:

A Working Directory: where you'll be doing all the work: creating, editing, deleting and organizing files
A Staging Area: where you'll list changes you make to the working directory
A Repository: where Git permanently stores those changes as different versions of the project

The Git workflow consists of editing files in the working directory, adding files to the staging area, and saving changes to a Git repository.
4.git status

As you write the screenplay, you will be changing the contents of the working directory. You can check the status of those changes with:

$ git status

Output:

On branch master

Initial commit

Untracked files:

(use "git add <file>..." to include in what will be committed)

scene-1.txt

nothing added to commit but untracked files present (use "git add" to track)

In the output, notice the file in red under untracked files. Untracked means that Git sees the file but has not started tracking changes yet.
5.git add

In order for Git to start tracking scene-1.txt, the file needs to be added to the staging area. We can add a file to the staging area with:

$ git add filename

The word filename here refers to the name of the file you
are editing, such as scene-1.txt.

$ git add scene-1.txt

$ git status

On branch master

Initial commit

Changes to be committed:

(use "git rm --cached <file>..." to unstage)

new file: scene-1.txt

In the output, notice that Git indicates the changes to be committed with "new file:

scene-1.txt" in green text. Here Git tells us the file was added to the staging area.

6.git diff

Imagine that we type another line in scene-1.txt. Since the file is tracked, we can check the differences between the working directory and the staging area with:


$ git diff filename
In the code editor, add this text to scene-1.txt:

Dumblediff: I should've known you would be here, Professor McGonagit.

From the terminal, use the new command to check the difference between the working directory and the staging area.
Notice the output:

"Harry Programmer and the Sorcerer's Code: Scene 1" is in the staging area, as indicated in white.

Changes to the file are marked with a + and are indicated in green.
IMPORTANT: press q on your keyboard to exit diff mode.

$ git diff scene-1.txt

diff --git a/scene-1.txt b/scene-1.txt

index c33ce4c..2d6e91a 100644

--- a/scene-1.txt

+++ b/scene-1.txt

@@ -1 +1,2 @@

-Harry Programmer and the Sorcerer’s Code: Scene 1

+Harry Programmer and the Sorcerers Code: Scene 1

+Dumblediff: I should've known you would be here, Professor McGonagit.

Add the changes to the staging area in Git. Recall that you will need to identify the file by its name.

$ git add scene-1.txt

7.git commit

A commit is the last step in our Git workflow. A commit permanently stores changes from the staging area inside the repository. git commit is the command we'll do next. However, one more bit of code is needed for a commit: the option -m followed by a message. Here's an example:

$ git commit -m "Complete first line of dialogue"

Standard Conventions for Commit Messages:

Must be in quotation marks
Written in the present tense
Should be brief (50 characters or less) when using -m

$ git commit -m "Complete first line of dialogue"

[master (root-commit) 4e4fa51] Complete first line of dialogue

1 file changed, 2 insertions(+)

create mode 100644 scene-1.txt

8.git log

Often with Git, you'll need to refer back an earlier version of a project. Commits are stored chronologically in the repository and can be viewed with:

$ git log
From the terminal, log a list of your commits.

In the output, notice:

A 40-character code, called a SHA, that uniquely identifies the commit. This appears in orange text.

The commit author (you!) 

The date and time of the commit

The commit message

$ git log

commit 4e4fa51c9da73506d7eb2d8e931f803939039298

Author: codecademy <ccuser@codecademy.com>

Date: Thu Apr 7 21:00:41 2016 -0400

Complete first line of dialogue

9.git Generalizations

Summary:

Git is the industry-standard version control system for web developers
Use Git commands to help keep track of changes made to a project:
- git init creates a new Git repository
- git status inspects the contents of the working directory and staging area
- git add adds files from the working directory to the staging area
- git diff shows the difference between the working directory and the staging area
- git commit permanently stores file changes from the staging area in the repository
- git log shows a list of all previous commits

Saturday, April 2, 2016

HTML & CSS_Project_Newsroom

1.Add a header section with a container.Next, add the logo and an inline form.

       <div class="header">
            <div class="container">
                <img src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/logo.svg" width="210" height="50">
                <div class="search">
                    <form class="search-form">
                        <input type="text" placeholder="Search NewsRoom">
                        <button type="submit" class="search-btn">Search</button>
                    </form>
                </div>
            </div>
        </div>

           /*HEADER*/
            .header {
                background: #000;
                min-height: 80px;
            }
            .header img {
                margin: 15px 0 0 0;
            }
            .search {
                float:right;
                margin: 25px 0 0 0;
            }
            .search-form input {
                background: transparent;
                border: 0px;
                border-bottom: 1px solid #fff;
                color: #fff;
                height: 30px;
                width: 240px;
            }
            .search-form input:hover, .search-form input:focus {
                border-bottom: 1px solid #1a77ff;
                outline: 0px;
            }
            .search-btn {
                background: transparent;
                border: 0px;
                border-bottom: 1px solid #1a77ff;
                color: #fff;
                height: 30px;
                margin: 0 0 0 10px;
                padding: 0 10px;
            }

2.Add a menu section with a container. In the container, add a list with eight items:

Top Stories
World
Business
Technology
Entertainment
Sports
Science
Health

      <div class="menu">
            <div class="container">
                <ul class="nav">
                    <li class="active"><a href="#">Top Stories</a></li>
                    <li><a href="#">World</a></li>
                    <li><a href="#">Business</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Entertainment</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Science</a></li>
                    <li><a href="#">Health</a></li>
                </ul>
            </div>
        </div>

3.Add a main section with a container. In it, add one row with a column that has a class of col-md-5.

In the column, add text for the date, heading, and subheading.
In style.css, change the background image of the main section. Here's the image we used.
        <div class="main">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <p class="date">November 7, 2014</p>
                        <h2><span>Introducing Bass</span></h2>
                        <p>A new app by the creators of Shutterbugg that lets you enjoy your favorite music everywhere you go.</p>
                    </div>
                </div>
            </div>
        </div>
            /*MAIN*/
            .main {
                background: url(https://s3.amazonaws.com/codecademy-content/projects/newsroom/bass-bg.jpg) no-repeat center;
                background-size: cover;
                height: 500px;
            }
            .main .container .col-md-5 {
                padding:40px;
            }
            .main .container .col-md-5 p.date {
                color: #fff;
                font-size: 16px;
            }
            .main .container .col-md-5 h2 {
                color: #fff;
                font-size: 60px;
                margin: 20px 0;
            }
            .main .container .col-md-5 h2 span {
                border-bottom: 5px solid #1a77ff;
            }
            .main .container .col-md-5 p {
                color: #fff;
                font-size: 20px;
            }

4.Add a supporting section with a container. In the container, create two rows.

The first row should have two columns. Set the class of the first column to col-md-8. Set the class of the second column to col-md-4 sidebar.
In the first column, add the heading Latest News along with dates. In the second column, add the heading Upcoming Events along with dates.
The second row should have only one column. Set the class of the column to col-md-12. The column should display this image advertising the Innovation Cloud conference.
       <div class="supporting">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <h3>Latest News</h3>
                        <ul>
                            <li>
                                <p class="date">November 5, 2014</p>
                                <h4><span>MOVE Launches in London</span></h4>
                            </li>
                            <li>
                                <p class="date">November 4, 2014</p>
                                <h4><span>Introducing Excursion</span></h4>
                            </li>
                            <li>
                                <p class="date">November 2, 2014</p>
                                <h4><span>Improvements to Shutterbugg Arrive</span></h4>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-4 sidebar">
                        <h3>Upcoming Events</h3>
                        <ul>
                            <li>
                                <p class="date">November 8-12, 2014</p>
                                <h4><span>Innovation Cloud 2014</span></h4>
                            </li>
                            <li>
                                <p class="date">November 21, 2014</p>
                                <h4><span>LL Retrospective</span></h4>
                            </li>
                            <li>
                                <p class="date">December 5, 2014</p>
                                <h4><span>M.O.N.E.Y. Launch Event</span></h4>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <img src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/ad.jpg">
                    </div>
                </div>
            </div>
        </div>
            /*SUPPORTING*/
            .supporting .row {
                margin:50px 0;
            }
            .supporting .row .col-md-8 {
                background: #fff;
                padding: 20px 40px 40px 40px;
            }
            .supporting .row .col-md-4 {
                background: #152230;
                padding: 20px 40px 40px 40px;
            }
            .supporting .row .sidebar h3 {
                color: #fff;
            }
            .supporting .row ul {
                list-style: none;
                margin:40px 0 0 0;
                padding:0;
            }
            .supporting .row ul li {
                margin: 0 0 20px 0;
            }
            .supporting .row .col-md-4 ul li {
                color: #fff;
            }
            .supporting .row ul li h4 span {
                border-bottom: 3px solid #1a77ff;
            }
            .supporting .row .col-md-12 {
                margin: 0;
                padding: 0;
            }

5.Add a footer with a container. Add the following three items:

About
Terms
Send Feedback

Be sure to also add a copyright.
        <div class="footer">
            <div class="container">
                <ul>
                    <li>About</li>
                    <li>Terms</li>
                    <li>Send Feedback</li>
                </ul>
                <p>© 2014 Newsroom</p>
            </div>
        </div>

            /*FOOTER*/
            .footer {
                background: #000;
                padding:40px 0;
            }
            .footer ul {
                float: left;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .footer ul li {
                color: #fff;
                display: inline;
                margin:0 40px 0 0;
            }
            .footer p {
                color:#e2e2e2;
                float: right;
            }
            .col-md-12 img {
                width: 100%;
            }

HTML & CSS_Project_Armando Pérez

1.Change the background image of the body. Here's the image we used.

           body {
                background: url(https://s3.amazonaws.com/codecademy-content/projects/armando-perez/brand.jpg) no-repeat fixed;
                background-size: 100%;
            }

2.Add a header section with a container. Then add a row that contains one column and one div.

Set the class of the column to col-md-4. Set the class of the div to pull-right.
In the column, add Armando's name as a heading. In the div, add a list for the following five items:

All
Consumer
Mobile
Commerce
Enterprise

Set the class of the All item to active. Display the list items on one line. All items should also be links.
       <div class="header">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <h1>Armando Pérez</h1>
                    </div>
                    <div class="pull-right">
                        <ul class="nav nav-pills">
                            <li class="active"><a href="#">All</a></li>
                            <li><a href="#">Consumer</a></li>
                            <li><a href="#">Mobile</a></li>
                            <li><a href="#">Commerce</a></li>
                            <li><a href="#">Enterprise</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
            .header, .footer {
                padding: 30px 0;
                color: #444;
            }
            .header h1 {
                color:#fff;
                margin: 0 0 30px;
                font-size: 30px;
                text-transform: uppercase;
            }
            .header ul, .footer ul {
                padding: 0 20px;
                margin: 0;
                list-style: none;
            }
            .header li {
                display: inline;
                width: 100px;
                text-align: center;
                margin: 6px;
            }
            .header li a {
                color:#f01251;
            }
            .header li.active a {
                background-color:#f01251;
            }

3.Add a main section with a container. In this section, create a grid of images.

First, create three separate rows. Inside of each row, create three columns of equal width. Set the class of the columns to col-md-4.
In each column, add the image and turn the image into a link.
Feel free to use your own images. In order, here are the images we used: p1, p2, p3, p4, p5, p6, p7, p8, p9.
        <div class="main">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p2.jpg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p3.jpg">
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p4.jpg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p5.jpg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p6.jpg">
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p7.jpg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p8.jpg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p9.jpg">
                        </a>
                    </div>
                </div>
            </div>
        </div>

4.Add a footer section with a container. Inside, create one row with one column and one div.

Set the class of the column to col-md-4. Set the class of the div to pull-right.
In the column, add text for the four items. In the div, add text for the copyright.
        <div class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <ul>
                            <li>email</li>
                            <li>linkedin</li>
                            <li>twitter</li>
                            <li>blog</li>
                        </ul>
                    </div>
                    <div class="pull-right">
                        <p>© 2014</p>
                    </div>
                </div>
            </div>
        </div>
            /* Footer */
            .footer li {
                display: inline;
                margin-right: 40px;
            }
            .footer p {
                margin: 0 30px 0 0;
            }

Subscribe to: Posts ( Atom )