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 HTML and CSS

P

@shakthivel-rn

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 learned about specificity of rules when using media queries to make the website responsive

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

It was difficult to make the website responsive, because for mobile layout, there was new set of changes that was different from tablet and desktop layout

Community feedback

Adriano 36,730

@AdrianoEscarabote

Posted

Hey Shakthivel Ramesh Nirmala, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

Using only <div> elements in code reduces the semantic meaning of the HTML structure, making it harder for assistive technologies like screen readers to interpret the content. This impacts accessibility, as specific tags (like <article>, <header>, <section>) provide clear context about the purpose of content sections. Additionally, it can negatively affect SEO and make the code harder to maintain or understand for other developers. Therefore, using semantic tags enhances both user experience and code quality.

Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem!

link -> px to rem

Everything else looks great.

Hope this helps! 👍

Marked as helpful

0

P

@shakthivel-rn

Posted

@AdrianoEscarabote Thanks a lot for the detailed review. I should definitely improve myself on the accessibility side!

1

@hrid-chakraborty

Posted

Amazing attention to detail. The website looks really close to the original design. Moreover, it is very responsive.

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