Skip to content
OverviewSolutions
6
Comments
5
Goldeenrock
@OrnellaSablic

All comments

  • Goldeenrock•80
    @OrnellaSablicPosted about 1 month ago

    I think you did a great job on the challenge. Maybe you should pay a little more attention to detail regarding the size of the card title, as the original is a bit larger, and use line height for the card paragraph, so your challenge looks more like the original design. But the rest I think is pretty good.

    Marked as helpful
    0
  • Neto•190
    @deusdetenetoSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I’m proud of the cohesive structure and functional layout, especially with Bootstrap for responsiveness and cleaner CSS. Next time, I’ll review CSS properties more thoroughly, ensure media queries work across all resolutions, and test on more browsers and devices to catch compatibility issues earlier.

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

    The biggest challenge was making the table and layout adjust well to different screen sizes. I used Bootstrap properties and media queries, testing across resolutions. I also refactored the CSS to remove duplicates and clean up the code.

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

    I’d appreciate help with:

    • Responsiveness: Optimizing table display on mobile devices while maintaining readability.
    • SEO: Specific practices to enhance project visibility and ensure well-structured, accessible HTML.
    • CSS: Feedback on further optimizing and organizing CSS code, including rule combination.

    Recipe-page

    1
    Goldeenrock•80
    @OrnellaSablicPosted 3 months ago

    I think you did a great job on this challenge! Maybe I'd add some line height to the texts. But otherwise, congratulations!

    0
  • Goldeenrock•80
    @OrnellaSablicPosted 5 months ago

    I think you did a good job with your code! I suggest you use grid or flexbox to center the main container, instead of using the margin property. I leave you some examples:

    With flexbox:

    main { display: flex; justify-content: center; }

    With grid:

    main { display: grid; place-content: center; }

    Greetings!

    1
  • Goldeenrock•80
    @OrnellaSablicPosted 6 months ago

    I think you did a good job with the challenge but there are some details that you should review to make your design look even more like the original. The design does not look good in mobile version, you should use pixels instead of percentage to set a fixed width to the card. Another detail that you should modify is one of the values of the 'box-shadow: 3px 5px 5px black' property that you used for this: 'box-shadow: 3px 5px black', eliminating the last value in pixels (5px) to remove that blur effect that the original design does not use. I can also notice that you used a different font than the original design, did you have any problems using the font that the challenge requires? Greetings!

    0
  • Goldeenrock•80
    @OrnellaSablicPosted 7 months ago

    I think you did a good job on this challenge! But to make the design even more similar to the original design, I would add a rounded border to the image. And I recommend separating the css style in a different file and not doing it in the same html file. Greetings!

    0