Exercise 1: Frontend programming

Clone the start project from: FrontEnd starter code and open the project in netbeans

1. Style with pure CSS

  1. Open the file: cssex1.html
  2. Link a new stylesheet to the html page.
  3. Change the look of the content in div with id = top_menu. Make it a horisontal menu:
  4. Change the look of the content in div with id = left_menu. Make it a vertical navigation bar to the left side (under the top menu)
  5. Change the look of the content in div with id = right_content. Make it sit to the right side of the left_menu. Give it an appropriate font-family, border and padding etc.

2. Style with bootstrap

  1. Open the file: cssex2.html setup links to bootstrap CDN: Look here.
  2. Use bootstrap to get a top menu, a left menu and a zebra striped look on the table in the right side content div (Hint: use Bootstrap grid to get the left and right hand side)
  3. Play around with different bootstrap tricks to prittyfy the content.