Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yutaasakura96/project-omnifood
This repository showcases my expertise in web development, representing the culmination of my HTML/CSS course. Omnifood, a fictional company specializing in AI-based meal subscriptions, serves as the centerpiece for this meticulously crafted single-page website.
https://github.com/yutaasakura96/project-omnifood
html-css-javascript
Last synced: about 1 month ago
JSON representation
This repository showcases my expertise in web development, representing the culmination of my HTML/CSS course. Omnifood, a fictional company specializing in AI-based meal subscriptions, serves as the centerpiece for this meticulously crafted single-page website.
- Host: GitHub
- URL: https://github.com/yutaasakura96/project-omnifood
- Owner: yutaasakura96
- License: mit
- Created: 2024-01-02T06:26:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-04T05:46:18.000Z (6 months ago)
- Last Synced: 2024-11-11T14:12:35.036Z (3 months ago)
- Topics: html-css-javascript
- Language: HTML
- Homepage: https://omnifood-yasakura.netlify.app/
- Size: 5.09 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📚 Omnifood Project
This project is the culmination of my HTML/CSS course, showcasing my web development skills. **Omnifood** is a fictional company specializing in AI-based meal subscriptions, and this single-page website highlights both responsive design and advanced CSS techniques.
🌐 **[Live Demo](https://omnifood-yasakura.netlify.app/)**
## 🚀 Features
### 🍔 Responsive Hamburger Menu
- Designed a responsive **hamburger menu** that dynamically appears on smaller screens, enhancing user experience for mobile visitors.
### 🧭 Smooth Scrolling
- Implemented **smooth scrolling** functionality, making transitions between the header, sections, and footer seamless for users.
### 💫 Subtle Animations
- Leveraged `IntersectionObserver` for **animations** that trigger as elements enter the viewport, providing a polished, interactive experience.
### 🌍 Cross-browser Compatibility
- Ensured compatibility across different browsers by incorporating CSS prefixes (`-webkit`, `-moz-`, `-o-`, `-ms-`) for consistent rendering of styles.
### 🖥️ Browser Testing
- Conducted extensive **browser testing** and optimized `select` input styling for uniform appearance across platforms.
### 📋 Functional Form
- Created a functional, interactive **form** to engage users and collect their meal preferences and contact details.
### 📱 Full Responsiveness
- Utilized **media queries** to ensure responsiveness across all device sizes, providing a fluid and adaptable layout for mobile, tablet, and desktop users.
#### 📏 Media Query Breakpoints:
- **1200px** – Adjustments for landscape-oriented tablets.
- **944px** – Optimized for standard tablets.
- **700px** – Tweaked layouts for smaller tablets.
- **544px** – Mobile-first design for smartphones.
### 🛠️ Advanced CSS Techniques
- Applied advanced CSS techniques such as **Grid**, **Flexbox**, and **absolute positioning**, optimizing layout and enhancing both aesthetics and usability.
## 🛠️ Technologies Used
- [HTML](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics) – Structure of the web app.
- [CSS](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics) – Styling and layout design.
- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) – Interactivity and functionality.
- [Netlify](https://www.netlify.com/) – Hosting and deployment.
---
## 📖 Code Structure
### HTML:
- Well-structured semantic HTML tags for accessibility and SEO optimization.
### CSS:
- Use of advanced CSS techniques including Flexbox, Grid, and media queries for responsiveness.
- Custom styling for elements such as scrollbars and form inputs.
### JavaScript:
- Handles DOM manipulation for the navigation bar, project filters, and video controls.
- Event listeners for scrolling, clicks, and media player controls.
## 📝 Key Takeaways
Building the **Omnifood** project from scratch was an invaluable learning experience. It enhanced my skills in developing user-friendly and visually appealing websites. Key lessons include:
- The importance of **responsive design**.
- Mastery of **advanced CSS** techniques like Grid and Flexbox.
- Implementing **cross-browser compatibility** to ensure a consistent experience for all users.
Through this project, I gained hands-on experience in creating a polished website that can be adapted to future web development tasks.
---
## 📂 How to Run
1. Clone the repository:
```bash
git clone https://github.com/your-username/code-and-create.git
2. Open `index.html` in a browser to view the website.
3. To modify the CSS or JS, edit the files in the `css` and `js` folders respectively.
---
🤝 **Contributing**
Contributions are welcome! Feel free to fork the project, open an issue, or submit a pull request for any changes or improvements you’d like to suggest.
---
📄 **License**
This project is licensed under the MIT License.