Skip to content
Submitted 4 months ago

Rediscovering Frontend Basics: A Recipe Page Challenge

Thiago Amâncio•50
@MoonAmon
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?

I am proud of the final result. I am not a big fan of frontend development, but this project made me appreciate CSS a bit more. Next time, I will try to implement the responsive part of the site for mobile devices.

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

The challenges I faced were mainly remembering how Flexbox works in CSS and how to center it. I did some research and recalled the use of display: flex; and flex-direction: column;.

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

I had some doubts, particularly about how to change the color of the bullet points in the list and table tags. I tried a few approaches but couldn't achieve the desired result. Another issue was when I use padding and border for spacing items inside the main container. I ended up making a workaround in CSS to make it look similar to the solution. If anyone has answers to these questions, I would appreciate the feedback :)

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 4 months ago

    Hi!

    You can style list markers with ::marker pseudo class. It looks like this:

    li::marker {
    font-weight: 600;
    color: blue;
    font-size: 1.5rem;

    etc...
}

    About paddings and borders - their main purpose to create space inside element not between, but you did it right with the flex-gap =) Sorry, if I didn't catch your question, please, clarify it =)

    And one semantic suggestion - you should use main tag. Every page should contain one. Overall you use semantic tag quite neat!

    Hope that helps, good luck =)

    Marked as helpful
    1
    Thiago Amâncio•50
    @MoonAmonPosted 4 months ago

    @Alex-Archer-I

    Hey!

    I'm very grateful for the feedback. I made the changes you advised, and it helped me a lot. My question about paddings and borders was exactly what you answered.

    Thank you again for the help! (￣▽￣)/

    1
    Alex•3,130
    @Alex-Archer-IPosted 4 months ago

    @MoonAmon

    Glad I could help =)

    Fell free to ask, comment and stuff if need =)

    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