Skip to content
Submitted 7 days ago

Product Preview Card

Rahexx•210
@Rahexx
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I used rem for the first time throughout the entire project for font sizes. In fact, it is better this way. I also used GitHub Actions to install Sass and compile Sass files to CSS, allowing me to remove the CSS folder from the repository. I will definitely be using GitHub Actions in future challenges.

What challenges did you encounter, and how did you overcome them?

My challenge was to use GitHub Actions because I needed to install Sass and set permissions. After some time, I found the information I needed and successfully ran my GitHub Action.

What specific areas of your project would you like help with?

I will take any feedback I can get.

Community feedback

  • Sergio Eduardo Castro Ceballos•230
    @SergioCasCebPosted 6 days ago

    Hey there, amazing job with the styling and the way you structure your html.

    There are a few tips to could prove to be useful for future project:

    • Even though valid depending on the situation, I wouldn't recommend using absolute to center you main content, I would recommend you get use to using flexbox or grid, less code lines and better for responsiveness.
    • On you button, maybe next time rather than giving a set width and height, you could try utilizing padding instead, this usually comes in handy when you have multiple buttons in a project and you want to keep them consistent but also allow them to be responsive.
    • Also I would I would recommend to start playing around with custom css variables, they will make your life easier in bigger projects and will help keep consistency throughout.
    • Finally to not have to put margins and paddings in every single element within a container, you could try flex and gap, this way you can remove a few lines of code and keep the separation between elements consistent. Of course as long as it fits the requirements of the project.
    Marked as helpful
    0
    Rahexx•210
    @RahexxPosted 4 days ago

    @SergioCasCeb Thanks for the feedback. It is very useful, and I will definitely remember this for the next challenge.

    0

Please log in to post a comment

Log in with GitHub

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