This is an assignment to build a responsive ecommerce web page. Nav and product container div will use flexbox. Sidebar/aside is a module that changes layout and location based on window size. Submitting the mailing list signup form results in user feedback on the page.
Students may use the provided mockups to guide their design to whatever extent they like. Matching the mockups is not required.
- basic HTML and CSS
- JSON list of products in script.js file
- reset.css
- images for all products
- suggested design mockups
Lesson 03:
- Make design decisions about how you'd like your site to look. You can use the provided mockups to guide your design to whatever extent you'd like- feel free to implement them exactly or make up your own design completely.
- Code basic CSS for page.
reset.cssfile should remain as it is.main.cssfile can be added to, changed, or completely redone. nav uland.item-containerelements should be styled as flexbox containers. Implement a responsive grid system of your own design, or use a library, or don't use a grid at all. Be sure all important size values are proportional (em, rem, %).- We'll continue working on the CSS for this project throughout the course, in particular making it more responsive. The styling does not have to be perfect after this assignment. It's fine to change or add to the HTML as necessary for your styling.
- Site layout looks good on all sizes of devices. At a minimum, elements are proportionally styled and aside element changes location and layout at different screen sizes. This should be tested using a variety of devices and at least one online browser compatiblity testing tool.
- Nav and product container elements are styled using flexbox.
- Appropriately sized images are served.
- Site is live on GH Pages hosting.