Skip to content

Latest commit

 

History

History
104 lines (72 loc) · 3.19 KB

README.md

File metadata and controls

104 lines (72 loc) · 3.19 KB

Frontend Mentor - E-commerce product page solution

This is a solution to the E-commerce product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

This challenge only offered a layout for mobile and desktop. It is therfor only optimitzed for two different sizes.

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Open a lightbox gallery by clicking on the large product image
  • Switch the large product image by clicking on the small thumbnail images
  • Add items to the cart
  • View the cart and remove items from it

Screenshot

Links

My process

  • Design analysis: extracting font-styles and colors from figma-file.
  • defining CSS variables
  • defining CSS utility classes
  • writing markup, including styles via utility classes
  • writing layout for mobile design
  • writing layout for tablet and/or desktop
  • writing functionality with JavaScript for menu, slider and cart

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • Vanilla JavaScript (for menu, slider and cart)

What I learned

  • DOM-Manipulation for for updating the cart
  • How to build a fully-functional slider with autoplay-start-stopp, thumbnail-highlightening and swipe-able.
  • How to build a modal. I finally decided against the modal in favor for plugin the slider directly in the main page.
  • A lot about stacking, different levels of stacking, different stacking contexts, and z-index in the context of position not(static).
  • Accessibility and the use of aria-label.
<h1>Some HTML code I'm proud of</h1>
.proud-of-this-css {
  color: papayawhip;
}
const proudOfThisFunc = () => {
  console.log('🎉')
}

Continued development

Useful resources

https://developer.mozilla.org/en-US/

Author

Harm Intemann, Bolivia, September 2022

Acknowledgments

This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.

Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.