Submitted 28 days ago

Responsive Recipe page using HTML and CSS

Himanshish08• 60

@Himanshish08

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

During this project I learnt some new methods which was not taught by my teacher from whom i learn HTML and CSS Next time i make more attractive project in less time.

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

During this project i can not figure that how to change the color of list bullets or numbers but from open sources in google i learnt that it can be done by using marker property of lists.

Community feedback

thibault.deverge• 260

@thibault-deverge

Posted 28 days ago

Overall Feedback: First off, great work! You've created a design that is very close to the original, and it's clear you've put a lot of effort into making it as accurate as possible. Your attention to detail really shows, and you've done an excellent job. While it's almost pixel-perfect in many ways, there are a few minor inconsistencies that could be refined.

Visual Feedback:

Typography: The font weight for the headings could be bolder, and the font family for the main <h1> heading is not quite the same as in the design. Fixing this will make your design even closer to the original.
Image Responsiveness: On mobile devices, the image should be full width. It currently looks a bit constrained, so ensuring it expands to the full width will improve the layout on smaller screens.
Layout Shrinkage: The design feels a bit too "shrinked" on smaller screens. You might want to look into using max-width for better fluid responsiveness across different screen sizes.

Overall, your design is really solid and close to the original. Just a few tweaks can make it perfect!

Code Feedback:

External Styles: It’s a good practice to extract your CSS into a separate .css file. While keeping styles inline is fine for a small project, it's best to get into the habit of separating HTML and CSS as projects grow in complexity.
Use of id vs class: Using id for styling works, but it’s generally better to use class attributes. class allows for reusability and has lower specificity, making your CSS easier to maintain and more scalable. It also opens the door to utility classes (like in Tailwind CSS) and reusing the same styling across multiple elements. Also for the naming convention, here is a good one I personnaly use if it can be helpfull Link BEM Method Explained
Semantic HTML: You could enhance your HTML structure by using more semantic elements. For example:
- Wrap the entire recipe inside a <main> tag.
- Use <section> elements for distinct parts of the recipe, such as Ingredients, Instructions, and Nutrition.
- Encapsulate the entire recipe inside an <article> tag to make it clear that it's a self-contained piece of content.
- Consider using a <table> for the Nutrition section, as it’s tabular data.
These changes will improve accessibility (especially for screen readers) and help with SEO. Semantic HTML - Kevin Powell
Relative Units: It's important to avoid using px for font sizes, padding, and margin, as it can hurt responsiveness. Using relative units like rem and em will make your design more adaptable to different screen sizes. Pixels should generally be reserved for fixed values like border-radius or other small details that don’t need to scale. Kevin Powell - CSS em and rem explained Kevin Powell - Are you using the right CSS units

Conclusion: You’re really close to nailing this project, and it’s clear that you’re on the right path. There are a few improvements to consider, but overall, your work is excellent. Keep it up, and I’m excited to see what you do next!

Best of luck, and happy coding! 🚀

Marked as helpful

Steven Stroud• 11,850

@Stroudy

Posted 28 days ago

Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

<div id="main">

Avoid using id selectors for styling in CSS because they are too specific and hard to override, making your styles less flexible and maintainable. Instead, use class selectors (.), which are reusable and more manageable, allowing for better control over your styles and easier updates.
Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,

<img src="image-omelette.jpeg">

Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset
I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,
While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

Marked as helpful

Please log in to post a comment

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