Practice HTML & CSS: Desktop Web App Layout due April 22, 2019

Assignment

Write the HTML and CSS to recreate the example Brio web app, based on Gusto.

Suggestions

• Start with the HTML first, focusing on sensible semantic markup wherever possible. If you don’t find an appropriate element, use a div or a span with a descriptive class.
• As you move into CSS, try proceeding in the following order:
  1. Set some base styles for typography and colors throughout the page.
  2. Lay out the major elements of the page, inside a media query for screen sizes large enough to support the layout.
  3. Work your way in to lay out interior parts of the page.
  4. With the layouts in place, begin styling individual components at the smallest screen size first.
  5. Resize your browser as you work to confirm things are looking right.
  6. Apply style corrections at larger break points where needed.

Timeframe

Please give yourself a maximum of 3 hours to work on this assignment. It’s unlikely you will get to every last detail, and that’s OK. The point of this exercise is to get a better intuitive feeling for how flexible layouts work in a way that we simply cannot inside of a fixed-canvas tool like Sketch, and also to get a better sense of the level of detail that goes into design implementation. If you spend a solid few hours on this, you should have plenty of opportunity to experience both.

Submission

Please submit your finished files in a ZIP archive uploaded to the Google Drive for review and feedback.