Click here to go to the website
Thie website is designed for a imaginary grocery store, Parayo, to sell a number of fresh produce, meat and dairy products.
By making this static website, I learned:
- proper Viewport settings for mobile device width and scaling
- Flexible CSS sizes for widths, heights, and fonts that work relative to the available space
- Use modern CSS layout tools like Flexbox or Grid vs. fixed sizes
- Show, hide, or re-arrange the layout elements based on available screen real estate
- CSS3 Media Queries using min-width, orientation, etc.
- Design for both Portrait and Landscape modes
- Optimize UI elements for Mouse/Keyboard AND Touch based events
- Make sure fonts, images, and icons work at every size and on every device