Remember to fork and clone this lab if you haven't already.
For this lab, you're going to be pretending that you work for National Geographic's Photography contest and that your assignment is to make a quick mockup of what the home page will look like. You want to include photos from the past five winners on the page.
Before altering your code base, open
index.html in the browser. In the first part of this lab, you're going to add a photo of a turtle below the image of the tree to a branch then merge that branch into master.
git branch. This should show you that you're on the master branch.
add-turtlefrom the master branch:
git branch add-turtle
git branchagain. Now you should see
git checkout add-turtle
git branchagain. This should return
index.html, below the tree picture and caption section, add the turtle picture using the HTML below:
<!-- begin turtle picture and caption --> <div class="center-container"> <div class="card"> <div class="caption"> <h4>From the Sky</h4> <p>Montse Grillo</p> <p>Tenerife, Canary Islands</p> </div> </div> <div class="card"> <img src="public/img/turtle.jpg" alt="sea turtle swimming"> </div> </div> <!-- end turtle picture and caption -->
index.htmland see how the page looks.
Now that you've sucessfully added a turtle pic and caption to the add-turtle branch and staged and commited it, you're going to merge that branch into master.
git checkout master
git merge add-turtle
index.htmlin the browser. How does it look? Does it have two pictures now?
While you have this change locally, your remote repo (the one up on Github) still thinks that
index.html just has one picture, the tree/bird one. You need to tell it about this update.
git push origin master
To make sure this push worked, visit your fork of this repo. From there, you can double check in at least two ways:
Let's get local again: How many branches do you expect to see when you type
git branch? How many are there? What does this tell you about merging?
Now that you've added the changes you've made from add-turtle to master, and master has been pushed to the remote repo successfully, it's time to delete your local version of add-turtle.
git branchshould return
git branch -d add-turtle
git branch. You should only see
master, make a new branch,
add-walrus. On this branch, you're going to add the below code to
index.html, under the tree and turtle pictures.
<!-- begin walrus picture and caption --> <div class="center-container"> <div class="card"> <div class="caption"> <h4>Hello</h4> <p>Misty Gage</p> <p>Point Defiance Zoo, Tacoma, WA</p> </div> </div> <div class="card"> <img src="public/img/walrus.jpg" alt="walrus swimming with bubbles"> </div> </div> <!-- end walrus picture and caption -->
Remember to add and commit these changes.
add-walrus branch, switch to
master, make a new branch,
add-walrus-and-polar-bear. On this branch, you're going to add the below code to
index.html, under the tree and turtle pictures (the same location where you added the walrus photo).
<!-- begin polar bear picture and caption --> <div class="center-container"> <div class="card"> <img src="public/img/polar-bear.jpg" alt="polar bear on ice"> </div> <div class="card"> <div class="caption"> <h4>Arctic Hi Five</h4> <p>Colin Mackenzie</p> <p>Svalbard, northern Norway</p> </div> </div> </div> <!-- end polar bear picture and caption -->
Remember to add and commit these changes as well.
add-walrus-and-polar-bear branch, merge the
git merge add-walrus
index.html, and find the part that looks like:
<<<<<<< HEAD HTML for polar bear ======= HTML for walrus >>>>>>> add-walrus
Just decide which part of the markup you'd like to preserve: the first part from add-walrus-and-polar-bear, the second part from add-walrus, or both. Then delete the
Fix the merge conflict in
index.html so that index now has four photos: tree, turtle, walrus, and polar bear.
Remember, if you have multiple files with merge conflicts, you'll have to repeat this process with each file. Once you're done selecting which code to retain,
git add and
git commit these changes. Now when you type
git status, your terminal should not display "You have unmerged paths."
Now you're going to create a
add-walrus-and-polar-bear branch on your remote repo.
add-walrus-and-polar-bear, push the code to a remote branch of the same title. You can do this in one line with:
git push origin add-walrus-and-polar-bear.
Many times when working in groups, a developer will branch off of master, add some code, then push this new branch to the remote repo for another developer to work on.
Since you're working on this project alone, you're going to mimic the remote creation of a new branch. For the next section, you're going to pretend to be a team member, Lauren. Lauren likes to add emoticons to readmes.
Now click on the pencil icon, shown below:
Near the top of the markup, below the "Objectives" section, add the text below:
## Lauren Here: (╯°□°）╯︵ ┻━┻
Now the readme should look like this:
Scroll to the bottom, add a commit message like "added table flip to readme", and click commit changes.
Lauren's work here is done. You can go back to being you.
Now you need to get the changes that Lauren made.
git fetch origin add-firefliesor
git fetch --all
git branch. You probably still only see
add-walrus-and-polar-bear. Think about why this is.
git checkout add-fireflies
git branch. You should see three branches:
add-firefliesbranch, add the HTML code below to
index.html, below the turtle.
<!-- begin fireflies picture and caption --> <div class="center-container"> <div class="card"> <img src="public/img/fireflies.jpg" alt="fireflies in a forest"> </div> <div class="card"> <div class="caption"> <h4>Searching for Love</h4> <p>Spencer Black</p> <p>Blue ghost fireflies in Brevard, North Carolina</p> </div> </div> </div> <!-- end fireflies picture and caption -->
git add index.html,
git commit -m "add firefly img and caption") before checking out to master (
git checkout master).
git merge add-fireflies). Make sure all three pictures are there (tree, turtle, fireflies) before pushing up to your remote repository (
git push origin master).
git branch -D add-fireflies).
add-firefliesas it is now included in the master branch:
git push origin :add-fireflies
Just to review, this is the chronological order of this lab complete with a diagram of the branches:
Without looking at the diagram above, try and draw your own visualization. Take a picture of your work and add that image to the
public/img/ folder. Title your drawing "drawing.png".
From the master branch, replace the question marks in
spec/comprehension_spec.rb with the answers. Every answer should be a string. To check your answers, run
learn. (If you don't have the Learn gem installed, you'll need to do that first:
gem install learn-co. If the
gem command doesn't work, make sure you have a working installation of Ruby.) Once every test is passing, submit a pull request using your master branch.
add-walrus-and-polar-bear into master. Fix the merge conflicts and push the changes before deleting the local and remote
Now you have:
View Git Flow on Learn.co and start learning to code for free.