Skip to content
Submitted 11 months ago

Responsive Recipe Page Component

accessibility, pure-css
Divya•50
@Divya4879
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm most proud of just making it overall.

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

I encountered the challenge of changing color of hr, and that of the no.

I learned them, used in this one successfully and overcame my challenge.

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

The specific areas of the project I'd like help with are:-

  1. What's 1 level heading in it. suggestion(s) for my code
  2. Why am i unable to vertically centrally align the recipe card using align-items
  3. Any other suggestions are welcome.
Code

Please log in to post a comment

Log in

Community feedback

  • Shivangam Soni•1,090
    @ShivangamSoni

    Nice Work. Few Suggestions:

    1. Start using Semantic Tags: There are plenty of Semantic tags that provide additional information about the sites' markup, making it much more accessible & it also helps in writing HTML which is much more structured & easy to understand. Like the ingredients, instructions, etc. all these could have been wrapped in their own section tags.

    2. Use Table: In the Nutrition section, you have used p & hr to achieve the design, but it doesn't provide the same level of info as a table tag would provide. Also, using the table tag automatically puts the data into a tabular format (rows & columns) so, you don't have to write additional CSS to achieve that.

    3. Meaningful CSS classes: You have used CSS class names like sp, categ, cal which might make sense to you but in a larger project with multiple developers it won't work. You should get into practice of using meaningful CSS Classes that actually convey some information, making it easier to understand & maintain. Like your sp class is just making the text bold & a darker color, so it would make much more sense to actually have the class name bold or highlight. Also, I suggest looking into things like BEM or Object-Oriented CSS (OOCSS) in order to write better, readable & maintainable CSS.

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