solutionZMZ

Community feedback

• 

  P

  Nitya Gulati•665

  @nityagulatiPosted over 4 years ago

  Hi Madi, nice work. The site looks good on desktop and all the cards are where they should be. Some pointers to further refine the code --

  • The card icons are not showing. You will have to update the src path for the images.

  • Here's what you can do to cut down on the code repetition. You can add a separate class such as card to all the cards and add all the common attributes under that and keep the unique styling under the individual card classes such as karma etc.

  <div class="card karma"> .card {...} .karma {...}

  • Have you looked into CSS Flex/Gridbox? If not, I would suggest giving that a try. It's very easy and convenient to use to create such layouts without having to use position. This also helps with making the site responsive, instead of adding positions for each breakpoint.

  • The next step would be to look into media queries to make it mobile-friendly. Also, you can look into the mobile-first approach as Ndoy3m4n suggested. You can code for the mobile breakpoint and then use min-width to scale it up. This helps cut down on the code and also has performance gains when loading the site on mobile.

  Keep up the good work!

  3
• 

  Madi•45

  @madizhaksylykPosted over 4 years ago

  Hi, thanks for your feedback. I thought there is nothing in my code that is "nice". You gave me a hope) Please, don't hesitate to give feedback on my challenges, I appreciate it!

  1

  ---

  

  P

  Nitya Gulati•665

  @nityagulatiPosted over 4 years ago

  @madizhaksylyk Coding is all about different approaches to get the same results. And in time you will find out your own unique preferences and which approach is better suited for which situation. Look forward to seeing more challenges from you! :)

  0
• 

  Papa Elhadj Abdoulaye NDOYE•770

  @NDOY3M4NPosted over 4 years ago

  Hi, nice approach with the positioning but there is a lot of repetition in your CSS. Also it seems like you forgot the mobile approach. You could start with the mobile approach and then adapt your code for the desktop view.

  1