The task was to create a responsive markup for the CREATEX store using the BEM methodology, relative EM/REM units of measurement, and a Createx-shop layout in Figma.

The project was successfully developed using HTML, CSS, and JavaScript using the BEM methodology. While working on this project, I used relative units of measurement (EM/REM), as well as the Flexbox and Grid structure building modules. Fonts were included in various formats to improve cross-browser compatibility. For the icons, I used an icon font that I converted using the IcoMoon service from SVG icons in the layout. A mega menu was also implemented for this project, which opens when clicking on a main menu item. When implementing the hamburger menu on a responsive website, sub-item functionality was added for such a large menu. In addition to all of the above, I created several Swiper sliders, modal windows, a mini-cart, custom checkboxes and radio buttons, price range sliders in the product filter, custom selectors, Drag-and-drop functionality for the file upload field in the product review form, a custom video player in the slider with product images, tabs, spoilers, masks for data input fields (bank card number, date, and CVC), and show/hide password buttons for password input fields. For the site-wide responsiveness, I used the EM unit of measurement in media queries (as this study found that EM is the best unit of measurement for media queries). I made this store responsive to 320 pixels of the browser window width.

✅ To begin, I decided to copy my starter template to work with already connected CSS and JavaScript files, and also gave the new project a name.

✅ The next step was to open the design layout in Figma and create a duplicate of it for analysis and ease of use.

✅ After analyzing the layout, I marked it with guide lines using a ruler. This is necessary for defining the bounding container, determining the height of the Header and Footer, and it also makes it easier for me to measure different sizes.

✅ Next, using the Font Fascia plugin, I identified the fonts the designer used in the layout, downloaded them, and integrated them into the project. I also set the default font weight and size for this website.

✅ Next up are icons. I downloaded all the icons from the layout in SVG format and, using the IcoMoon service, generated an icon font from them which I also included in the project.

✅ Next, I focused entirely on the header and created the markup for it. I also created a mega menu and a mini-cart.

✅ Next, I marked up the footer.

✅ Finally, I began sequentially marking up all the site pages (Home, Catalog, Product, and so on).

Basically, all the difficulties were minor and could be resolved with fairly simple steps.

The biggest problem was that breakpoint sizes for sliders and dynamic responsiveness had to be written in JavaScript in pixels, since JavaScript simply doesn't understand EM/REM. Since all my CSS sizes and breakpoints were specified in EM/REM, specifying breakpoint sizes in JavaScript in pixels was incorrect and would break the markup if the font size was increased too much in the browser settings.

I wasn't happy with this result.

To solve the problem, I wrote a function that multiplies the specified size by the font size in the tag (similar to EM/REM). I used this function to specify all the necessary sizes in JavaScript. This solved the problem, but not as well as I had hoped. The problem is that if a user adjusts the fonts while using the site, the required sizes are only applied after a page refresh. This creates another problem: the user must refresh the site manually each time after adjusting the font size.

But I will still note that the result has become much better.

Since changing the font size settings required a site reload, I decided to make this process automatic. To do this, I wrote an event that monitors the font size change on the site (essentially, this event monitors whether the user has changed the font size settings or not). And when this event is triggered, the page reloads.

I liked this result. So, I finally managed to solve this problem.

The result is a reliable, user-friendly, cross-browser, and responsive online store that doesn't limit the user in any browser settings and is ready to integrate with any content management system. 👍