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 Card

Arsh 120

@arsh-de

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 was able to match the design accurately. However, next time I will try to improve my naming of the CSS selectors.

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

The challenges I encountered were with border of the table elements and color scheme. I searched on the internet and tried again and again to get the design right.

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

The CSS styling naming and property assigning.

Community feedback

@Lescano713

Posted

First, you can group colors and the font-family using :root { --color1: #fff; }. It's easier to change the style without having to go back and correct each part of the CSS. Additionally, you can use media queries (@media screen) to adapt the page to different screen sizes. Another way to structure the table is by grouping the content into divs.

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