Submitted 3 months ago

Recipe page using html and css

razanabbas• 100

@razanabbas

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

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 not very proud of my work this time.

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

This one was difficult especially that I didn't have the Figma file. It also requires the use of a variety of html elements like lists and tables which I'm not comfortable using yet.

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

I would like to receive help in three areas:

How can I make the list bullets and numbers colorful? I didn't know what selector to use.
How do I make borders between border rows? (except for the last row?)
I am getting a little bit confused about when to use specific units of measurement. When should I use relative units, percentages, and pixels? If someone can briefly explain it to me..

Community feedback

BegShoo• 80

@BegShoo

Posted 3 months ago

I'm pretty new at this too! But here are the solutions I used for the questions you have:

For the bullets I actually removed the <ul> styling and inserted them in the html using entities. You can search them up. I then styled those in CSS. For the numbers, I replaced the <ol> numbers with a counter (I searched this up on w3schools), but essentially you place them using a pseudo element (::before) and then position them absolutely. You can style these like any other thing in CSS.
I had to search this up too, but you can style tr, td and th like anything else, add border-bottom.

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