Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

Responsive recipe page using HTML and CSS

123dakalo•50
@123dakalo
A solution to the Recipe page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

When I began coding I ignored table elements but in this solution I learned how to use tables.

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

The challenge I faced was making the design to be responsive like in the design I failed to mimic the design solution. I'll overcome by learning more.

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

Media query please and maybe to centre big element like this one

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Grace•32,130
    @grace-snow
    Posted over 1 year ago

    Hi, I can spot some problems here so hope these pointers are helpful :

    1. The image is important content so should have a proper alt description.
    2. Personally I'd consider the preparation time text as a heading.
    3. The table must include header cells for the table heading content. Ideally these should include a scope attribute set to row.
    4. Just so you're aware, you don't need to include paragraphs inside list items.
    5. Don't use b tags. That's a deprecated tag. Use strong instead for strong emphasis.
    6. You don't need to repeat the preconnect google font links. Only ever include them once, no duplication.
    7. Optionally you can load all the fonts in one go, choosing the specific families and weights you need. This would be better for site performance.
    8. Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
    9. Set the max width in rem not px. This is important for users who change their default text size as it means the layout will scale correctly.
    10. The max width on the image must be 100% and not a pixel value. I think that is what is breaking this site when I view it on mobile. Its making the content overflow on both sides (I'll add a picture to discord so you can see what's broken).
    11. The other thing that is likely causing the overflow is the explicit width on the name class. Those table cells should each be width 50% to make them even.
    12. This challenge does not need any media query. You can remove them and all should work once you've applied the above fixes. But in future challenges make sure you work mobile first, with the larger screen overrides in the media query. Have a read of this: https://fedmentor.dev/posts/responsive-meaning/
  • John•410
    @MiyaoCat
    Posted over 1 year ago

    Looks great! The spacing between the bullets and numbers and the text is well done. I know I struggled with that.

    Some small differences I noticed:

    • Your line spacing looks a bit tight compared the the design file.

    • I saw you use @media (max-width: 426px). For mobile-first development, you'll want to use @media (min-width: 426px). When you build mobile-first, you build out the mobile screen first. As you make the screen bigger, you may change some of the CSS. So you'll say, when the screen size is a minimum of X pixels, the elements will include Y CSS. In other words, when the screen size is X pixels or larger, then do this...Hope that makes sense! I know for me it seemed totally backwards and took me a minute to understand it.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub