Submitted 7 months ago

Recipe Page

Toyyib Bayo• 30

@As-sakhowy

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

This is my second solution to this project yet I still don't get ton the following :

how to style the number list by putting between it and the content.
how to style the table correctly the way it is in the project template.

Community feedback

zainy2401• 80

@zainy2401

Posted 7 months ago

Hey bro I've got some tips for you to help with your problems.

Firstly, you are asking about the list style? I believe you can solve this by removing "list-style-position:inside;" or changing the value to outside, on line 92 of your CSS file.

Secondly, have you considered using a table element instead of cluttering that section with paragraph and div tags? It's much easier and cleaner to build and style with. Check out this easy tutorial from w3Schools https://www.w3schools.com/css/css_table.asp that shows how to style tables.

Otherwise you seem to be on the right track, good job so far!

Marked as helpful

Toyyib Bayo• 30

@As-sakhowy

Posted 7 months ago

Thanks very much @zainy2401 Though I've tried the table but it look confusing but I will Check the link you shared me if it can help

zainy2401• 80

@zainy2401

Posted 7 months ago

@As-sakhowy No worries, It's all about practice but you can pretty much design the table any way you want this way. Take a look at my solution on Github, read the HTML and CSS: https://github.com/zainy2401/frontend-mentor-projects/tree/main/recipe-page And you can see how I've designed the table.

Olaniyi Ezekiel• 7,600

@Ezekiel225

Posted 7 months ago

Hello there 👋 @As-sakhowy.

Good job on completing the challenge !

Your project looks really good!

I have a suggestion about your code that might interest you.

There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.

Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! 🚀🌟.

I hope this suggestion is useful for future projects.

Other than that, great job!

Happy coding.

Marked as helpful

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