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

Mobile-first: Recipe Page with CSS/HTML

Sarah 540

@AutumnsCode

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?

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

@DylandeBruijn

Posted

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 540

@AutumnsCode

Posted

@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

@DylandeBruijn

Posted

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
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