top of page
Coding a responsive e-commerce website for coffee and tea mugs
My role
Front-end developer
Team member
Harshit Agarwal
Duration
3.5 weeks
Tools used
Languages used
Overview
We coded a pre-designed responsive e-commerce website for selling coffee and tea mugs using HTML, CSS and Javascript. The site is fully responsive, ensuring smooth performance on all devices. We also connected forms, text-fields, and other inputs to the backend using PHP for dynamic data handling and submission.
Key features
Added breakpoints for tablet and mobiles phone using media query for seamless responsiveness.
Added micro interactions like hover effect using CSS.
This is the complete flow on the computer which showcases hover effect when the cursor is on the product image. While filling the customer details I added maximum character limit to the card number, expiration date and the CVV.
This is the same complete flow on the mobile which showcases that the navbar is now a hamburger menu. The hamburger icon only appears after the screen size becomes less than 991px.
Takeaways
Learnings
This project helped me improve my skills in coding a responsive website using HTML, CSS and JavaScript. I learned how to make sure the website works well on different devices, providing a smooth user experience. Connecting the forms and text fields to the backend using PHP gave me valuable experience in handling data and making the site interactive.
Conclusion
Overall, this project taught me the importance of clean code and creating websites that are both easy to use and responsive.
bottom of page