@lion9Submitted about 1 month ago
Macdonald Nkhata
@MacNkhataAll comments
- @GuilhermeMarchioliSubmitted 2 months ago@MacNkhataPosted 2 months ago
Everything is done properly. The only issue is to at least style the attribution section as well to make the whole page coherent.
0 - P@jeffgrahamcodesSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I’m most proud of how well I was able to structure and style the layout, ensuring it looks clean and consistent across different screen sizes. The use of semantic HTML and well-organized CSS with variables for colors, spacing, and typography made the code more readable and maintainable. I’m particularly happy with how the card's design matches the original Figma design and maintains visual balance on both desktop and mobile devices.
If I were to do something differently next time, I’d pay closer attention to edge cases in responsiveness, particularly for very small screen sizes. I noticed some styling issues, like the border-radius on images, that only became apparent during testing on narrower viewports. Moving forward, I’d include more rigorous mobile testing earlier in the process and refine my approach to handling image scaling and overflow within constrained containers.
What challenges did you encounter, and how did you overcome them?One of the biggest challenges I encountered was ensuring the design remained consistent across different screen sizes, particularly on smaller devices with widths under 375px. The issue with the
border-radiuson the blog image disappearing at smaller breakpoints was especially tricky to troubleshoot. Initially, it wasn’t clear whether the problem stemmed from the image itself, its container, or a combination of both.To overcome this, I revisited my CSS, focusing on properties like
What specific areas of your project would you like help with?overflow: hiddenand ensuring both the container and the image had explicitly definedborder-radiusvalues. I also utilizedobject-fit: coverto ensure the image scaled correctly while respecting its rounded corners. Testing across multiple devices and refining the mobile-specific styles in my media queries ultimately resolved the issue. This process reinforced the importance of thorough responsiveness testing and double-checking how parent and child elements interact at different breakpoints.I’d appreciate feedback on how I handled responsiveness, particularly for very small screen sizes (under 375px). While I addressed the issue with the image’s
border-radius, I’m curious if there are more efficient or scalable ways to handle image scaling and overflow in constrained containers. Additionally, I’d like guidance on improving accessibility, especially in terms of ARIA roles, and focus states for interactive elements. Lastly, if there are any best practices I might have missed for structuring CSS with variables and media queries to make the code even cleaner and more maintainable, I’d love to hear those suggestions.@MacNkhataPosted 2 months agoThere is nothing to add. keep doing what you are doing
Marked as helpful1 - @darguzisSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Proud that I was able to complete this fairly quickly
What challenges did you encounter, and how did you overcome them?Haven´t worked with CSS for quite some time as I was learning JavasCript and React.js now, so it it quite the challenge to rememeber all the media queries and how to create beautiful styling.
What specific areas of your project would you like help with?Would love to get opinions and feedback on how to make it fluent between all the different resolutions. I.e. when is the best time to use flexbox grid etc.
@MacNkhataPosted 2 months agoYou could have put more effort as most of the concepts could be easily googled and you could have done better than that
0
