Practice HTML & CSS: Desktop Web App Layout due April 22, 2019
Write the HTML and CSS to recreate the example Brio web app, based on Gusto.
- Start with the HTML first, focusing on sensible semantic markup wherever possible. If you don’t find an appropriate element, use a
spanwith a descriptive
- As you move into CSS, try proceeding in the following order:
- Set some base styles for typography and colors throughout the page.
- Lay out the major elements of the page, inside a media query for screen sizes large enough to support the layout.
- Work your way in to lay out interior parts of the page.
- With the layouts in place, begin styling individual components at the smallest screen size first.
- Resize your browser as you work to confirm things are looking right.
- Apply style corrections at larger break points where needed.
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.
Please submit your finished files in a ZIP archive uploaded to the Google Drive for review and feedback.