{"id":22076152,"url":"https://github.com/muthhukumar/sole-and-ankle","last_synced_at":"2025-03-23T20:14:03.759Z","repository":{"id":155885563,"uuid":"443552795","full_name":"muthhukumar/sole-and-ankle","owner":"muthhukumar","description":null,"archived":false,"fork":false,"pushed_at":"2022-01-01T14:18:54.000Z","size":8338,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T03:48:38.683Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://sole-and-ankle.pages.dev/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/muthhukumar.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":"2022-01-01T14:15:13.000Z","updated_at":"2023-03-09T01:46:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"6d2848c0-693e-41f2-a59e-77ea895f7c4e","html_url":"https://github.com/muthhukumar/sole-and-ankle","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/muthhukumar%2Fsole-and-ankle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muthhukumar%2Fsole-and-ankle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muthhukumar%2Fsole-and-ankle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muthhukumar%2Fsole-and-ankle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/muthhukumar","download_url":"https://codeload.github.com/muthhukumar/sole-and-ankle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245162189,"owners_count":20570692,"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-30T22:12:43.827Z","updated_at":"2025-03-23T20:14:03.717Z","avatar_url":"https://github.com/muthhukumar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sole\u0026Ankle — Module 4 workshop\n\nIn this workshop, our goal is to finish building an e-commerce store!\n\nThe good news is, most of our work is done already. We just need to write some additional CSS to construct the layout; things are a bit messy right now!\n\n- Access the Figma: https://www.figma.com/file/kAL3AumTUV11y1IqHhltB6/Sole-and-Ankle-%E2%80%94-Mockup\n\nThis project uses Create React App. To get started, run the following terminal commands:\n\n- `npm install`\n- `npm run start`\n\nYou can then visit the app in-browser; it defaults to http://localhost:3000.\n\n_Note that we're only focusing on the design._ The links and inputs don't do anything.\n\n\u003e **Want a bigger challenge?**\n\u003e\n\u003e This workshop comes with a lot of starter code — we'll be adding\n\u003e Flex-specific properties, but for the most part, we don't have a\n\u003e ton of code to write. If you'd prefer, you can build the app from\n\u003e scratch, to practice all the CSS we've learned so far!\n\u003e\n\u003e If you go that route, you can find the sneaker assets you need in\n\u003e `/public/assets`, and their metadata in `/src/data.js`. Design\n\u003e tokens can be found in `/src/constants`. The custom font is\n\u003e Raleway, from Google Fonts.\n\n## Exercise 1: Superheader\n\nLet's build the “Superheader” a thin grey strip that runs along the top of the page:\n\n![Close-up screenshot of the superheader](./docs/exercise-1-solution.png)\n\nUse Flexbox to correctly align the elements within `src/components/SuperHeader`.\n\n## Exercise 2: Header\n\nContinuing on down, let's tackle the main header:\n\n![Close-up screenshot of the header and superheader](./docs/exercise-2-solution.png)\n\n## Exercise 3: Shell\n\nNext up, we want to tackle the \"framing\" around the shoe grid — the sidebar and title/filter.\n\n![Screenshot of the store, with everything except the sneaker grid](./docs/exercise-3-solution.png)\n\n_NOTE:_ To make life a bit easier, you may wish to comment out the `\u003cShoeGrid\u003e` component. We'll work on integrating it in the next exercise.\n\n## Exercise 4: Shoe Grid\n\nThis exercise features two mini-challenges. The second one is a chance to revisit some of the lessons learned in previous modules, and isn't as specific to Flexbox.\n\n### 4A: Grid layout\n\nTime to tackle the main feature of this application, the shoes!\n\nHere's a screenshot of the final result:\n\n![Screenshot of the store, with sneaker grid](./docs/exercise-4a-solution.png)\n\nThis is a tricky problem to solve with Flexbox—CSS Grid is a better tool for this job! Nevertheless, it can be done using Flexbox, with one caveat: the last row may be oversized:\n\n![Screenshot of the shoe grid with one enormous sneaker, spanning 4 typical columns](./docs/giant-sneaker.png)\n\nIn a future module, we'll revisit this and see how CSS Grid can help us out :)\n\n## 4B: Final touches\n\nOur sneaker store is in pretty good shape, but there's a couple small bits of polish missing: the \"New Release\" / \"Sale\" flag, and the sale price detail.\n\n_NOTE:_ This exercise has minimal flexbox implications, and is mainly about revisiting lessons learned in the previous modules (including positioned layout and styled-components). Feel free to skip it if you'd prefer!\n\n![Screenshot of the store, with the final details added](./docs/exercise-4b-solution.png)\n\n## To be continued!\n\nOur sneaker store can flex to support different screen sizes, but there isn't a proper mobile or tablet view. Don't fret — we will revisit this workshop in a future module!\n\nIn the meantime, take a moment to congratulate yourself for making it through the Flexbox module!!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuthhukumar%2Fsole-and-ankle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuthhukumar%2Fsole-and-ankle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuthhukumar%2Fsole-and-ankle/lists"}