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

Built recipe page using HTML and CSS

@rathoddharmendra

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?

I think sticking to the program helps grow skill step by step

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

  • I used custom class for horizontal line instead on default element
  • Used css properties li::marker and left padding on list element to define color for list bullet points and spacing

Community feedback

@indigorose

Posted

This is a nice solution and follows the design brief.

Whilst accessible, the solution does not match the mobile styles.

It is tricky as I struggled with the mobile styling, however using the body element selector in your css and changing the background-color property will help to remove the white border in your solution and modify with @media when required.

The code is clear, efficient and reusable. I used the li::marker as well to access the li colour changes.

As you keep trying other challenges, you will be able to return to this and refactor. Keep going and look forward to seeing your other solutions.

Marked as helpful

0

@rathoddharmendra

Posted

Thanks for a detail review @indigorose :)

0

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