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 CSS Grid & Flexbox

@aykinsancakli

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


I think it's pretty close... 🤔

Community feedback

@N4thxn

Posted

Hello,

I'm curious how you're able to get the size of the card to be the same as the challenge. I can't figure out the sizing of anything and am mostly shooting around in the dark. I'm new to coding as I've only been doing it for about a month so any advice helps!

0

@aykinsancakli

Posted

@N4thxn Hello,

I didn't know the card has the same size until i upload the solution 🤣.

My process

  • Open the desktop design file provided in the code and analyze (Should I use grid or flexbox, hmm the space between the elements are all the same so I'll go with flexbox and add gap etc.)

  • This way, before I even start coding I have a general idea what to write. Then I start coding the HTML structure first always, because this way is more goal oriented and I do not get distracted by styling halfway in the process. HTML (Skeleton) => CSS (Style) => JavaScript(Interactivity).

  • When I switch to CSS, I open the design file image in the background and always compare it with my design in every 5-10 lines of code for example. This way i can get closer to the actual design. For example when deciding border radius I give an approximate value and alt tab to switch the design image and compare it till I get close enough.

Every developer has it's own style but that is my process. Btw you did a great job for a month of learning. If you show up everyday and even if you challenge yourself 1% harder than yesterday, there is absolutely no reason to become a good developer. It all comes down to practice.

Hope this helps and I wish you all the best!

1

@N4thxn

Posted

@aykinsancakli thank you for the advice, I was just impressed with how accurate yours ended up being and how wildly off mine tended to be. Thank you for the support!

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