Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Recipe page using Flexbox, bem and SCSS

P
DalaScriptā€¢ 380

@DalaScript

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • 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 ran into some difficulties with the list items and the table, areas I had no experience with before. šŸ“‹šŸ”
  • Despite these challenges, I managed well and did everything exactly as it was in the design. šŸŒŸšŸŽØ

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

  • The first challenge was resizing and positioning the list item bullets (including ol list items), which was quite difficult and required a lot of trial and error. šŸ”„šŸ“‹
  • The second challenge was handling the table, specifically the spacing between the tr elements and creating the lines between them. This was also a tough task, but after trying various approaches, I succeeded. šŸ†šŸ“Š
  • I overcame these challenges through extensive research on the Internet and a lot of critical thinking. šŸŒšŸ§ 

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

  • There were some difficulties, which I already mentioned, but they are now clear to me, and I've gained valuable information and experience from them. šŸ“˜šŸ’”
  • However, I'd love to get advice from others on what I could have done better. šŸ§©šŸ‘Øā€šŸ«
  • Feedback on my approach and any suggestions for improving my methods would be greatly appreciated. šŸŒŸšŸ’¬

Community feedback

adaviladevā€¢ 50

@adaviladev

Posted

Great work making your solution look exactly as the provided image!

I noticed that each list item in your code is assigned its own class. While this approach works, having numerous classes can make the code harder to read and may introduce unnecessary redundancy. One alternative could be to utilize a single class for ordered list items ('ol') and another for unordered list items ('ul'), which can simplify the structure and enhance maintainability.

It's also worth considering scalability. Imagine if your list grows to contain a large number of items; managing individual classes for each could become cumbersome. By adopting a more streamlined approach, you can ensure smoother scalability and easier code management as your project evolves.

Moreover, for better responsiveness across various screen sizes, incorporating concepts like viewport height (vh), viewport width (vw), and percentages can be beneficial. These techniques help in ensuring that the site content is appropriately distributed and displayed regardless of the device or screen resolution.

By implementing these suggestions, you can enhance the readability, scalability, and responsiveness of your codebase, ultimately improving the overall user experience of your website.

1

P
DalaScriptā€¢ 380

@DalaScript

Posted

@adaviladev I appreciate that, thank you!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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