Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fmanimashaun/recipe-page
https://github.com/fmanimashaun/recipe-page
Last synced: about 14 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/fmanimashaun/recipe-page
- Owner: fmanimashaun
- Created: 2024-04-29T10:49:22.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-04-29T11:12:38.000Z (7 months ago)
- Last Synced: 2024-10-10T07:41:59.969Z (about 1 month ago)
- Language: SCSS
- Size: 2.32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Recipe page solution
This is a solution to the [Recipe page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)## Overview
### The challenge
The challenge is to build out this Recipe page and get it looking as close to the design as possible.
Your users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements### Screenshot
#### Desktop view
![Desktop view](screenshots/desktop.png)
#### Mobile view
![Mobile view](screenshots/mobile.png)
### Links
- [Solution URL](https://github.com/fmanimashaun/recipe-page)
- [Live Site URL](https://fmanimashaun.github.io/recipe-page/)## My process
### Built with
- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [JavaScript/ES6](https://262.ecma-international.org/6.0/)
- [Git](https://git-scm.com/)
- [GitHub](https://github.com)
- [Figma](https://www.figma.com/)
- [webpack 5](https://webpack.js.org/)
- [sass](https://sass-lang.com/)### What I learned
Basically, I worked to reinforced my knowledge of interpreting UI/UX design and implemeenting the layout as close as possible to the design.
### Continued development
I will still want to focus on reinforcing my understanding of various layout implementation while learning javascript for use in future projects
### Useful resources
------
## Author
👤 **Engr. Animashaun Fisayo**
- [GitHub](https://github.com/fmanimashaun)
- [Twitter](https://twitter.com/fmanimashaun)
- [LinkedIn](https://www.linkedin.com/in/fmanimashaun/)
- [Website](https://fmanimashaun.com)
- [Blog](https://blog.fmanimashaun.com)## Acknowledgments
------