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

My recipe page

ildi0818 40

@ildi0818

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?

I think I'm starting to understand the essence of the mobile first and why we start coding with it first. Unfortunately, I didn't start with that, so it was more difficult. But it helped me understand.

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

Dynamically scaling the image was a bit more difficult.

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

The sizing of the image caused minor difficulties in order to reduce its size proportionately. I could not remove the bottom line of the table, I only set the same color as the background. I tried to use a css variable, but I wasn't sure if I should assign it to, for example, "li".

Community feedback

@robertdouglasaimon

Posted

Hello ildi0818! All good? I was looking at your project and it looked good!

I saw that you assigned

li { --color-li: hsl(24, 5%, 18%); }

because I was unsure about assigning variables in CSS. Always try to assign variables to the " :root {} " property. Because, in addition to being designed for this purpose, it helps you keep the code clean and organized (And you can assign both the colors and the fonts that you import with @import in it! It helps a lot!)

Ex of :root:

@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');

:root { --font-Young-Serif:"Young Serif", serif; (for font) --cor1-Raspberry: hsl(332, 51%, 32%); (for color) }

I hope I helped, your project turned out really good! Congratulations!

Marked as helpful

1
P

@SOLDNOTTOLD

Posted

This looks really good! Did you ever find a solution for removing the bottom line of the table?

0

ildi0818 40

@ildi0818

Posted

@SOLDNOTTOLD I saw solutions, but unfortunately it didn't work for me for some reason.

0

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