Skip to content
OverviewSolutions
4
Comments
4
P
Megan McNeill
@bluethreadmade

All comments

  • HL Wong•290
    @hl-wongSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    To color the list bullet. I removed the default list bullet and use ::before selector to add a new list bullet, center and color it.

    Recipe page

    1
    Megan McNeill•60
    @bluethreadmadePosted 3 months ago

    Your solution looks good! The mobile design works well.

    The numbers and bullets under ingredients and instructions are missing padding on the left.

    Your CSS is nicely organized. I don't know if you need to specify the bullet content on ln 89 to just change the color. And I don't think @import for the font in CSS is necessary or useful if you are specifying it in a link in your html.

    0
  • Megan McNeill•60
    @bluethreadmadePosted 3 months ago

    Your solution looks great. I like how you customized it.

    I think you increased the font size on the location from the design spec but that seems like it was on purpose.

    I think you could improve your links by making them span the width of the box around them. I thought they were broken because when I hovered anywhere in the box, the color changed, but clicking anywhere doesn't open the link, you must click on the text to open the link.

    0
  • Megan McNeill•60
    @bluethreadmadePosted 3 months ago

    Your solution looks similar to the design. The font color on the "these languages" should be the specified grey color. The text in the "Learning" badge is not centered. Your spacing between components could be improved to better match the design.

    The cursor should also change to the pointer type hover, you have the color changing only.

    Alt text is intended to be descriptive so something like "picture of post author" would be more useful than "click here"

    You could further improve the accessibility by using landmarks and semantic html.

    0
  • Megan McNeill•60
    @bluethreadmadePosted 3 months ago

    Your solution looks very close to the design. You have too much space between the end of the text and the end of the card. Your name at the bottom is rendering as a link because you have it in an a tag but it doesn't go anywhere when interacted with. The CSS is hard to read, it looks like it is all in one line but I don't know if that meets another standard that I am not aware of.

    Marked as helpful
    0