Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yutaasakura96/project-omnifood

HTML5/CSS3 project created alongside with Udemy course: Build Responsive Real World Websites with HTML5 and CSS3.
https://github.com/yutaasakura96/project-omnifood

Last synced: 8 days ago
JSON representation

HTML5/CSS3 project created alongside with Udemy course: Build Responsive Real World Websites with HTML5 and CSS3.

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.



![Omnifood Project Screenshot](https://github.com/user-attachments/assets/5ee59893-5a0a-4ccb-ae95-7b6d66b485dd)



🌐 **[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.