Monday, February 7, 2011

HW4: CSS and Mobile

You will now use what you have learned about web design and CSS and build two style sheets: one for the desktop and one for mobile, and incorporate these into your website. Specifically, you will:

  1. Create a style sheet for the whole website. All the pages (/, /account, /user) should use this style. Note that you will need to modify your app.yaml for the stylesheets to be downloadable.
  2. Your style should have a coherent color scheme, a logo (can be just text in a different font), distinct login bar, and, well, it should have a bit of style.
  3. Create a new dummy page, /question which lists a sample question (in the next homework you will be implementing the question-entering form). Remember that this is a multiple-choice question, with radio buttons for answering. This new page should also use the style.
  4. Create an alternate mobile style for the /question page. This style should be optimized for viewing in an iphone or android phone. If you don't have one, you can use safari to preview it, otherwise, just make your browser window really small.

This homework is due on Monday, February 14 @11am. You can upload it at

Required Reading

Recommended Reading


  1. Great Link to simulate iphone browser

  2. Dr. Vidal I know you said that you were not going to post full HW solutions but do you think you could post a way to do the mobile CSS? Not the CSS itself but the code that has to go into the HTML for the mobile CSS to work.

  3. If you mean the <link media... code, here is a good SO question on it:

    There are a lot of phones/smartphones, new ones coming out every day, and each one seems to deal with the <link media.. differently.