Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Recipe page using SASS

@laura-nguyen

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P
Micha Huhn 220

@MichaHuhn

Posted

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

Posted

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

1

Please log in to post a comment

Log in with GitHub
Discord logo

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