Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Daniel Basilio• 350

    @danielbasilio

    Submitted

    What are you most proud of, and what would you do differently next time?

    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

    Responsive blog preview card component using sass and css flexbox

    1

    Kay• 120

    @kayy-w

    Posted

    Great work! This is a really good solution.

    There's a few small errors that I can see:

    1. 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.

    2. A very tiny error but 'published' should have a capital P.

    3. 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!

    0
  • Kay• 120

    @kayy-w

    Posted

    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. :)

    0
  • Kay• 120

    @kayy-w

    Posted

    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.

    Marked as helpful

    0
  • Kay• 120

    @kayy-w

    Posted

    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! 👏

    0
  • Mirm• 80

    @Missteeme31

    Submitted

    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.

    Profile-card-component

    1

    Kay• 120

    @kayy-w

    Posted

    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 👏

    Marked as helpful

    0
  • Kay• 120

    @kayy-w

    Posted

    Hello! Great solution, congrats! My feedback:

    1. You may want to change the colour of the attribution at the bottom as this currently isn't readable on the dark background.
    2. The card itself is quite close to the top of the window, you may want to shift this down to closer match the design.
    3. When you hover over the image, the icon opacity isn't at 100% as it is in the design. You may need to check your code to show the icon at full opacity even when the cyan block is only at 0.5 opacity.

    Well done, this looks really great and your code looks succinct. Very nice 👏

    0
  • Kay• 120

    @kayy-w

    Posted

    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:

    1. Possibly cut the <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.
    2. Consider using a border rather than a <hr>, just to make the html more succinct.
    3. You could cut down on the amount of 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! 🙌

    Marked as helpful

    1
  • Kay• 120

    @kayy-w

    Posted

    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!

    Marked as helpful

    0