Skip to content
Submitted 8 days ago

Pure HTML5 and CSS Recipe page

Kiara523•100
@Kiara523
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'm getting better at organizing the work flow. There is always room for improvement.

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

It was fun to style the ul and ol. It was a bit challenging to figure out how to make space between the dots and the list item. I've found a very useful resource at "css-tricks.com" website.

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

I'd like to implement my code with more responsiveness without having to write long media queries. I know that using a clamp() function could help. Any suggestion on other technics that I can study to implement responsiveness are welcome! FEEDBACKS on how to organize the css file better so it is more readable and also I'd like feedbacks on naming classes...are mine too generic?

Community feedback

  • Irina Lagutina•620
    @FoxMalder-coderPosted 8 days ago
    1. You already have just ONE media query) But it's not mobile-first approach.
    2. I suggest to set basic text attribute to body, then you don't need text class.
    3. You can use BEM naming. Or in little case (like this) one-two word class name page-title, subtitle (ingredient, instruction, nutrition) --- h2__prep isn't good. You don't need new class for item which pay same role and looks same just because it is inside new section...
    Marked as helpful
    1

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