Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

E-commerce Product Page (HTML | CSS | Vue JS Composition API + Vite )

Cheosphere•1,040
@Cheosphere
A solution to the E-commerce product page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


...made with a lot of love 🤘🏻🙂

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • cjPandaDEV•220
    @cjpanda
    Posted over 1 year ago

    wow this is great, I cant get my Shopping Cart to work though

  • subodh16728•100
    @subodh16728
    Posted over 1 year ago

    Great as usual Did you reuploaded this? I guess I saw this earlier.. And there's a feedback. When my bookmarks bar is on, the "x" icon is very slightly visible. However it is completely visible when bookmarks bar is off.

  • Om Preetham Bandi•470
    @OmPreetham
    Posted about 1 year ago

    I was browsing through your work and I'm truly impressed by how meticulously you capture every detail. Your attention to perfection is remarkable. I strive for the same level of precision in my designs, but often struggle with getting the sizes just right. You truly deserve recognition for your outstanding work. Keep pushing forward, it's truly amazing.

  • Hanan Ibrahim•100
    @Hanan1413
    Posted about 1 year ago

    You are very talented Cheosphere keep up the hard work.

  • Jean Gustave NSABIYERA•410
    @jeangu2002
    Posted about 1 year ago

    pixel perfect

  • Ojile Victor•160
    @victorOJILE
    Posted about 1 year ago

    Perfect job. I can't even tell which one is solution and design 👍👍

  • Sarfaraz baloch•80
    @sarfaraz-baloch
    Posted over 1 year ago

    wow looks good

  • solitary_coder•1,000
    @kabir-afk
    Posted over 1 year ago

    Hey man , great site , but there seems to be an issue with cart functionality., the state isn't resetting itself whenever the user is adding or removing something from the cart .. I don't know anything about Vue otherwise I'd have been able to help . . . hope you look into this issue

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub