ASUSHII Computer Accessories Shop

A comprehensive web design project for a modern computer accessories e-commerce website built with HTML5, CSS3, and Vanilla JavaScript. This project showcases a fully functional online store with user authentication, product catalog, event management, and responsive design.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
   • Features
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Project Structure
5. Roadmap
6. Contributing
7. License
8. Contact
9. Acknowledgments

About The Project

ASUSHII Computer Accessories Shop is a comprehensive web design project that demonstrates a modern e-commerce website for computer accessories. Founded by Damien and his team, this project showcases professional web development skills using HTML5, CSS3, and Vanilla JavaScript.

The website serves as a complete online platform for a computer accessories store, featuring:

• User authentication and account management
• Comprehensive product catalog with multiple categories
• Interactive event management system
• Responsive design for mobile and desktop
• Professional navigation and user experience
• Integration with various computer brands and partners

This project was developed as part of a school assignment to demonstrate full-stack web development capabilities without relying on backend frameworks or databases, using local storage for session management instead.

(back to top)

Built With

• 
• 
• 

(back to top)

Features

• User Authentication System

  • Login and signup functionality
  • Session management with local storage
  • Guest user support

• Product Catalog

  • Multiple product categories (Peripherals, Storage, RAM & Processor, Display & Audio, Laptops & Mobile Devices)
  • Product recommendations
  • Image galleries and product showcases

• Event Management

  • Interactive event timetable
  • Upcoming events display
  • Event registration information

• Responsive Design

  • Mobile-first approach
  • Cross-device compatibility
  • Modern CSS animations and transitions

• Navigation System

  • Intuitive multi-level navigation
  • Dropdown menus
  • Breadcrumb navigation

• Additional Features

  • About Us page with team information
  • Contact and support system
  • E-catalog functionality
  • Certified partner showcase
  • Membership program

(back to top)

Getting Started

This is a static website project that can be run locally or deployed to any web server. Follow these simple steps to get a local copy up and running.

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A local web server (optional, but recommended for full functionality)
• Git (for cloning the repository)

Installation

1. Clone the repository

   git clone https://github.com/LoveDoLove-School-Projects/ASUSHII_Web_Design.git

2. Navigate to the project directory

   cd ASUSHII_Web_Design

3. Start a local web server (choose one of the following options):

   Option A: Using Python (if installed)

   # Python 3
   python -m http.server 8000
   
   # Python 2
   python -m SimpleHTTPServer 8000

   Option B: Using Node.js (if installed)

   npx http-server

   Option C: Using PHP (if installed)

   php -S localhost:8000

4. Open your browser and navigate to

   http://localhost:8000
   

   Alternative: Direct file access

   • Simply open index.html in your web browser
   • Note: Some features may not work properly without a local server due to CORS restrictions

(back to top)

Usage

Navigation

• Use the navigation menu in the header to explore different sections
• Click on product images to navigate to category pages
• Use the breadcrumb navigation for easy page traversal

User Account

• Click "Sign In" to access the login page
• New users can create accounts through the signup process
• User sessions are maintained using browser local storage

Product Browsing

• Browse products by category from the main navigation
• View product recommendations on the homepage
• Click on product images to view detailed information

Events

• Check the event timetable on the homepage for upcoming events
• Events rotate automatically every few seconds
• Event information includes dates, times, and descriptions

Example Usage Scenarios

1. New Customer Journey

   • Visit homepage → Browse categories → View product details → Create account → Contact support

2. Returning Customer

   • Login to account → Check recommendations → Browse specific categories → View events

3. Information Seeking

   • Visit About Us → Learn about the company → Check certified partners → Contact for inquiries

For more examples and detailed user guides, please refer to the Documentation

(back to top)

Project Structure

ASUSHII_Web_Design/
├── index.html                 # Main homepage
├── index.js                   # Main JavaScript functionality
├── styles.css                 # Main stylesheet
├── base.css                   # Base styles and resets
├── color.css                  # Color scheme definitions
├── bg_animation.css           # Background animations
├── index.css                  # Homepage specific styles
├── LICENSE                    # MIT License
├── .gitignore                 # Git ignore rules
├── .github/                   # GitHub templates and configuration
│   ├── FUNDING.yml
│   └── ISSUE_TEMPLATE/
│       ├── bug-report---.md
│       └── feature-request---.md
├── ash_image/                 # All images and media files
│   ├── logo.png
│   ├── home1.jpg - home4.jpg
│   ├── item1.jpg - item9.jpg
│   └── ... (additional images)
├── ash_navigationbar/         # Navigation components
│   ├── navstyles.css
│   ├── navcomponent.css
│   ├── navsupport.css
│   └── navmediacontrol.css
├── ash_about_us/              # About Us page
│   ├── ash_about_us.html
│   └── ash_about_us.css
├── ash_component/             # Components category page
│   ├── ash_component.html
│   ├── ash_component.css
│   └── ash_component.js
├── ash_contact_us/            # Contact page
│   ├── ash_contact_us.html
│   ├── ash_contact_us.css
│   └── ash_contact_us.js
├── ash_display_audio/         # Display & Audio category
│   ├── ash_display_audio.html
│   └── ash_display_audio.css
├── ash_e-catalog/             # E-catalog page
│   ├── ash_e-catalog.html
│   └── ash_e-catalog.css
├── ash_event/                 # Events page
│   ├── ash_event.html
│   └── ash_event.css
├── ash_laptop_mobile/         # Laptop & Mobile category
│   ├── ash_laptop_mobile.html
│   ├── ash_laptop_mobile.css
│   └── ash_laptop_mobile_media.css
├── ash_login/                 # Login system (directory structure)
├── ash_membership/            # Membership page
├── ash_partner/               # Partners page
├── ash_peripherals/           # Peripherals category
├── ash_storage_ram_processor/ # Storage, RAM & Processor category
└── ash_support/               # Support page

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Guidelines

• Follow HTML5 semantic markup standards
• Use consistent CSS naming conventions
• Ensure responsive design across all devices
• Test functionality across different browsers
• Maintain code comments for clarity

(back to top)

Top contributors:

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Project Link: https://github.com/LoveDoLove-School-Projects/ASUSHII_Web_Design

(back to top)

Acknowledgments

This project was developed as part of a school assignment to demonstrate web development skills. Special thanks to:

• Educational Institution

  • For providing the opportunity to work on this comprehensive web design project

• Resources and Inspiration

  • Modern web design principles and best practices
  • Computer accessories industry knowledge
  • E-commerce website design patterns

• Technology Partners

  • Acer, MSI, HONOR, and other computer brands featured in the catalog
  • Open source community for web development tools and resources

(back to top)