Skip to content
Submitted over 1 year ago

Responsive recipe page using CSS Nesting

semantic-ui
Benjamin•30
@Laridot-1
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I had to look up somethings I never picked up while learning the fundamentals of HTML and CSS. Styling the markers posed as a problem but I was able to find my way around it. I had to re-strategize while dealing with nesting in CSS, putting general styles there and dealing with individual styles with their own selectors. I don't know if my CSS is clean.

Code

Please log in to post a comment

Log in

Community feedback

  • DPOsengo•50
    @DPOsengo

    Hi, I see that you used ul::marker to color your bullets, interesting, but apparently still "experimental", here is a whole page I used, very interesting, explaining how to completely restyle them : CSS: Colored Bullets and List numbers by Bert Bos ... and I will spoil the end, when the author gives an even quicker trick to do that : put your text in <span> like this :

    <li><span>This is a list element</span></li>

    then you color your <li> with these 2 steps :

    li {color: red}
li span {color: black}

    Of course that's "if you have the right to modify the markup", if you cannot add spans, then the whole page explains the how-to.

    Happy reading !

    Marked as helpful

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