These exercises are designed to practice doing layout using CSS with flexbox.

Inside a file called holy-grail.html, create a Holy Grail layout using flexbox that resembles this image.

NOTE: Due to the nature of this problem, there are many examples of this already done on the Internet. Honor system here; do not cheat. This is an example of a "real world" problem.

Inside a file called chessboard.html, create a chessboard using HTML and flexbox. The board should work at any width for the outermost container.

For an extra challenge, add some chess pieces on their starting positions. How can you do this semantically?

Piet Mondrian was a 20th century Dutch painter whose paintings emphasized simple geometric elements.

Inside a file called mondrian.html, create this Piet Mondrian painting using HTML and flexbox.

If you're having trouble creating the whole thing, pick a "chunk" of the painting and work on just that. Then pick another "chunk" and do that, etc. How can you combine your chunks into a single image? (think: HTML tree structure).

Some students have found printing the image and numbering each rectangle helpful.

ISC License