Skip to content
Submitted 4 months ago

Recipe Page Solution

vladyslav-shulhach•170
@vladyslav-shulhach
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 proud that I made the code closer to the original design. Next time I would take a different approach to the project, starting with a mobile-first design. It would allow me to focus on building the main content into a small and functional layout before expanding it to larger screen sizes and adjusting as needed. I believe this approach would have made the code more organised and the process more efficient.

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

I had difficulty getting the headings and lines to align precisely, and keeping the same spacing between elements as the design. It was challenging to get everything to look exactly right, but I carefully adjusted the margins and padding until they were as close to the original design as possible.

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

I would like to learn how to create websites more efficiently, especially when it comes to pages with a lot of content. I want to learn professional CSS techniques for working with complex layouts, such as using advanced grid and flexbox strategies, responsive typography, and other tools to simplify the process of managing and organising large amounts of content.

Community feedback

  • P
    Gillian Oliveira•260
    @lia-oliveiraPosted 4 months ago

    Your solution looks visually excellent, your repository is well-organized, and you have advanced knowledge of HTML and CSS. Congratulations! 👏 Reading your code, I learned about the use of the <time> tag—I’ll definitely apply it in my upcoming projects. Thank you!

    If I may, I’d like to share a suggestion regarding the HTML structure. Semantically, I believe it would be more appropriate to wrap the recipe in an <article> and the sections in <section> tags. This way, a screen reader user would understand it as one recipe with different sections, rather than as separate recipes. Nice job!

    Marked as helpful
    2
    vladyslav-shulhach•170
    @vladyslav-shulhachPosted 4 months ago

    @lia-oliveira Thank you for your feedback! I'm glad you found my code useful. I will definitely look into your suggestion to use <article> and <section> tags for a more semantic structure. Thanks again!

    2
  • P
    Rahexx•900
    @RahexxPosted 4 months ago

    Code Review

    Hey, great job with this! Here is some feedback to help you improve further:

    1. Responsiveness

    • It's great that you're focusing on making your layout responsive, especially with adjusting sizes based on screen width. However, this approach can sometimes cause issues. For example, when I opened your website on a screen with 1700px width, I saw a gigantic image that took up most of the screen, and I couldn’t even see the entire "preparation" section.
    • Be mindful that users may have much larger screens, so it's important to optimize for larger displays and ensure that no content is getting cut off or scaled too much. Consider adding a max-width or scaling for images to prevent this.

    2. Previous Comment

    • If I understood correctly, the comment from Gillian about the article was referring to the use of a single article tag, with section tags nested inside it.
    • An article can exist on its own, whereas a section is part of something larger and should not exist independently. In this case, the recipe can be considered an article and should be placed inside the article tag. However, other content within the article tag, which is part of the recipe, should be replaced with section tags for better semantic structure.

    3. HTML Structure

    • It’s great that you used a header within each article and that you incorporated the time tag. I hadn’t considered using the time tag before, but now I’ll definitely remember to use it in my own projects. It adds a lot of semantic value, especially when dealing with dates or time-based content.

    4. Custom Properties

    • Your use of custom properties (CSS variables) is excellent. The variables are well-organized, which makes your CSS cleaner and easier to maintain. Keep up the great work with that!

    Overall, you've done a fantastic job! Keep it up, and feel free to reach out if you have any questions. Happy coding!

    Marked as helpful
    1
    vladyslav-shulhach•170
    @vladyslav-shulhachPosted 4 months ago

    @Rahexx Thank you for your feedback! I'll take your advice into account and make adjustments.

    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