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 - HTML & CSS with Flexbox

Théo 120

@Atim360

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


Disclaimer : Please don't care if my English is not perfect, i don't master this language very well yet. So i often use Google Translate to help myself.

Hi, I'm a beginner of Frontend Development, I've learned in a self-taught way HTML and CSS but until now, I've practiced only a little. Sure I've done some exercices in order to follow the courses on Html, Css. However I didn't do a lot of real projects, it's why I have a lot of questions. Thank you for your futur help.

  • The more complex the project, the more we have to use CSS and I find that it can become a bit hard to find your way around when you have a lot of stylized elements. Effectively sometimes as soon as I modify something, I have the impression that it's the domino effect on my css. So i'm wondering whether that exists some conventions to structure its CSS ?

  • The second difficulty that I had was about the responsive part. Indeed I've make quite well the card responsive, however I had a hard time and I think I succeeded it in a quite wobbly way. Then I was wondering if you had any advice for the responsive part as well as resources that can help me on this point because it is surely the biggest difficulty I have. On bigger projects, I think I would have surely failed to do it alone.

Community feedback

P

@mihalymarcell86

Posted

Hello @Théo,

in terms of making your CSS file more maintainable and easily scalable, you might want to take a look at naming conventions. I prefer using BEM, but there are other methodologies you can chose from (OOCSS, SMACSS, etc.)

Same goes for responsiveness, it's good to have a strategy. There's a plenty of articles discussing mobile-first / desktop-first designs. Have a read and decide for yourself which one clicks with you more.

I can see, that you put the effort in organizing your CSS. One advice I would give is that rather than having one media-query for a given screen size and writing all the pertaining rulesets in them, have separate media-queries for every element/class and put it directly below. This way, you don't have to jump around your code too much, when you're debugging it.

Hope, that helps!

Marked as helpful

0

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