Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 9 months ago

Recipe Page using HTML and CSS

ldonnianni•130
@ldonnianni
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?

I am proud that I coud match the design. I would like to improve my workflow, naming conventions of the elements and to write a nice clean HTML and CSS.

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

The most difficult part was to use the correct elements in the HTML that would make it more readable and easier to style in css. Not sure what can I improved.

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

I would like to know if the structure of the HTML is correct and if I used the corrects elements or should I be aware of something else.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Grace•32,130
    @grace-snow
    Posted 9 months ago

    There are some important learnings about html and css in this. At the moment its badly overflowing my phone screen on the sides because of mistakes in css. But most issues are likely to be in the html.

    • the image needs a proper description that communicates the same value as the image itself. There are some great posts about this in the resources channel on discord.
    • when importing fonts you don't need to repeat preconnect links. You can also combine families and weights into one main link instead of having two separate ones.
    • there is no benefit at all to using all these sections. They basically act like divs when unlabelled (totally meaningless elements) so there is no reason to add them all. You get as much structure as you need from the headings. (Take note as well @MarenOelixtown )
    • it's essential to use table header cells for the header content. It's also good to use the scope attribute set to row on these so it's clear they are row headings not column headings.
    • the attribution should be in a footer landmark outside of main.
    • make sure you update your attribution link to your frontend mentor profile url or github url.
    • where did you get your css reset from? It looks a little unusual.
    • I can't think why you need the container text div at all... The whole component should have padding. Child elements within it should only need vertical margins. Make sure you understand the difference between padding and margin
    • the unnecessary min-width on the component is causing the bad overflow I'm seeing. This component should only have a max width in rem. You can give it a width 100% as well if you want to.
    • don't nest css selectors unnecessarily. Keep css specificity low/flat. Place classes directly on what you want to style and stick to single class selectors as much as possible.
    • if headings are styled the same give them all the same class!
    • this challenge should only need one media query. And one max width in rem.
    • I recommend you define media queries in rem or em not px so that the layout changes happen at the right time even for people who have a different text size setting.
    Marked as helpful
  • Maren Ehlers•230
    @MarenOelixtown
    Posted 9 months ago

    congratulations, you have done a good job. 👍 You have already used very useful semantic HTML elements, such as ul, ol, table and section. With article you could possibly replace the recipe-card-div.

    Good that you have defined responsive layouts from 505px and 1100px. A tip would be to work with mobile first approaches by defining smaller viewports by default and then overwriting them for larger viewports. all the best ✌️

    keep it up

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