https://github.com/quantumudit/recipe-page
This repository features a responsive web page for an Egg Omelette recipe. It includes details on preparation time, ingredients, cooking instructions, and nutritional values. Built with HTML5 and CSS3, leveraging Flexbox, Grid, and media queries, the design is visually appealing, easy to navigate, and optimized for all screen sizes.
https://github.com/quantumudit/recipe-page
css css-flexbox css-grid html html-css-javascript
Last synced: 12 months ago
JSON representation
This repository features a responsive web page for an Egg Omelette recipe. It includes details on preparation time, ingredients, cooking instructions, and nutritional values. Built with HTML5 and CSS3, leveraging Flexbox, Grid, and media queries, the design is visually appealing, easy to navigate, and optimized for all screen sizes.
- Host: GitHub
- URL: https://github.com/quantumudit/recipe-page
- Owner: quantumudit
- Created: 2024-08-24T09:31:53.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-24T11:27:20.000Z (almost 2 years ago)
- Last Synced: 2025-02-17T10:49:42.741Z (over 1 year ago)
- Topics: css, css-flexbox, css-grid, html, html-css-javascript
- Language: HTML
- Homepage: https://quantumudit.github.io/Recipe-Page/
- Size: 1.11 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ![Project Logo][project_logo]
---
Developing Responsive Food Recipe Page with HTML and CSS and hosting it on GitHub Pages
Overview •
Prerequisites •
Hosting •
Support •
License
## Overview
This project focuses on designing and developing a responsive web page dedicated to an Egg Omelette recipe. The page is visually engaging, user-friendly, and adapts seamlessly to various screen sizes.
The web page provides comprehensive details on preparation time, required ingredients, step-by-step cooking instructions, and nutritional information for the Egg Omelette recipe, making it easy for users to follow.
Built with responsive design principles, the page ensures a smooth and optimized experience across all devices, including desktops, tablets, and smartphones. Regardless of the device, users can easily access and enjoy the content.
> This is a solution to the [Recipe Page Challenge](https://www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm). Frontend Mentor challenges helps improving coding skills by building realistic projects.
### Snapshots
Below is a preview of the Egg Omelette recipe web page, showcasing its layout and design:
### Links
- Live Site URL: [Recipe Page][website_link]
- Frontend Mentor Solution URL: [Challenge Solution Page][frontend_mentor_link]
### Repository Structure
The project repository exhibits the following structure:
```
Recipe-Page/
├── 📁css/
│ ├── 🎨style.css
├── 📁images
├── 📁resources
├── 🌐index.html
├── 📜.gitignore
├── 🔑LICENSE
└── 📝README.md
```
💡 Repository Structure Details
To help you navigate through the project, here’s a concise guide to the repository’s structure, detailing what each directory contains and its purpose within the project:
- **`📁css/`**
- **`🎨style.css`** - The main stylesheet that controls the look and feel of the entire website
- **`📁images`** - Stores images, graphics, and favicons used directly on the website
- **`📁resources`** - Holds additional resources like images or documents utilized in the project
- **`🌐index.html`** - The main HTML file that structures the web page and presents the content
- **`📜.gitignore`** - Specifies intentionally untracked files to ignore.
- **`🔑LICENSE`** - The license outlining the usage rights and permissions for this project
- **`📝README.md`** - The introductory documentation for the project
## Prerequisites
### Tech Stack Prerequisites
![html] ![css]
To effectively engage with this project, possessing a robust understanding of the skills listed below is advisable:
- Proficiency in HTML5
- Expertise in CSS3, including concepts like Flexbox, Grid layout, and Media Queries
- Familiarity with responsive design principles and color theory
These competencies will facilitate a seamless and productive journey throughout the project.
### Development Environment Prerequisites
![VS_code] ![Notepad_plus_plus] ![Obsidian] ![Figma] ![Clickup]
Application selection and setup may vary based on individual preferences and system setups.
The development tools I've employed for this project are:
- **VS Code**: Employed for writing and editing code
- **Notepad++**: Served as an auxiliary code editor
- **Obsidian**: Utilized for documenting project notes
- **Figma**: Used for UI/UX designing and design reference
- **Click Up**: Employed for overseeing project tasks
## Hosting
![GitHub_Pages] ![Frontend_Mentor]
The Egg Omelette recipe page is currently live and hosted on **GitHub Pages**, making it easily accessible for anyone interested. You can explore the fully responsive web page at the following URL: **[Recipe Page][website_link]**.
Additionally, my submission for this project is also available on **[Frontend Mentor][frontend_mentor_link]**, where you can view feedback and community interaction regarding the design and development process.
## Support
Should you wish to inquire, offer feedback, or propose ideas, don’t hesitate to contact me via the channels listed below:
[![Linkedin Badge][linkedinbadge]][linkedin] [![Twitter Badge][twitterbadge]][twitter] [![Gmail Badge][gmailbadge]][gmail]
Discover and engage with my content on these platforms:
[![Linktree Badge][linktreebadge]][linktree] [![Youtube Badge][youtubebadge]][youtube] [![GitHub Badge][githubbadge]][github] [![Medium Badge][mediumbadge]][medium] [![Substack Badge][substackbadge]][substack]
To express your support for my work, consider [buying me a coffee][buymeacoffee] or, [donate through Paypal][paypal]
[![Buy Me a Coffee][buymeacoffeebadge]][buymeacoffee] [![Paypal][paypalbadge]][paypal]
## License
This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format for noncommercial purposes only, and only so long as attribution is given to the creator. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.
---
---
[project_logo]: ./resources/project_cover_image.png
[frontend_mentor_link]: https://www.frontendmentor.io/solutions/responsive-recipe-page-NLjn68ARvA
[website_link]: https://quantumudit.github.io/Recipe-Page/
[linkedin]: https://www.linkedin.com/in/quantumudit/
[twitter]: https://twitter.com/quantumudit
[medium]: https://medium.com/@quantumudit
[linktree]: https://linktr.ee/quantumudit
[youtube]: https://www.youtube.com/@quantumudit
[github]: https://github.com/quantumudit/
[substack]: https://substack.com/
[gmail]: quantumudit@gmail.com
[buymeacoffee]: https://www.buymeacoffee.com/quantumudit
[paypal]: https://paypal.me/quantumudit
[linkedinbadge]: https://img.shields.io/badge/-uditkumarchatterjee-0e76a8?style=flat&labelColor=0e76a8&logo=linkedin&logoColor=white
[twitterbadge]: https://img.shields.io/badge/-quantumudit-000000?style=flat&labelColor=000000&logo=x&logoColor=white
[gmailbadge]: https://img.shields.io/badge/quantumudit@gmail.com-D14836?style=flat&logo=gmail&logoColor=white
[mediumbadge]: https://img.shields.io/badge/Medium-02b875?style=for-the-badge&logo=medium&logoColor=white
[linktreebadge]: https://img.shields.io/badge/Linktree-1de9b6?style=for-the-badge&logo=linktree&logoColor=white
[youtubebadge]: https://img.shields.io/badge/YouTube-%23FF0000.svg?style=for-the-badge&logo=YouTube&logoColor=white
[substackbadge]: https://img.shields.io/badge/Substack-%23006f5c.svg?style=for-the-badge&logo=substack&logoColor=FF6719
[githubbadge]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white
[buymeacoffeebadge]: https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black
[paypalbadge]: https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white
[HTML]: https://img.shields.io/badge/HTML5-E34F26.svg?style=for-the-badge&logo=html5&logoColor=white
[CSS]: https://img.shields.io/badge/CSS3-1572B6.svg?style=for-the-badge&logo=css3&logoColor=white
[Github_Pages]: https://img.shields.io/badge/GitHub%20Pages-222222.svg?style=for-the-badge&logo=github&logoColor=white
[Frontend_Mentor]: https://img.shields.io/badge/Frontend%20Mentor-3F54A3.svg?style=for-the-badge&logo=frontendmentor&logoColor=white
[VS_code]: https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white
[Notepad_plus_plus]: https://img.shields.io/badge/Notepad++-90E59A.svg?style=for-the-badge&logo=notepad%2b%2b&logoColor=black
[Figma]: https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white
[Obsidian]: https://img.shields.io/badge/Obsidian-%23483699.svg?style=for-the-badge&logo=obsidian&logoColor=white
[Clickup]: https://img.shields.io/badge/-Click%20Up-7B68EE?style=for-the-badge&labelColor=7B68EE&logo=clickup&logoColor=white