{"id":18471016,"url":"https://github.com/moonhighway/css-layout","last_synced_at":"2025-05-12T13:35:29.309Z","repository":{"id":84066078,"uuid":"40778356","full_name":"MoonHighway/css-layout","owner":"MoonHighway","description":"This course introduces the developers to layout concepts using css.","archived":false,"fork":false,"pushed_at":"2017-05-04T22:06:18.000Z","size":5683,"stargazers_count":5,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-20T03:06:40.944Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MoonHighway.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2015-08-15T18:48:12.000Z","updated_at":"2019-09-15T15:48:09.000Z","dependencies_parsed_at":"2023-04-01T14:06:43.567Z","dependency_job_id":null,"html_url":"https://github.com/MoonHighway/css-layout","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/MoonHighway%2Fcss-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoonHighway%2Fcss-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoonHighway%2Fcss-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoonHighway%2Fcss-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MoonHighway","download_url":"https://codeload.github.com/MoonHighway/css-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253748700,"owners_count":21957968,"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-11-06T10:15:34.567Z","updated_at":"2025-05-12T13:35:29.281Z","avatar_url":"https://github.com/MoonHighway.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"CSS Layout\n=============================\nThis course introduces the developers to layout concepts using css. We take a look at all of the ways that elements and \ntext can be handled to address the challenges of varying screen sizes.\n\nTopics\n------\n* Advanced Selection\n* Images and Text\n* Box Model and Positioning\n* Effects and Filters\n* Flexbox\n* Javascript Integration\n\n### Advanced CSS Selection\n\n* [Selector Playground](http://jsbin.com/movuku/1/edit?html,css,output)\n\n### Images and Text\n\n* [Boxes and Backgrounds (1-3)](http://jsbin.com/fisufe/1/edit?css,output)\n* [Embedded Images](http://jsbin.com/jevise/1/edit?css,output)\n* [Sprites](http://jsbin.com/kerafu/1/edit?css,output)\n* [google fonts](https://www.google.com/fonts)\n\n### Box Model Positioning\n\n* [barely fitz positions](http://www.barelyfitz.com/screencast/html-training/css/positioning/)\n* [box positions (1, 2)](http://jsbin.com/tilarag/1/edit?html,css,output)\n\n\n### Effects and Filters\n\n* [vendor prefixer](http://pleeease.io/play/)\n* [text shadow](http://jsbin.com/eboniki/1/edit?css,output), [box shadow](http://jsbin.com/Ulihaba/1/edit?css,output)\n* [border radius, circles](http://jsbin.com/obekipa/1/edit?html,css,output)\n* [gradients](http://jsbin.com/axahefo/1/edit?css,output)\n* [colors, rgb, hsl, rbga, hsla](http://jsbin.com/otajix/1/edit?html,css,output)\n* [Transform](http://jsbin.com/woluxa/1/edit?css,output)\n* [filters on images (1-10)](http://jsbin.com/eGAlIdi/5/edit?html,css,output)\n* [CSS3 Generator](http://css3generator.com/) \n\n### Flexbox\n\n* [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n* [Examples (1-5)](http://jsbin.com/rivawa/5/edit?html,css,output)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoonhighway%2Fcss-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoonhighway%2Fcss-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoonhighway%2Fcss-layout/lists"}