Improve Home Page with Course Listing

Notes


Our home page is looking pretty sparse.  So let's start to fill in some content.  In our app/controllers/home_controller.rb file lets update the index method to look like this:

def index
  @courses = Course.all
end

This will give our home page view access to all the courses in the system so we can display them on the home page.  Next lets open up the app/views/home/index.html.erb file and update it to display any courses in the system.

Underneath our jumbotron container at the top of this file, let's add the following snippet of HTML/Ruby:

<div class="container">
  <div class="row">

    <div class="col-sm-12 offset-md-1 col-md-3 mb-5">

      <% @courses.each do |course| %>

          <div class="card">
            <img class="card-img-top" src="<%= url_for(course.image) %>" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title"><%= course.title %></h5>
              <p class="card-text"><%= course.description %></p>
              <%= link_to 'View course', course, class: "btn btn-primary" %>
            </div>
          </div>

      <% end %>

    </div>
  </div>
</div>

This HTML users Bootstrap for some styling and will display our Course objects within cards.

Make sure to watch the video and get comfortable with looking at the Bootstrap documentation.  Notably in the code above you want to be comfortable with the idea of containers in Bootstrap as well as cards (see links).

This home page will continue to evolve, but for now are are making progress filling in some content.

Happy coding yo!!