{"id":22349434,"url":"https://github.com/vtickner/odin-recipes","last_synced_at":"2026-05-04T02:37:16.893Z","repository":{"id":176740516,"uuid":"656664017","full_name":"VTickner/odin-recipes","owner":"VTickner","description":"This recipe pages project was part of The Odin Project course.","archived":false,"fork":false,"pushed_at":"2023-11-21T15:37:27.000Z","size":30991,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T12:34:51.122Z","etag":null,"topics":["css","css-flexbox","html","javascript","responsive-web-design","website"],"latest_commit_sha":null,"homepage":"https://vtickner.github.io/odin-recipes/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VTickner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-06-21T11:43:36.000Z","updated_at":"2023-10-16T19:32:18.000Z","dependencies_parsed_at":"2023-11-21T17:02:48.945Z","dependency_job_id":null,"html_url":"https://github.com/VTickner/odin-recipes","commit_stats":null,"previous_names":["vtickner/odin-recipes"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VTickner%2Fodin-recipes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VTickner%2Fodin-recipes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VTickner%2Fodin-recipes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VTickner%2Fodin-recipes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VTickner","download_url":"https://codeload.github.com/VTickner/odin-recipes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245641494,"owners_count":20648657,"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":["css","css-flexbox","html","javascript","responsive-web-design","website"],"created_at":"2024-12-04T11:08:18.139Z","updated_at":"2026-05-04T02:37:11.863Z","avatar_url":"https://github.com/VTickner.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ODIN RECIPES PROJECT\n\nThis project was part of [The Odin Project](https://www.theodinproject.com) course.\n\n## Table of contents\n\n- [Project Overview](#project-overview)\n- [Odin Recipes Website](#odin-recipes-website)\n  - [Screenshots](#screenshots)\n  - [Links](#links)\n- [Process](#process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n\n## Project Overview\n\nThe assignment was to create an index page that linked to three different recipe pages. Each recipe page was to contain a:\n\n- title\n- image of the finished recipe\n- description\n- unordered list of ingredients\n- ordered list of steps to make the recipe\n\n## Odin Recipes Website\n\n### Screenshots\n\nDesktop:  \n![Desktop screenshot](./img/desktop-screenshot.jpg)\n\nMobile:  \n![Mobile screenshot](./img/mobile-screenshot.jpg)\n\n### Links\n\n- Solution URL: [https://github.com/VTickner/odin-recipes](https://github.com/VTickner/odin-recipes)\n- Live Site URL: [https://vtickner.github.io/odin-recipes/](https://vtickner.github.io/odin-recipes/)\n\n## Process\n\n- Created the basic HTML structure of the recipe site and added images and recipe content.\n- Created the CSS for the index page (desktop), with also a zoom in hover effect on the images using transform: scale().\n- Added a footer copyright statement that updates the year using JavaScript.\n- Created the CSS for the recipe pages (desktop) and made square images to use for the recipe pages to have a round image effect.\n- Refactored the CSS to make DRY.\n- Altered images to make smaller and reduced file sizes using Squoosh.\n- Added media queries to CSS to create a responsive web design for smaller devices.\n- Edited :focus to match styling for keyboard only users.\n\n### Built with\n\n- HTML5\n- CSS3\n  - Flexbox\n  - Transform: scale()\n- JavaScript\n  - Update copyright year\n\n### What I learned\n\nIn the previous lessons on The Odin Project I learnt how to set up a virtual machine (Virtual Box with Xubuntu), how to use terminal commands and basic Git instructions (clone, add, commit, pull, push, status). Therefore on this project, I worked via the virtual machine and used git commands via a terminal to save the progress of the project to GitHub.\n\nWhilst I didn't learn any new CSS for this project, I did put into practice into my own design, some techniques I had previously learnt about.\n\n### Continued development\n\nTo learn and practice using other Git instructions e.g. git merge.\n\n### Useful resources\n\n- [Virtual Box](https://www.virtualbox.org/wiki/Downloads) - Virtual machine for windows.\n- [Xubuntu](https://xubuntu.org/) - A derivative of the Ubuntu operating system.\n- [All Recipes](https://www.allrecipes.com/) - A large selection of recipes.\n- [Pexels Photos](https://www.pexels.com/) - Free stock royalty free photos and images.\n- [GIMP](https://www.gimp.org/) - Free and open source image editor.\n- [Squoosh App](https://squoosh.app/) - Free tool that reduces image sizes.\n- [Coolers Colour Contrast Checker](https://coolors.co/contrast-checker/112a46-acc8e5) - Free tool that allows you to check the colour contrast of the text to background colour for accessibility / readability purposes.\n\n## Author\n\n- V. Tickner\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtickner%2Fodin-recipes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtickner%2Fodin-recipes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtickner%2Fodin-recipes/lists"}