@Grimm-N
@salva-it
Submitted
What are you most proud of, and what would you do differently next time?
I'm glad I finished this stage of the challenge
What challenges did you encounter, and how did you overcome them?
I faced challenges with using clamp() units for sizes, adjusting images for mobile and desktop versions, and configuring flex in this project.
@Grimm-N
Posted
Fantastic job on the code, you nailed it! 🎉 I have just a tiny suggestion that might make it even better. You could try adding a small margin to the card container so that it’s fully visible on mobile without needing to scroll. Or, if you're feeling adventurous, adjusting the height to 90vh might ensure the whole design is visible no matter what screen size you're working with.
Keep up the great work!
Marked as helpful
@manasmaity506
Submitted
What specific areas of your project would you like help with?
I tried to use some naming conventions in class names, so that the css become more clear and easily modifiable.
@Grimm-N
Posted
@manasmaity506 Your project looks fantastic! 🌟 You've clearly put a lot of effort into it, and the attention to detail really shines through. Great job! 🎉 Wishing you all the best in your web development journey!
Just a little suggestion—maybe you could explore loading fonts and using @font-face in CSS. 🎨 It's a neat trick that can boost your site's performance by reducing external requests. Plus, it gives you more control over the font styles and ensures a consistent look across browsers and devices. 🚀 Keep up the awesome work! 💪
@DanielOmehe
Submitted
@Grimm-N
Posted
@DanielOmehe, Hey there! 😄
You did an awesome job with this! Your work is looking fantastic!
I recommend using this great CSS Reset
For a bit more readability and ease of maintenance, it’s usually better to keep elements on a single line if they’re not too lengthy. It keeps the code looking sharp and tidy! ✨
Your footer looks great, but using the <footer> element would make it even better. Think of it as giving your footer a VIP pass—it helps with accessibility and SEO, making sure your page structure is easy for everyone (and search engines) to understand. 🕵️♂️
Additionally, for better responsiveness, consider using units like %, rem, and em. For font-size, weight, height, padding, etc. This helps a lot!
Also, you can streamline your code by ditching some of the extra <div> wrappers. Just one <div> for the links should do the trick. It’s like decluttering your closet—less mess, more style! 😎
Keep up the fantastic work and keep having fun with your coding! 🚀
Marked as helpful
@AyeDin333
Submitted
What are you most proud of, and what would you do differently next time?
The aspect I was most proud of in this project is the sizing and placement of elements to resemble the design example.
What challenges did you encounter, and how did you overcome them?
I was having trouble placing the elements in the correct place, after a little while playing around I figured out how to position the elements correctly.
@Grimm-N
Posted
@AyeDin333
Great job on the project! 🎉 You’ve done an excellent job bringing your design to life.
If you’re up for a challenge, you might want to try recreating a similar design to see how closely you can match it. It’s a fantastic way to gauge your skills and explore your design capabilities further. 💪
I really like the structure of your code—it’s clear and organized. 👍 However, for smaller elements, you might want to simplify the code a bit. It could make maintenance easier and keep things neat.
Additionally, for better responsiveness, consider using units like %, rem, and em. These units help ensure your design adapts smoothly across different screen sizes and resolutions. 📱💻
Keep up the great work and keep pushing your boundaries! You’re doing fantastic! 🚀
@Mugambidev
Submitted
@Grimm-N
Posted
@Mugambidev, Great job on your project! It looks really nice! 🎉
I do have a small suggestion: consider using the <footer> element instead of a generic div. This is not only more semantically correct but also beneficial for accessibility and SEO.
Overall, you're doing fantastic work, and this small change could help make your site even better. Keep up the great work! 🌟
Marked as helpful
@filipangel
Submitted
@Grimm-N
Posted
Hi! Your website blog card looks fantastic! I have a few friendly suggestions if you’re open to them.
HTML: You might want to try using Modern CSS Reset [https://piccalil.li/blog/a-more-modern-css-reset/] — it could help streamline your styling.
Also, simplifying the code by reducing the number of <div> containers could be beneficial.
I noticed that the spacing is consistent at 16 pixels (1rem) everywhere. You could simplify this with .card > * + * { margin-top: 1rem; }.
Another idea is to add a hover effect for the headings to change their color when hovered — it’s a quick tweak that can really enhance the look!
And by the way, I noticed the mobile version looks the same as the web version right now. It would be awesome if it could adapt to different screen sizes.
Thanks for considering these suggestions! Good luck!
Marked as helpful
@codebyMM
Submitted
@Grimm-N
Posted
Thank you for your work on the code! It actually inspired me to add a footer to my project, even though it wasn't in the original assignment. The implementation looks great overall, though I noticed a slight mismatch in the spacing and font size compared to the design. However, I find the execution to be more visually pleasing than the design itself; the text looks more harmonious. Great job!
P.S.: U forgot about the shadow ;-)
Marked as helpful
