Skip to content
Submitted 5 months ago

Mobile-first: Recipe Page with CSS/HTML

Sarah•580
@AutumnsCode
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

It wasn't my first time coding this challenge, but I hopefully I did a good job by adding the recommandation I received into the code. And I overcame my fear of ``````

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

Any suggestion how to improve is welcome!

Community feedback

  • Dylan de Bruijn•3,230
    @DylandeBruijnPosted 5 months ago

    Hi Sarah,

    Great job on your solution, it looks very close to the design. Nice use of CSS variables and reusable classes. I like that you used a lot of semantic HTML as well.

    May I ask what the fear was that you overcame?

    A bit of feedback:

    • On mobile you could add a bit more spacing at the bottom of the recipe card. The bottom of the table gets cut off a bit.

    • There are some leftover comments in your code which you could remove.

    • At the moment you are importing your CSS in your JS file and linking that file in your HTML. You could get rid of your JS file and link your CSS file directly in your HTML like this:

    <head>
  <link rel="stylesheet" href="src/css/main.css">
</head>
    • I see you separated your CSS in multiple CSS files, at the moment they get compiled into one CSS file because Vite handles this. If you like this practice I suggest something like SASS.

    I hope you find this feedback useful!

    Marked as helpful
    0
    Sarah•580
    @AutumnsCodePosted 5 months ago

    @DylandeBruijn I honestly don't know what exactly was my fear in regards to table had been, maybe i felt a little overwhelmed.

    I applied your suggestion to my solution, and it should be fixed by now. With the js-file, I had been testing it and forgot to change it back. In regards to SCSS, I have been using SCSS in the past, but since nesting is available in native css too, I don't really see the point in using this for small project like this.

    Best regards, Sarah

    0
  • Dylan de Bruijn•3,230
    @DylandeBruijnPosted 5 months ago

    Hi Sarah,

    They can be a bit overwhelming but it looks like you figured it out! SCSS has a lot more to offer than just nesting, but I agree that it maybe can be a bit overkill for small projects.

    Happy coding!

    1

Please log in to post a comment

Log in with GitHub

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