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.
- Handy cheatsheet for Ruby, Rails, console etc.
- Guide 1: Guide to install Rails
- Guide 2: Build Your First App
- Guide 3: Push Your App to GitHub
- Guide 4: Put your app online with…
- Guide 5: Allow Comments on Your App
- Guide 6: Add design using HTML & CSS
- Guide 7: Create thumbnails with Carrierwave
- Guide 8: Add Authentication (user accounts) with Devise
- Guide 9: Add Profile Pics with Gravatar
- Guide 10: Improve your design with HTML and CSS (Current page!)
- Guide 11: Continuous Deployment
- Guide 12: Build a voting app in Sinatra
- Guide 13: Build a diary app in Ruby on Rails
- Guide 14: Add a back-end to your app (admin pages)
- Guide 15: Go through additional explanations for the App