I pride myself on good code organization, and on another occasion I would focus on implementing accessibility and some js framework
What challenges did you encounter, and how did you overcome them?Using the Itcss methodology was a great challenge
What specific areas of your project would you like help with?I believe that in the implementation and validation of the accessibility part
Great work! This is a really good solution.
There's a few small errors that I can see:
When you resize the window, the box jumps to the top of the screen. This may need to be looked at, there may be a media query here that needs amending.
A very tiny error but 'published' should have a capital P.
You asked for feedback about accessibility, I think the image could have a better alt text rather than 'Banner post' – this doesn't describe the image at all. A screen reader would read this out to a blind user and they wouldn't know what the image is. Try being more descriptive and adding some more detail there, perhaps something like 'A vector image of some lines and shapes on a yellow and white background'.
Everything else looks great, there's good attention to detail here and you've even changed the drop shadow on hover. Great solution!
This is brilliant, tidy code, used sass, solution is almost pixel perfect to the original. This is has been done really well with no extraneous code. I don't have any improvements to add as this is a perfect solution.
Great work. :)
Well done for completing your first challenge!
You've done really well here and got a solution that looks pretty close to the design. However, there are definitely some areas that aren't quite true to design, you may need some padding around the text to give a little more whitespace and you've missed the drop shadow on the card component. Try improving your solution to show you have a keen eye for detail. Really have a look at how the text flows in the design and try to replicate this in your code.
Well done and I hope you enjoy doing more challenges.
This looks absolutely perfect! The only tiny thing I can see is that your design is missing the subtle box-shadow on the .card element. You can see this when you rollover your solution and compare it to the design above.
But apart from that, it's absolutely pixel perfect. Well done, you smashed it! 👏
This was a nice little challenge for me. I learned how to add additional background images and position them. But when I was doing my media-queries for desktop, i didn't realize that those images moved instead as staying fixed when the page was responsive. That will be something to continue to practice for future challenges.
Well done! This looks great, I had the same issue with the background images 🙃 Multiple background images are tricky. I had some feedback on my solution that might help.
This solution literally looks pixel perfect though, when I roll over the design/solution bit, there's very little difference. Congrats 👏
Hello! Great solution, congrats! My feedback:
Well done, this looks really great and your code looks succinct. Very nice 👏
This is my solution for the Profile card component coding challenge
Links
Built with
Any suggestions for improvement are welcomed.
Hey! Your solution is really awesome, I absolutely love the rollover with the increased drop shadow. This is a nice little touch. My only suggestions would be to:
<div class="pattern-background">, you could put the background on the main card itself, saving some html coding. You could also consider using flex for this top half of the card as well as the info section below.<hr>, just to make the html more succinct.p tags inside <div class="statistics">, you use six in total but you could use three with either a <strong> or a <span> to style the numbers. This may make your code more semantically correct as well.Really awesome solution, it looks almost identical to the design and I do love the added touch of the rollover. Congrats! 🙌
Feel free to comment :)
The only thing I can see is that the drop shadow seems to be missing from the main white box. Otherwise this is literally pixel perfect. This is definitely the best solution I've seen so far. Well done!
