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

Recipe Page using HTML and CSS

osenpremaโ€ข 170

@osenprema

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 am proud to have completed the challenge. Trying to make it as similar as possible was tricky, but I think I did a good job. I improved my CSS skills.

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

My challenges were using local sources and making a responsive design using Media Querys. I researched the subject and learned new things.

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

The last row of the table in the Nutrition section has no bottom border. I tried to bypass it with Pseudo Classes (e.g. table tr:last-child), but couldn't. I opted to use a "no-border" class for the last row, since it is a static table. Any feedback is welcome!!! :)

Community feedback

Mineโ€ข 90

@Mineshaye

Posted

Hello! ๐Ÿ‘‹ Great job on completing the challenge successfully! ๐ŸŽ‰ I wanted to share a suggestion about your code that I think you'll find useful.

-I added a class to the last row of the table, and in CSS, I applied the property "bottom-border: none" to it. Feel free to give it a try yourself as well.

HTML

        <tr >
          <td class="lastrow" >  Fat</td>
          <td  class="lastrow" > 22g</td>
        </tr>

CSS

.lastrow{
  border-bottom: none;
}

-In the exercise folder, there's a file called "style-guide.md" that outlines all the project specifications, such as colors and font families. This means you won't have to visually assess the style elements.

I hope you find this tip helpful! ๐Ÿ˜„ Above all, the solution you submitted is great! Keep up the great work, and happy coding!

Marked as helpful

0
P
Koda๐Ÿ‘นโ€ข 3,810

@kodan96

Posted

hi there! ๐Ÿ‘‹๐Ÿ‘‹

if you wanna style an element's childs except the last one you can use the

.parent-selector .child-selector:not(:last-child)

syntax to extract the last selected child from the selection. Using this should not apply border to the last tr

hope this helps ๐Ÿ™

Good luck and happy coding!

Marked as helpful

0

osenpremaโ€ข 170

@osenprema

Posted

@kodan96 Hello, thanks for your time. I tried what you told me, but it doesn't work for me :(

I did this:

table tr:not(:last-child) { border-bottom: 1px solid hsl(30, 18%, 87%); }

The strange thing is that, if I do this:

table tr:not(:last-child) { background-color: blueviolet; }

Whether to color the background of each row except the last one.

I don't know why it applies other features, except the borders. :(

0
P
Koda๐Ÿ‘นโ€ข 3,810

@kodan96

Posted

@osenprema

probably something else overwriting that selector

easiest ways to debug this:

  • look for selectors that have higher specificity than this one

  • or other selector that has the same specificity but it comes later in your file and overwrites the selector I mentioned

so look for border-related selectors involving your table

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