A fully responsive business website built using core front-end technologies, developed as an award-winning academic project in 2018.
Project Overview
Harvel Electric is a corporate website designed to showcase electrical services with clarity and professionalism. The project was developed during my software diploma at Aptech and emphasizes strong fundamentals in front-end development without relying on external UI frameworks.
Key Features
- Fully responsive across all screen sizes
- Lightweight (no frameworks)
- Clean, structured UI
- Cross-browser compatibility
- Modular and maintainable code
- Reuseable Html Components





Tools / Technologies Used
Structure
HTML5
Programming Language
JavaScript, JQuery
Styling
CSS, Without Bootstrap
Platforms
Desktop, Tablet, Mobile
Programming Tool
VS Code
The Challenge
Building a fully responsive website without using frameworks like Bootstrap was the core challenge.
Key constraints included:
- Manual handling of layouts and breakpoints
- Maintaining consistent design across devices
- Ensuring performance and simplicity
The Approach
To solve this, I implemented:
- Custom CSS media queries for responsiveness
- Flexible layouts using percentage-based sizing
- Clean HTML structure for scalability
- jQuery for lightweight interactivity
This approach ensured full control over design behavior across devices.
Development Strategy
The project followed a static architecture approach:
- Semantic HTML for structure
- CSS3 for layout and responsiveness
- JavaScript/jQuery for dynamic behavior
- Organized file structure for scalability
My Contribution
This was a collaborative project:
Project Manager & Front-End Developer (My Role):
- Led project planning and execution
- Designed layout and responsiveness
- Developed UI and interactions
Graphics Designer (Teammate):
- Designed visual assets
- Optimized and resized images
- Assisted with UI consistency
Challenges & What I Learned
- Deep understanding of responsive design without frameworks
- Practical use of CSS positioning and media queries
- Real-world experience in teamwork and coordination
- Importance of clean, maintainable code
Outcome & Recognition
- 🥇 Secured 1st Position at Aptech Learning Institute
- Successfully delivered a production-ready responsive website
- Built a strong foundation in front-end engineering