Product Preview Card Component Using CSS Grid & Flexbox

Community feedback

• 

  Keith Bloodworth•110

  @N4thxnPosted 9 months ago

  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

  ---

  

  Aykın Sancaklı•680

  @aykinsancakliPosted 9 months ago

  @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

  

  Keith Bloodworth•110

  @N4thxnPosted 9 months ago

  @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