Adaptive markup of an online store selling snowboards by Denis EfremovAdaptive markup of an online store selling snowboards by Denis Efremov

Adaptive markup of an online store selling snowboards

Denis Efremov

Denis Efremov

There was a task

It is necessary to develop a markup of an online store based on the Figma design layout.

Project Description

The work is done on HTML, CSS, JS, Flexbox, Grid. Connected the FA-icons library (added Fontavesome icons), for some icons formed an icon font. Made several Popups, several sliders, made custom checkbox and radio buttons, tabs, and several spoilers, as well as price sliders in the product filter. Added a video with preview images. Made a burger menu and adaptive for mobile devices up to 320px.
Links to work:

Stages of development

✅ Downloaded the design layout and opened a duplicate design layout in Figma.
✅ I opened my starter template with CSS and JS files connected to get started.
✅ And connected the Fontawesome library
✅ I also download some icons from the design layout in SVG format and create an icon font from them using the icomoon.io service.
✅ Next, I started analyzing the layout and used a ruler for this. Thanks to this ruler, I was able to determine the width of the bounding container, as well as the height of the Header and Footer.
✅ Next, I identified the fonts that are used in the layout and connected them.
✅ After all the preparations, I started the markup Header and Footer
✅ Next I started markup out the site pages

Results

The store is reliable, adaptive and cross-browser, ready for integration into any CMS.
Did the job in 8 days. Approximate cost $700.
Like this project

Posted Dec 1, 2024

Online store markup ready for integration into any CMS