CSS Grid: Windows 8 Desktop Mockup

For this exercise, please download the screenshot.

You will need to use the following:

  • CSS Grid(s) to lay out the page and components
  • Typekit.com to serve a font that as closely as possible matches the Segoe Windows system font (which is not available anywhere except in Windows itself). You will need an Adobe membership to use this service.
  • CoolPHPTools.com to extract a color palette from the screenshot.
  • IcoMoon to create a font of as many similar icons as possible.

Make a mockup of the desktop shown in the screenshot. You do not need to exactly match all of the images in the screenshot. Try to get the icons as close as possible, however.


You can work in groups of two for this. When done, show it to me. Make your stylesheet and HTML as neat and tidy as possible.