Submitted 4 months ago

mobile responsive, css, html, flexbox, mobile first

🔅 Yuliya 🐈•240

@O-Julia-O

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?

The most proud of solution with borders in table, there was a small space and i found a way new for me which I've never met before.

table {
  border-collapse: collapse;
}

the code helped to delete the annoying small space between cells.

Next time i will do everything starting by centering all tags by flexbox;

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

The most proud of solution with borders in table, there was a small space and i found a way new for me which I've never met before.

table {
  border-collapse: collapse;

the code helped to delete the annoying small space between cells.

Oopps, about tables....

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

I would like to find out your opinion about my code and how to improve it. It would be so nice from you. Thanks in advance for your help :)

Community feedback

Thomas James•160

@turtlethomPosted 4 months ago

Hello Yuliya, I think your project looks fantastic. It's very responsive and looks great on all viewports. The presentation of the content on the recipe page is very professional.

I see you have used CSS variables to store the corresponding colors. You can reduce the amount of CSS you have written by defining your own CSS Utility Classes.

Basically, utility classes group styles that you use very often into one class so you don't need to write the same line over and over.

Example:

/* Your colors */
:root {
  --rose-800: #7a284e;
  --rose-50: #fff7fb;
  --stone-900: #312e2c;
}

/* Your CSS Utility Classes */
/* Text Colors */
.text-rose-800 { color: var(--rose-800) }
.text-rose-50: { color: var(--rose-50); }
.text-stone-900: { color: var(--stone-900); }

/* Background Colors */
.bg-rose-800 { background-color: var(--rose-800) }
.bg-rose-50: { background-color: var(--rose-50); }
.bg-stone-900: { background-color: var(--stone-900); }

<body class="bg-stone-100">...</body>

You can apply these classes to the necessary elements and reduce the amount of times that you write background-color: var(--stone-100);. This is a small example, but I hope this helps!

It's a bit tricky to get the hang of at first (I struggled understanding when to create utility classes), but it's very worth it, especially for larger projects.
You'll speed up the performance of your application, as reducing the duplicate styles will lead to a smaller CSS file.
These classes can expand to font-family, font-weight, padding-left, etc.

If you'd like to learn more, I found this resource to be quite informative: How I use utility classes to write more efficient CSS

I hope this helps!

Keep up the great work! You have a good eye for details :)

Marked as helpful

🔅 Yuliya 🐈•240

@O-Julia-OPosted 3 months ago

Thanks a lot! @turtlethom I totally forgot to mark it as helpful, I do apologize for this!

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