https://github.com/oakmac/flexbox-layout-exercises
CSS Layout Exercises using Flexbox
https://github.com/oakmac/flexbox-layout-exercises
Last synced: about 1 year ago
JSON representation
CSS Layout Exercises using Flexbox
- Host: GitHub
- URL: https://github.com/oakmac/flexbox-layout-exercises
- Owner: oakmac
- License: isc
- Created: 2018-10-30T23:28:46.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-31T01:56:08.000Z (over 7 years ago)
- Last Synced: 2025-01-28T17:26:23.416Z (over 1 year ago)
- Size: 28.3 KB
- Stars: 5
- Watchers: 2
- Forks: 42
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# CSS Layout Exercises
These exercises are designed to practice doing layout using CSS with [flexbox].
[flexbox]:https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
## Problem #1 - "Holy Grail" Layout
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.
[Holy Grail]:https://en.wikipedia.org/wiki/Holy_Grail_(web_design)
[this image]:https://upload.wikimedia.org/wikipedia/commons/a/ad/HolyGrail.svg
## Problem #2 - Chessboard
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?
[chessboard]:https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Chessboard480.svg/416px-Chessboard480.svg.png
## Problem #3 - Piet Mondrian Painting
[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.
[Piet Mondrian]:https://en.wikipedia.org/wiki/Piet_Mondrian
[this Piet Mondrian painting]:https://raw.githubusercontent.com/oakmac/flexbox-layout-exercises/master/mondrian.jpg
## License
[ISC License](LICENSE.md)