City E-commerce

Static website

City E-commerce is a static website developed as part of my initial learning of frontend development, including HTML, CSS, and responsive design, during my internship. The project emphasizes high performance, and optimizing web vitals.

Screenshots

Key Features

  • Web Vitals OptimizationThe site prioritizes core web vitals, including loading performance, interactivity, and visual stability. Special attention was given to optimizing these metrics to ensure a smooth and efficient user experience.
  • Page Speed MetricsEnhancements were made to improve page speed, reducing load times and ensuring quick, responsive interactions. Techniques such as image optimization and efficient resource loading were employed to achieve this.
  • Responsive DesignThe website is designed to be fully responsive, ensuring that it provides an optimal viewing experience across a range of devices, from desktops to smartphones. This involved using flexible grid layouts, media queries, and fluid images.
  • Image HandlingGiven the site's heavy use of images, significant effort was made to handle them efficiently. This included optimizing image sizes and formats to minimize impact on load times and overall site performance.
  • Site AccessibilityAccessibility was a key consideration, with efforts made to ensure the site is usable by people with disabilities. This included adhering to best practices for semantic HTML, keyboard navigation, and screen reader support.
  • Development Best PracticesThroughout the project, best practices in frontend development were followed, including clean code practices, efficient use of resources, and thorough testing across different devices and browsers.

Technology stack

HTMLHTMLCSSCSSSCSSSCSSJavascriptJavascriptGITGIT