Skip to content
Submitted 4 months ago

Recipe page using SASS

Laura Nguyen•130
@laura-nguyen
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Proud: making the page responsive between two devices, using flexbox, keeping code concise

What to do differently: I feel like I shouldn't have added class names to almost all of the tags in the HTML file and didn't reference most of the class names in the index.scss file.

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

I noticed that the bullet points in the unordered list are horizontally centered on mobile with the text beside them. I wasn't sure how to accomplish that. I tried looking at some resources online, but I couldn't find anything.

Also, it's been somewhat challenging to complete exercises without the Figma files but what I've done is used a Figma plugin to convert screenshots into the designs

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

See challenges above

Community feedback

  • Micha Huhn•200
    @MichaHuhnPosted 3 months ago

    Looks really good, well done!

    I also noticed that the bullet points are centered on mobile. However, I wasn't sure if that was made on purpose by the designers, so I didn't center them.

    But if you want to know how to center them, this YouTube tutorial might help. CSS grid is used in the video which allows you to center elements.

    It seems like the black/gray text color is slightly different, but that's not a problem.

    I like that you used the header element. I forgot it. I will add it too :)

    Good job with the table. I didn't use the table element, because I didn't know how to style it with this semantic table element. But your solution helped me, so I will update my table.

    0
    Laura Nguyen•130
    @laura-nguyenPosted 3 months ago

    @MichaHuhn Thanks for providing the YouTube tutorial :) Super helpful

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord