EcoSearch is a website designed to promote and highlight sustainable, eco-friendly products across various industries, including fashion, electronics, food, and home goods. The goal is to provide users with access to green alternatives, and to educate them on the importance of sustainability and environmentally conscious shopping.
Objectives:
- Create a visually appealing, responsive website with a focus on eco-friendly products.
- Ensure the site contains enough content to require users to scroll multiple times to reach the bottom.
- Implement interactive features to improve user experience, such as a side menu and hover effects.
The website was built using HTML for the structure, CSS for styling, and JavaScript for interactivity. Initially, we created a small structure consisting of a header, product categories, and a basic navigation bar. However, to meet the objective of creating a lengthier site, we iteratively added more content, including educational articles, brand spotlights, and expanded product offerings.
- Header: Contains the navigation bar with links to major sections.
- Side Menu: Initially a simple list, this was later made interactive using JavaScript.
- Content Sections: The website is divided into various sections, including Products, Educational Content, Brand Spotlights, About Us, and User Activities.
To ensure the website is user-friendly on different devices, responsive design principles were applied using CSS media queries. This allowed the layout to adjust depending on the user's screen size. For example, the product grid adjusts from four columns on large screens to one column on smaller screens.
Key Features:
- Media Queries: Ensured that product grids and content blocks adjust dynamically to various screen sizes.
- Grid and Flexbox: Used to create a flexible, responsive layout for product displays and other content areas.
The side menu was initially static, but to improve usability, we added a JavaScript-based toggle effect. This made it possible to hide and show the menu by clicking on a button, creating a more dynamic experience.
- JavaScript Toggle: Allows users to click a button to show or hide the side menu, which improves the overall interface and interaction.
The site now contains significantly more content. In addition to products, we added sections like:
- Educational Articles: Informative content on sustainability topics, such as reducing carbon footprints and the environmental impact of fast fashion.
- Brand Spotlights: Highlights eco-friendly brands, providing users with more choices and insights into green companies.
- User Activities Section: While not interactive in this phase, it hints at potential features where users can engage, review, and track their eco-friendly shopping habits.
To enhance the user interface, we added CSS-based hover effects. These are primarily used on:
- Navigation Links: When hovered, links change background color for a clearer indication.
- Product Buy Buttons: On hover, the button color changes to signal interactivity.
Through the use of media queries, the website layout automatically adjusts to smaller screens. This ensures that users on mobile devices get an optimal viewing experience without horizontal scrolling or overly compact elements.
A footer was added to provide copyright information and help balance the visual structure of the site.
This project meets the criteria of being interactive, visually appealing, and content-rich. It is structured to demonstrate several web development skills:
- Responsive Design: The layout adapts seamlessly across different device sizes.
- JavaScript Interactivity: Implementing a dynamic side menu using a simple JavaScript function improves usability.
- Lengthy and Engaging Content: The site now includes sufficient text, images, and interactive components to require users to scroll multiple times, making it content-heavy as per the project requirements.
- Visual Enhancements: Hover effects and clear product category divisions create an engaging, modern UI.
Future Improvements:
- Adding user authentication and login systems.
- Making the “User Activities” section dynamic to track user actions.
- Adding more interactivity with product search filters, user reviews, and feedback forms.