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

Product Preview Card Component Using Flexbox - Front End Mentor

@Alexandre-Simoes361

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


While working on this project, I couldn't help but feel like the order of how I went about things was a bit random, and would like to structure my approach a bit more. How should I go about organizinbg this? As in, should I first work on the position boxes, then the content, then the styles, top to bottom, left to right, how? That would be my biggest question in terms of best practices, how do I structure my approach.

Thank you.

Community feedback

@arogersrenee

Posted

I think everyone might be different. I start with the mobile format first then work my way up the different sizes. I usually work on the structure of the HTML as much as I can at first. Then move to the CSS. I think I start with global changes, like fonts and colors. Then I kind of work from top to bottom based on the HTML. So I style my body first, then header, divs and so on. Usually once I get to the CSS I may have to modify the HTML a little, so it becomes a bit back and forth sometimes. Overall, I think it may just be about finding a system for yourself and being consistent so that it doesn't feel random.

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