Skip to content
OverviewSolutions
7
Comments
7

Maruchet O

@MaruchetOThailand100 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Rodney-Mokenyu•100
    @Rodney-MokenyuSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of my ability to identify the section colors correctly and to be able to get the structure of the sections right. Next time i would try using flex box to achieve same design.

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

    I had a great challenge in figuring out how to structure the sections for large screens using grid. My biggest challenge was placing the quotes image in the first section box.

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

    Can someone help tell me how you figure out the width to set for your main container so that it matches that in the design files? and also how i can fit that quote image to blend in the background of the purple box. Thanks in advance

    Responsive Testimonial section page using grid

    1
    Maruchet O•100
    @MaruchetOPosted 20 days ago

    Great work! For the width of the container, I set it using grid-template-columns: 1fr repeat(4, 254px) 1fr;, 254px is the width of the card. For the quotation image, the attribute background-image can help with the design.

    0
  • Maruchet O•100
    @MaruchetOPosted 20 days ago

    Good job! At upper corners of the card, you can use smaller border-top-left-radius and border-top-right-radius to get rid of the curve.

    0
  • Maruchet O•100
    @MaruchetOPosted 22 days ago

    Great work! However, the size of the picture in small screen can be improved, as well as, the font-weight of the price.

    0
  • P
    OriD•120
    @oridrSubmitted 23 days ago
    What are you most proud of, and what would you do differently next time?
    • Fluid font size and spacing with CSS clamp
    • Using CSS @layer
    What challenges did you encounter, and how did you overcome them?
    • Understanding the changes in different resolutions - I had to check and compare the sizes in the design vs. the web page multiple times.
    • Controlling the image width - I've used a combination of clamp() and calc() to get the width and the margins.

    Recipe page

    1
    Maruchet O•100
    @MaruchetOPosted 23 days ago

    Accurate!

    0
  • Maruchet O•100
    @MaruchetOPosted 25 days ago

    Great work! There is a file named style-guide.md that you can follow the design.

    0
  • Maruchet O•100
    @MaruchetOPosted 26 days ago

    Good work! You can use flexbox, instead of padding to set the element to center. Also, there is a figma file that you can follow the design.

    0
View more comments