Design comparison
Solution retrospective
- 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. ššØ
- 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. šš§
- 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
- @adaviladevPosted 8 months ago
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
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