This activity is intended to help you practice CSS layout tools, namely flexbox and grid. For MP2, you are required to submit a gallery page of your P5 sketches. You can easily build a responsive gallery page with CSS!
- Explore the example repository. It has small demonstrations of the core features of flexbox and grid. You can view a live site here.
- Use the examples and the resources below to prototype a gallery page for you P5.js sketches. The examples show how you can create a grid layout - but your gallery page should (eventually) include screenshots or gifs of your P5 sketches.
I recommend making the outer container of your page a flex box and then putting
a div with display:grid inside it, as that will allow you to center the grid.
This is how the examples are structured, however, your grid elements should
include images inside them!
For now, you can use a placeholder image as you build your prototype. The example repository also shows how you can put your P5 sketches into a single HTML file and link to them from a different page. Your gallery should eventually resemble something like this or this gallery from Matt DesLaurier.
- In-class codepens: flex and grid
- Grid tile layouts blog post
- As usual, the MDN Docs: flexbox and Basic flexbox and grid
- A complete guide to flexbox and A complete guide to grid are probably the two best articles on CSS tricks
- flexbox froggy is always a fun game!
- Kevin Powell on YouTube - hands down the best Youtube tutorials to CSS concepts. Some that might be of interest: