1. Design your header

Put the following code to the bottom of app/assets/stylesheets/application.css:

.navbar {
   min-height: 38px;
   background-color: #f55e55;
}

Now refresh the page and check the changes. You can try change the color or font of the header. You can check the color reference from http://color.uisdc.com/.

Coach: talk about the property display, inline and block element.

Then put these lines at the bottom：

.navbar a.brand { font-size: 18px; }
.navbar a.brand:hover {
   color: #fff;
   background-color: transparent;
   text-decoration: none;
}

Coach: explain the 4 states of a link

2. Design your table

We simply use the twitter Bootstrap to polish our table。find this line from app/views/ideas/index.html.erb and replace:

<table>

with

<table class="table">

Modify size of the picture using the following lines

<%= image_tag(idea.picture_url, :width => 600) if idea.picture.present? %>

try to change the width and see what’s gonna happen

add the following lines to the bottom of file app/assets/stylesheets/ideas.css.scss:

.container a:hover {
    color: #f55e55;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0);
  }

try add some background style with property background-image, reference to http://subtlepatterns.com/ for some patterns.

add the lines to bottom of app/assets/stylesheets/application.css:

footer {
    background-color: #ebebeb;
    padding: 30px 0;
  }

try put more things into footer, then adjust it’s position.

4. add style to button

open http://localhost:3000/ideas/new and find the Create Idea button.

add these lines to app/assets/stylesheets/ideas.css.scss:

.container input[type="submit"] {
    height: 30px;
    font-size: 13px;
    background-color: #f55e55;
    border: none;
    color: #fff;
  }

Coach: explain how to use border in css, try modify the style of button like round the corner, add shadow or color etc.