All comments

• 

  Kelvin Maiangwa• 740

  @Lifeofkelvin

  Submitted 5 months ago

  

  Blog preview card

  1

  40

  

  Andrew G. Ayad• 100

  @andrew-g-ayad

  Posted 5 months ago

  Hi There! Awesome work already! 👏👏 You did a really good job, and your solution looks good to me, but it needs attention to some details to become awesome and perfect!

  • As a best practice, Try setting all margins and paddings to Zero * { margin: 0; padding: 0; }

  • Consider adding equal padding to all sides in the card padding: 1.5rem

  • The correct border width in the design is 1px

  • Try spacing vertically by adding margin-top to the newly added elements

  • Refer to the design to get the correct font sizes

  • Use this piece of code at the top of your CSS file to add the font family to your CSS @font-face { font-family: 'Figtree'; src: url('/assets/fonts/Figtree-VariableFont_wght.ttf'); }

  0
• 

  Amit-Mahi• 60

  @Amit-Mahi

  Submitted 5 months ago

  What are you most proud of, and what would you do differently next time?

  next time will try to use Sass and stylus

  What challenges did you encounter, and how did you overcome them?

  media query

  What specific areas of your project would you like help with?

  media query

  

  add root variable for the more accessible code

  1

  40

  

  Andrew G. Ayad• 100

  @andrew-g-ayad

  Posted 5 months ago

  You already did a great job creating root-level custom properties. I recommend you to do the following:

  • don't set heights unless you need to
  • don't use id's to style elements (it works but is not a best practice)
  • use more semantic HTML (for example you could use the h1 tag for the title)
  • Double-check width values in the design

  I highly recommend you give these a go before moving to more advanced tools like sass

  1

  This comment has received 1 replyShow
• 

  Cheosphere• 1,040

  @Cheosphere

  Submitted about 2 years ago

  ...made with a lot of love 🤘🏻🙂

  

  Interactive Rating Component (HTML | CSS | JS Vanilla)

  4

  321

  

  Andrew G. Ayad• 100

  @andrew-g-ayad

  Posted about 2 years ago

  Hey Cheosphere Your work is awesome! And I loved how accurate it is and the fact you put much effort to make it look as close as possible to the original design. but here's a little trick.. the original card design has a really small amount of extra padding-right

  Try it out and I'm sure your design will match the original design a 100%

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Muhammad Zohaib• 270

  @codefolk

  Submitted about 2 years ago

  Cropping and placing the image was frustrating, and didn't find any way to place color in the background. Really need feedback and suggestions. Happy coding.

  

  Project Tracking Dashboard

  1

  30

  

  Andrew G. Ayad• 100

  @andrew-g-ayad

  Posted about 2 years ago

  Hello @codefolk This background appears to be a separate HTML element positioned behind the image.

  • So, try creating a new div and style it with the same grey color and the border radius.
  • set the positions to absolute
  • make the z-index: -100
  • give it a width and a height
  • position it behind the hero image

  remember to handle its position to match the design of the mobile version.

  0

  This comment has received 1 replyShow