Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

not responsive but greats to look

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


please give me feedback to improve my skills

Community feedback

argel omnes• 1,800

@argelomnes

Posted

Hi @gethoopp,

Frontend Mentor challenges always have style guides included. I find reading them first gives me a good start. Let me share with you a workflow.

  1. Read the style guide.
  2. Take note of the widths given. This is helpful when doing media queries.
  3. Set custom properties (CSS variables) using the colors and fonts provided.
  4. Link the fonts.

From here, your setup is pretty much done. You can continue with the mark up and layout. This might not improve you skills technically, but doing these first will surely make your work closer to the design provided.

Now, on improving your skills technically. My suggestion is to start small and build it up from there. Start with a Newbie challenge. Complete 1 or 2, then take on a Junior challenge and so on. And of course, post your work together with specific question/s you'll have along the way. This community is here to help you.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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