Build a static, html+css prototype based on the images in the screens directory. The goal is to create the basic structure of the screen by using the proper components from a frontend library. For this assignment, you do not need to make the style (color, fonts, etc.) match the screens exactly.
Below are four frontend frameworks to choose from. Pick whichever looks best to you.
Additional select design resources:
Your prototype must contain all three of the following components:
- Dropdown
- Grid/Columns
- Modal
Your prototype should contain your choice of five of the following components.
- Table
- Input Group
- Button Group
- Glyph Icon
- Label
- Alert
- Tooltip
One of the greatest challenges to web design and development is that your project needs to look nice and work on a range of devices of different shapes, sizes, and operating systems. You may have noticed that sometimes you want your design to look one way on a large screen and another way on a small smart phone. This issue is addressed by media queries.
At the bottom of your style.css file you should see two media queries. Add CSS inside the media
queries that will:
- Make the sidebar slightly smaller and the map slightly larger when the screen width is between 800px and 480px
- Move the sidebar entirely and have the map take up the full screen when the width is smaller than 480px
Keep going! Try to match all of the components. If you have additional time, can you make the style look more similar to the screens?
Can you recreate the blue navigation on the left side of the screens?