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/.

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.