Submitted 7 months ago

My recipe page

ildi0818•40

@ildi0818

Preview site View code

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?

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

Robert Douglas•90
@robertdouglasaimonPosted 7 months ago
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
Trevor Bryant•90
@SOLDNOTTOLDPosted 7 months ago
This looks really good! Did you ever find a solution for removing the bottom line of the table?
0
ildi0818•40
@ildi0818Posted 7 months ago
@SOLDNOTTOLD I saw solutions, but unfortunately it didn't work for me for some reason.
0

Please log in to post a comment

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