Preparation
Complete the following to prepare for this assignment:
- Chapter 4 of Critical Web Design
- Course content listed on the schedule
Rubric
See Moodle.Fork this repository and clone it to your machine.
- ๐ "On the Grid" (chapter 4) in Critical Web Design
- Chapter example(s): The New York Felines
- Articles:
- ๐ Diogo Terror Lessons From Swiss Style Graphic Design (2009)
- ๐ Andrew Maher How You Make A Grid (2-9) (2011)
- ๐ Frank Chimero Craft and Beauty (28-34) in The Shape of Design (2012)
- ๐ Aigars Silkalns 20 Excellent Websites With Responsive Web Design (2023)
- Graphic Design Theory #12 - Grids (10:02)
Follow the prompt in Chapter 4 of Critical Web Design to create a responsive grid-based design.
- Start with the desktop layout first.
- Use a layout grid for each device size in Figma. See also Everything you need to know about layout grids in Figma by Thomas Lowry
- Use any grid-based site as inspiration.
- Add any text and images you like; for example Lorem Ipsum or alternatives
- After you have completed multiple versions of the desktop, complete the tablet and mobile layouts.
Code your design in HTML/CSS/JS using the Bootstrap framework. Test your breakpoints often by adjusting the width of the browser window.
- Save and refresh your work in the browser often to see your changes.
- Commit changes regularly.
- Confirm valid HTML and CSS (?)
- When finished, push, publish, and post all deliverables to Moodle per documentation in the Assignments.