Web Design 2:

Week # 5

Project Update 4 Check

Continue building the HTML and CSS for your project. Have at least 50% of the styling to your web application using CSS. 

Instead of FCC module, either:

• Implement a plugin of your choice into your project. Be sure that it works!
  OR
• Implement a jQuery code snippet into your project. Again, make sure it works!
  OR 
• Implement your own functionality using jQuery into your project or create your own plugin. 
  
  Whichever route you choose, be sure that the functionality makes sense for what you are building. 

Git Review

We went over a lot of stuff last time. Let's see if we can recall anything 

Remember these? Let's see if we can remember what they do.

• git init: Initializes a git repository
• git status: Check the status of your git repository
• git add file_name: Add a file name to staging
• git add .  or git add -A: Add all non-staged files to staging
• git commit -m "message": Move the staged files into commit state, along with a message for the commit.
• git log: displays all the changes we've committed so far, in the order we committed them

Continued on next page 

• git remote add origin url: Adds a remote with a name and the url specified (name is just before the url)
• git push origin branch: push your branch up to origin branch
• git pull origin branch: pull your branch from remote origin
• git reset: unstage files
• git checkout branch; git checkout commit; git checkout -- target: change to a different branch; change to a different commit; change file back to its original state
• git branch name_of_branch; git checkout -b name_of_branch: creates a branch; creates and checks out a branch in one command. 
• git rm name_of_file: Removes a file with git remembering the file has been removed.
• git merge branch: merge a branch into another branch

Branching

So far, we've only worked on a single branch, master. Now we're going to start working with other branches and see how they work.

1. In your project directory, create another branch by typing git branch first_branch
2. Next, type in git branch. You should see what branch you're on (* tells you)
3. Now, let's go into the branch by typing git checkout first_branch
4. Now, work on your application for 45 minutes - 1 hour on this branch. Once you've made some major changes and committed them, we're going to be pushing up the branch, first_branch, to Github. 

Branching (continued)

Create a Github Repository and name it the same or similar to your project. Create a remote by typing git remote add origin url_of_your_git_repo. 

5. Push up your branch to Github by typing git push origin first_branch

6. Check Github to make sure your branch now exists.

7. Submit a pull Request on your changes. According to OSSWATCH, a pull request "occurs when a developer asks for changes committed to an external repository to be considered for inclusion in a project’s main repository". Basically, that just means it's a way to include your changes and then easily merge them into your master branch. 

8. Once you've submitted a pull request, add me as an assignee on your changes. I will then check your changes, make comment(s), and then merge the branch into your master branch on Github if everything looks good. 

What the hell is merging?

Merging is what happens when you combine two different branches together. That is, you are going to be taking all the changes made in one branch and merging those changes into the other branch. This allows multiple people to work together on their own work and then merge their changes in incrementally. Normally, you would merge your master branch into your other branch you're working on before pushing your branch up (we haven't gotten to that yet). But what happens when those changes end up conflicting? Well, that's called a merge conflict. 

Merge Conflict

Merge conflicts can be frustrating, but relatively easy to solve. The terminal is where you want to first try and figure out what's causing the conflict. Usually, the terminal will have an output that shows exactly where the conflict occurs. 

Let's go back to git tower to see how to resolve merge conflicts: http://www.git-tower.com/learn/ebook/command-line/advanced-topics/merge-conflicts

Break Time!

Work Time!

Work on your projects. I will also be answering questions and helping with your projects during this time as well.

jQuery Discussion

What does your jQuery do?

How does it work?

20 minutes

Free Code Camp Modules

https://goo.gl/cvoeJb

Update 5

Push your code up to your Github account. You will need to have Git set up on your machine and a Github repository to push your code up to. Github is your a large part of your resume and serves to help you show off your code to the world. Here’s a good article that writes about the importance of Git more elaborately than I do: http://code.dblock.org/github-is-your-new-resume.

For this update, you will be working with uploading your HTML, CSS, and jQuery to your Github repository. I will expect you to understand the basics of Git and Github by the time this project update is due.

Guidelines:

1. Create a Github Account

2. Commit your changes and push your code up to Github.

3. Create a separate branch when making changes to your codebase. Once your changes are made, merge your branch into your master branch. Be sure to name your branch appropriately (semantically). 

4. Send me your github repo name. I will be grading your project updates from Github from now on :).

FCC Modules

https://goo.gl/cvoeJb