Create Design Branch in Git and Style the Footer

Notes


Time for some git housekeeping!!  If you are following the lessons in sequence, we've written a bit of code but have yet to store it in git.

Typically when building software you'll want to commit your code periodically throughout the day.  And it is always generally advisable to commit your code at least once day after you finish coding (I think more often is better).

So let's start by creating a branch in git.  From the command line, run:

git branch Unit5DesignInRails && git checkout Unit5DesignInRails

Note that the && command above will allow you to run more than one command at once.  Your terminal shell program will first run the git branch command then after it has complete it will run git checkout.

Now let's run

git add .

followed by

git commit -m "Add name to user and improve welcome page"

followed by

git push --set-upstream origin Unit5DesignInRails

Now your code will be safely stored in GitHub and you don't have to worry about losing work!

Next lets improve the footer a bit.  Let's start by making the links in the footer look a bit better by changing their color from blue to white.

In the app/assets/stylesheets/home.scss file, lets add the following snippet of code:

footer {
  background-color: #2E2F30;
  color: #ffffff;
  width: 100%;

  a, a:hover {
    color: #ffffff;
  }
}

Specifically this will make any links in the footer white.

We can also add another column to the footer and display any available courses there.  To do this, open up the app/views/shared/_footer.html.erb partial and and the following snippet of code:

<div class="col-sm-12 col-md-3 my-5">
  <h5 class="mb-3">Courses</h5>
  <% Course.all.each do |course| %>
      <%= link_to course.title, course %>
      <br>
  <% end %>
</div>

Note in the code above we use Course.all instead of using an @courses instance variable.  We do this mainly because it is nice to not have pollute any controller using this footer or the top-level parent controller with loading courses when we simply just want to load them all at any time.

Some MVC purists may not like this, but it is a reasonable thing to do in this case.

Now we have a couple columns and are slowing making our site easier to navigate and use.

Continue to add any tweaks you want to the footer styling.  Things like changing the colors or updating the margins are easily handled with a modicum of custom CSS or by using built in Bootstrap CSS classes.

You now have the tools to make the Internet look great or like total crap.  It is a lot of responsibility!!

Happy designing!!