Submitted about 8 hours ago

Responsive recipe page using HTML and CSS

Fraol T.•60

@Fraol-T

Preview site View code

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?

Doing a complex design

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

my first Figma design wasn't spot on and the result from development was bad. So I designed the page with different approach without leaving a detail.

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

some times you don't get a Figma design instead you get an image file to work on a project. In my case I use Figma to design a mockup for the design (image) to get the measurements, but the final result after I code is not close to the first design. What am I missing here ?

Community feedback

ManasiCoder•120
@ManasiCoderPosted about 6 hours ago
Congratulations on finishing your project! 👏

I know how difficult it is to create a project without proper sizing. But I believe this help us improve our size perception.

I have some tips for you on this project that might help.

You used <div> to separated your HTML content. Although it helps organized your code, this is considered bad practice. I recommend using semantic HTML instead. For example: you can use <main> as a container and <section> for the preparation, ingredients and introduction. This will improve your website's performance in search fields.

Another thing, I recommend using percentages (%), instead of pixel (px) for the width and height of elements. This helps you a create responsive website. You can still use pixels for max-width and ``max-height```

I hope help you. ✌️
1

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