Submitted 2 months ago

Recipe Page

jordancareyui• 80

@jordancareyui

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'd like to think this is pretty clean for not using Figma. Ideally, I could push it to be a little more accurate, but then I'd have to generate another screenshot and I don't want to run out of those... I wasn't thinking mobile-first though since the other challenges haven't required much of that type of thinking, so I'll try to approach things from that mindset in the future.

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

I already know HTML fairly well, so instead of focusing on writing semantic HTML, the challenge was more like, "learn how to style tables and write a media query"... I ended up taking a few lines from this person's CSS (https://www.youtube.com/watch?v=hbgGn96daIk), and asking for help on the Frontend Mentor Discord.

Community feedback

f1r3• 120

@f1r3place

Posted 2 months ago

hi there! congratulations on completing the challenge!

here's some feedback:

the code is very much readable, it's great it's broken down into sections!
there are some issues with the html:

please add alt text to images! if there's only one thing to do for accessibility, that would be it.
please don't use <b> tags as they carry no semantic meaning. instead you should use the <strong> tag in this case to emphasize text.

everything else is fine as far as i can see.

it's a bit weird you've only added one color as a custom property, you can just add every other one used there to make your life a lot easier
i am not sure about this one, but instead of using display: grid; on your <tr>'s, you could use border-collapse: collapse on the table for borders to work
in the design all the things are flush on the inline sides (left-right), but in your implementation some things have indents

that's about it. good luck on your other challenges!

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