Design comparison
Solution retrospective
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
- @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 helpful1 - @SOLDNOTTOLDPosted 7 months ago
This looks really good! Did you ever find a solution for removing the bottom line of the table?
0@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
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