https://github.com/vtickner/odin-recipes
This recipe pages project was part of The Odin Project course.
https://github.com/vtickner/odin-recipes
css css-flexbox html javascript responsive-web-design website
Last synced: about 1 month ago
JSON representation
This recipe pages project was part of The Odin Project course.
- Host: GitHub
- URL: https://github.com/vtickner/odin-recipes
- Owner: VTickner
- Created: 2023-06-21T11:43:36.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-21T15:37:27.000Z (over 2 years ago)
- Last Synced: 2025-01-31T12:34:51.122Z (over 1 year ago)
- Topics: css, css-flexbox, html, javascript, responsive-web-design, website
- Language: HTML
- Homepage: https://vtickner.github.io/odin-recipes/
- Size: 29.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ODIN RECIPES PROJECT
This project was part of [The Odin Project](https://www.theodinproject.com) course.
## Table of contents
- [Project Overview](#project-overview)
- [Odin Recipes Website](#odin-recipes-website)
- [Screenshots](#screenshots)
- [Links](#links)
- [Process](#process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
## Project Overview
The assignment was to create an index page that linked to three different recipe pages. Each recipe page was to contain a:
- title
- image of the finished recipe
- description
- unordered list of ingredients
- ordered list of steps to make the recipe
## Odin Recipes Website
### Screenshots
Desktop:
Mobile:
### Links
- Solution URL: [https://github.com/VTickner/odin-recipes](https://github.com/VTickner/odin-recipes)
- Live Site URL: [https://vtickner.github.io/odin-recipes/](https://vtickner.github.io/odin-recipes/)
## Process
- Created the basic HTML structure of the recipe site and added images and recipe content.
- Created the CSS for the index page (desktop), with also a zoom in hover effect on the images using transform: scale().
- Added a footer copyright statement that updates the year using JavaScript.
- Created the CSS for the recipe pages (desktop) and made square images to use for the recipe pages to have a round image effect.
- Refactored the CSS to make DRY.
- Altered images to make smaller and reduced file sizes using Squoosh.
- Added media queries to CSS to create a responsive web design for smaller devices.
- Edited :focus to match styling for keyboard only users.
### Built with
- HTML5
- CSS3
- Flexbox
- Transform: scale()
- JavaScript
- Update copyright year
### What I learned
In 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.
Whilst 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.
### Continued development
To learn and practice using other Git instructions e.g. git merge.
### Useful resources
- [Virtual Box](https://www.virtualbox.org/wiki/Downloads) - Virtual machine for windows.
- [Xubuntu](https://xubuntu.org/) - A derivative of the Ubuntu operating system.
- [All Recipes](https://www.allrecipes.com/) - A large selection of recipes.
- [Pexels Photos](https://www.pexels.com/) - Free stock royalty free photos and images.
- [GIMP](https://www.gimp.org/) - Free and open source image editor.
- [Squoosh App](https://squoosh.app/) - Free tool that reduces image sizes.
- [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.
## Author
- V. Tickner