Skip to content
Submitted 6 months ago

Responsive webpage design with HTML and CSS

Shiv•350
@undrthegraveyard
Preview site (opens in new tab)View code (opens in new tab)
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?
  • One opportunity to improve is that the final design of the mobile preview is not similar to the original design, for instance, the "Preparation time" section.
  • Overall, the spacing around the bullet points could also be improved drastically.
What challenges did you encounter, and how did you overcome them?
  • There were a few challenges that I encountered, one of them was using classes logically in my code. I have been struggling to use classes efficiently, especially in my CSS code.
What specific areas of your project would you like help with?
  • On one specific issue, I would really appreciate some help from the community. I was not able to make the color of the bullet points(dots) same as that of their heading.
  • For instance, the color of the heading "Ingredients", and its bullet points(dots) should have been the same.

Community feedback

  • Manav•390
    @manav-sharma69Posted 6 months ago

    Hi! You can add colors to bullet points by using the ::marker pseudo-element.

    Here's the MDN link: ::marker

    Hope this helps!

    Marked as helpful
    0
    Shiv•350
    @undrthegraveyardPosted 6 months ago

    @manav-sharma69

    Hey! Ahh, I see. I am still getting used to the concept of pseudo-elements. ChatGPT gave some long complex code just to solve this one simple issue, could have just said pseudo-element instead, hehe.

    Thank you so much for your help buddy! 😄

    1
    Manav•390
    @manav-sharma69Posted 6 months ago

    Happy to help!

    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