{"id":17070552,"url":"https://github.com/oakmac/flexbox-layout-exercises","last_synced_at":"2025-03-23T11:14:16.171Z","repository":{"id":66970571,"uuid":"155469871","full_name":"oakmac/flexbox-layout-exercises","owner":"oakmac","description":"CSS Layout Exercises using Flexbox","archived":false,"fork":false,"pushed_at":"2018-10-31T01:56:08.000Z","size":29,"stargazers_count":5,"open_issues_count":2,"forks_count":42,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-28T17:26:23.416Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oakmac.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-30T23:28:46.000Z","updated_at":"2024-11-24T00:25:19.000Z","dependencies_parsed_at":"2023-05-16T07:00:16.637Z","dependency_job_id":null,"html_url":"https://github.com/oakmac/flexbox-layout-exercises","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oakmac%2Fflexbox-layout-exercises","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oakmac%2Fflexbox-layout-exercises/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oakmac%2Fflexbox-layout-exercises/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oakmac%2Fflexbox-layout-exercises/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oakmac","download_url":"https://codeload.github.com/oakmac/flexbox-layout-exercises/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245090875,"owners_count":20559298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T11:32:12.194Z","updated_at":"2025-03-23T11:14:16.150Z","avatar_url":"https://github.com/oakmac.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Layout Exercises\n\nThese exercises are designed to practice doing layout using CSS with [flexbox].\n\n[flexbox]:https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox\n\n## Problem #1 - \"Holy Grail\" Layout\n\nInside a file called `holy-grail.html`, create a [Holy Grail] layout using flexbox that resembles [this image].\n\n**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.\n\n[Holy Grail]:https://en.wikipedia.org/wiki/Holy_Grail_(web_design)\n[this image]:https://upload.wikimedia.org/wikipedia/commons/a/ad/HolyGrail.svg\n\n## Problem #2 - Chessboard\n\nInside a file called `chessboard.html`, create a [chessboard] using HTML and flexbox. The board should work at any width for the outermost container.\n\nFor an extra challenge, add some chess pieces on their starting positions. How can you do this semantically?\n\n[chessboard]:https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Chessboard480.svg/416px-Chessboard480.svg.png\n\n## Problem #3 - Piet Mondrian Painting\n\n[Piet Mondrian] was a 20th century Dutch painter whose paintings emphasized simple geometric elements.\n\nInside a file called `mondrian.html`, create [this Piet Mondrian painting] using HTML and flexbox.\n\nIf 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).\n\nSome students have found printing the image and numbering each rectangle helpful.\n\n[Piet Mondrian]:https://en.wikipedia.org/wiki/Piet_Mondrian\n[this Piet Mondrian painting]:https://raw.githubusercontent.com/oakmac/flexbox-layout-exercises/master/mondrian.jpg\n\n## License\n\n[ISC License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foakmac%2Fflexbox-layout-exercises","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foakmac%2Fflexbox-layout-exercises","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foakmac%2Fflexbox-layout-exercises/lists"}