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

Semantically Structured Article

@Mohammad-Moneer

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?

In this project I got more experienced with semantic HTML, and I created and styled a simple table and make it accessible as possible. As for what I would do differently next time: I think there might be an optimization related to the image file size, as I mentioned in the question below regarding specific areas where I would like help.

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

How to create custom bullets and numbering with custom colors for the list items? for this issue I used the pseudo-element (::before) to generate content and style it with CSS, and for numbering I used CSS Counter.

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

I noticed that the image dimensions are very large, so I need to know if it would be better to create a new copy of the image file for the webpage and resize the image dimensions to be smaller to reduce the image file size

Community feedback

0xblu 130

@0xblu

Posted

it looks very similar to design. just titles have a little more font weight than they should have.

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