dzhusoleksiy / electon-store

Fully responsive electronics store webpage with a multilevel menu, scroll-to- top button, contact form, product preview, sales timer, and a map displaying the store location.

"Electon" Electronics Store Webpage

A fully responsive electronics store webpage was created using Webpack with the help of HTML, Sass, JavaScript, and jQuery. This project provides users with an intuitive interface. At the same time, it provides appropriate company with a convenient tool. Furthermore, the entire webpage was marked and created semantically correct to meet all possible needs of Search Engine Optimization. Not to mention, the fact that tech resources are used mindfully because animations are only active on personal computers, and different banner images load according to the appropriate screen resolutions.

Technologies that were used

In addition to the obvious markup language and CSS preprocessor, the webpage was created using the Leaflet library, Slick plugin, SSM state manager, and smtp.js API. Some elements were created with JavaScript, while others were created with jQuery.

Functionality of elements

Due to the mentioned technologies, the webpage has alternative menus for smaller and larger devices. The menu bar will fix differently and smoothly at the top. From the "Home" tab, users will be able to access different parts of the page, and from the "Shop/Shops in your town" tab, they will be able to see relevant store locations. Advertising banners are also dependent on screen width and will change their appearance and functionality if necessary. The "Limited offers" section has its own preview function that provides users with a greater product description and a larger photo. In addition to that, there are also different sale timers that can be set separately. The address in the "Contact us" column in the footer is actually a button that will show the mentioned map. Depending on the user's scroll through the page, a "come-to-top" button will also appear. Last but not least, a "contact us" button will open a contact form through which users would be able to send emails directly to the established email inbox.

History behind the project

This webpage was my final course project at Beetroot Academy. Its presentation was intended to fulfill the purpose of the exam, and I am proud to say that I completed everything on time, receiving first-class honors from all the examiners.