Skip to content
OverviewSolutions
8
Comments
5
P
Marcus
@222sucram

All comments

  • P
    Marcus•120
    @222sucramPosted 6 months ago

    No feedback needed, looks perfect.

    0
  • Justin•560
    @iamprincetjSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud for being able to solve all the problem I had

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

    I had challenges with the list item and their marker, also with styling the table element, with the help of Chat Gpt, I was able to solve along the way learn new things

    Respinsive Recipe page

    1
    P
    Marcus•120
    @222sucramPosted 6 months ago

    Looks great, and follows the original design.

    0
  • P
    Marcus•120
    @222sucramPosted 7 months ago

    The layout is responsive and fits well on different screen sizes. However, I think the max size of the card is smaller in terms of both height and width.

    The font family hasn't been to the one on the design, you can add this on google fonts and import into your code.

    You could also improve SEO and accessibility by using semantic HTML tags, instead of using a div for the container you can use an <article> tag.

    Marked as helpful
    0
  • Mickell G•50
    @MickellgSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of using a mobile first css styling.

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

    Styling the image to both be responsive and show the correct parts of the image was challenging.

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

    I wasn't confident on when to use max-width or width and define the width. Using margin sometimes worked, but was tricky styling the image.

    Blog Preview solution

    1
    P
    Marcus•120
    @222sucramPosted 7 months ago

    The solution follows the design for the most part and is responsive on different screen sizes. However, the card itself isn't centered vertically.

    The easiest improvement would be to add semantic HTML, using an <article> tag for your wrapper, and a <figure> tag for the images.

    When using max-width, I usually set the max width of parent elements and the content within that element dictates the width up to a certain point.

    I found this video to be helpful:

    https://www.youtube.com/watch?v=x4u1yp3Msao&t=923s

    Marked as helpful
    0
  • P
    Marcus•120
    @222sucramPosted 8 months ago

    The final product follows the design for the most part, but the main component is centered differently on different screen sizes.

    Adding responsive design using flexbox or media queries may help solve this issue, but all looks good otherwise.

    0