A professional game store website combining the best design elements from Epic Games and Steam. Built with pure HTML, CSS, and JavaScript for a first-year university web development project.
GameVerse is a modern, responsive game distribution platform that merges the sleek grid-based layout of Epic Games with the dark, immersive color scheme of Steam. This project was developed as part of my first-year Web Development & Operating Systems module at APIIT Lanka, demonstrating advanced front-end development skills and modern web design principles.
- Modern UI/UX: Combines Epic Games' layout with Steam's color theme
- Responsive Design: Fully responsive across all devices and browsers
- Game Catalog: Dynamic game grid with hover effects and filtering
- Shopping Cart: Interactive cart functionality with local storage
- Favorites System: Save and apply favorite orders
- JSON Integration: Dynamic content loading from JSON files
- Form Validation: Comprehensive order form with error handling
- Smooth Animations: CSS transitions and JavaScript interactions
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Styling: Custom CSS with Flexbox/Grid
- Data Handling: JSON for game data management
- Storage: LocalStorage for cart persistence
- Icons: Font Awesome for UI icons
- Fonts: Google Fonts (Roboto, Poppins)
- Deployment: GitHub Pages
GameVerse/ ├── index.html # Main landing page ├── shop.html # Product shopping page ├── cart.html # Shopping cart page ├── order.html # Order checkout page ├── styles/ │ ├── style.css # Main stylesheet │ ├── shop.css # Shop page styles │ ├── cart.css # Cart page styles │ └── order.css # Order page styles ├── scripts/ │ ├── script.js # Main JavaScript functionality │ ├── shop.js # Shop page functionality │ ├── cart.js # Cart management │ └── order.js # Order processing ├── data/ │ └── games.json # Game data storage ├── assets/ │ ├── images/ # Game thumbnails and assets │ └── icons/ # UI icons and logos ├── documentation/ │ └── WDOS_CB014568_INDIVIDUAL_ASSIGNMENT.pdf └── README.md
The project underwent comprehensive testing with excellent results:
- All pages pass W3C validation with zero errors
- Semantic HTML structure
- Proper accessibility attributes
- CSS Level 3 + SVG compliant
- Clean, organized styling
- Cross-browser compatibility
- Performance: 99-100/100
- Accessibility: 92-94/100
- Best Practices: 100/100
- SEO: 91/100
- Zero accessibility errors
- Proper contrast ratios
- Screen reader friendly
Tested on:
- Desktop: All screen sizes
- Mobile: iPhone SE to 16 Pro, Samsung Galaxy series, Pixel, Xiaomi
- Tablets: iPad series, Surface Pro, Nest Hub
- Browsers: Chrome, Firefox, Edge
- Primary: Dark blue-grey (#1b2838) - Steam inspired
- Accent: Light blue (#66c0f4) - Steam highlights
- Background: Dark blue (#171a21)
- Text: White and light grey (#c6d4df)
- Grid System: Epic Games inspired product grids
- Navigation: Horizontal desktop, bottom-fixed mobile (inspired by Instagram)
- Cards: Hover effects and clean product presentation
- Intuitive Navigation: Clear menu structure and breadcrumbs
- Product Discovery: Category filtering and search functionality
- Shopping Cart: Real-time updates and persistent storage
- Checkout Process: Streamlined order form with validation
- Mobile Optimization: Touch-friendly interfaces and responsive layouts
###JavaScript Features
Dynamic content loading from JSON LocalStorage for data persistence Event delegation for dynamic elements Form validation and error handling Modal and popup management
###CSS Architecture
Modular CSS structure Responsive design patterns CSS Grid and Flexbox layouts Smooth transitions and animations
##📄 Documentation Complete project documentation including wireframes, testing results, and implementation details is available in: WDOS_CB014568_INDIVIDUAL_ASSIGNMENT.pdf
##🙏 Acknowledgments
Mr. Musharraf Azhar - Project supervisor and guidance APIIT Lanka - Academic institution Epic Games & Steam - Design inspiration W3C Validators - Testing tools