Design comparison
Solution retrospective
Hello, I'm Steven and this is my solution for this challenge,!😊
🛠️ Built with:
- HTML 🧾
- Native CSS 🎨
- BEM Notation 🅱️
- CSS Grid 🔲
Thank you to the Front-End Mentor team that creates these challenges that help us learning journey to front-end.💟
Next time, I’d concentrate more on using CSS Grid to create a smoother, more natural layout across different screen sizes. By implementing responsive design techniques earlier in the process, I can ensure the layout adapts seamlessly, providing a better user experience from the start.
What challenges did you encounter, and how did you overcome them?I struggled with CSS Grid, realizing I knew less than I thought. This revealed a gap in my skills that needed addressing before moving forward. To overcome this, I revisited the basics through tutorials and practical examples and applied what I learned directly to my current project. This hands-on approach helped me grasp CSS Grid more effectively, and I now feel more confident using it in future challenges.
What specific areas of your project would you like help with?I'd like to improve my CSS Grid skills, as it's a crucial area I need to strengthen. If anyone has recommendations for resources, tutorials, or examples specifically focused on CSS Grid, I’d greatly appreciate it. My goal is to take some time to learn and master CSS Grid to apply it more effectively in my project.
Community feedback
- @grace-snowPosted 2 months ago
You have some invalid html in here. The width and height attributes must not have a unit in the value. They also must not be decimals. The purpose is to tell the browser the aspect ratio so it saves the space while loading.
Personally I think those icons are decorative so should have empty alt.
Two things I don't really understand in this
- Why you've felt it necessary to add an extra div around the images... I can't see why that would be needed.
- Why you've added hover animations when there are no interactive elements in this. That will make a super confiusing experience for mouse users. I'd assume the site was broken because of an animation but nothing happening on click of these cards.
Marked as helpful1@StroudyPosted 2 months ago@grace-snow, I value your feedback highly, Thank you,. I have made the following adjustments:
-
Removed the extra
<div class="card__svg-container">that wasn't serving any functional purpose. Initially, I used it to position elements withflex-end, but I realized that applyingmargin-left: auto;achieves the same effect more cleanly. -
Removed the hover animations, as I agree they were unnecessary and could cause confusion, especially since there are no interactive elements. I was experimenting with them but understand the concern and have simplified the design accordingly.
Please let me know if there are any further changes I could make.
0 - @MikDra1Posted 2 months ago
Nice one 😀
If you are curious how you can do this straight lines on the top of each card here is my tip:
Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.
Hope you found this comment helpful 💗
Good job and keep going 😁😊😉
Marked as helpful0@StroudyPosted 2 months agoHey @MikDra1, Hope your well, What purpose would doing it the way you have suggested serve over the current way, Is it best practice? I thought it was simple the way i done it with 1 line of CSS. I am always happy to try new things and appreciate your feedback.
0@MikDra1Posted 2 months ago@Stroudy
You can do this with border-top property but then the solution doesn’t look just like the design 😊
Marked as helpful0@StroudyPosted 2 months ago@MikDra1, Do you know what, That is a super small detail I did not even notice! Thank you for bringing it to my attention, Shortly i will implement what you suggested. 😁
0 - @MikDra1Posted 2 months ago
I really like your desire to be better and get more points. I love it. Now I have a person I can chase 🏃♀️. Never stop improving 😉😀
1@StroudyPosted 2 months agoHello @MikDra1,
It’s not about a race for me—I truly enjoy helping others and introducing them to material they might not have encountered in a while on their journey. I wish someone had given me the same advice earlier in my own learning process.
While my feedback may be limited at this stage, I’m still eager to assist others and encourage them to do the same, as I believe it’s an important part of the learning journey.
I would be truly honored to receive Mentor of the Month at some point—it would genuinely make me happy. 😊
0@MikDra1Posted 2 months ago@Stroudy
I hope you will have fun and win this month. But remember I'm still here 😂😂😂
0@StroudyPosted 2 months ago@MikDra1,
Take it easy, So I can, I see you already have a load of badges.
0@MikDra1Posted 2 months ago@Stroudy
I started at the beginning of April (this year) so you can do it too 😀
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