1. Design your header
put the following code to the bottom of
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：
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:
Modify size of the picture using the following lines
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:
try add some background style with property
background-image, reference to http://subtlepatterns.com/ for some patterns.
3. add style to footer
add the lines to bottom of app/assets/stylesheets/application.css:
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
Coach: explain how to use
border in css, try modify the style of button like round the corner, add shadow or color etc.