Skip to content
OverviewSolutions
3
Comments
2

Alex Blue

@fake-alex-blueLondon, UK70 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Responsive Social Media Links Profile (vanilla)

    Alex Blue•70
    Submitted about 1 year ago

    I experimented using min() and max() to dynamically adjust the width and padding of the element, but I haven't quite figured out how to make those changes feel proportionate - so that they happen at the same time and same rate.

    Any tips on that would be appreciated!

    0 comments

  • Blog Preview Card with Media Query

    Alex Blue•70
    Submitted about 1 year ago

    To get a pixel perfect result, I think technically the 1px black border needs to be on the inside of the card element's width:384px and height:522px.

    But, as the height of the element isn't set (to allow for user font sizes), I couldn't account for the line border thickness properly; so I'm ~2px too tall at default 100% zoom font-size:16px. What's the best way to overcome that?

    Also, how would you refactor this to use a smaller font-size on mobile without using a media query. I reckon I could do it in JS, but I'm not 100% sure what the best practice would be for CSS alone. 🤔

    1 comment

  • QR Code component - Baby's first Frontend Mentor challenge.

    Alex Blue•70
    Submitted about 1 year ago

    Not really looking for help or feedback on this one, but will definitely be browsing solutions to see how others have structured and named thing. Picking a good naming scheme is obviously the second hardest thing to do, after centering a div. 😋

    1 comment

Latest comments

  • Alex Blue•70
    @fake-alex-blue

    A nice solution here, it looks good, and your code is well structured and easy to read. I like that you used flexbox here, although you might want to look a little closer at your implementation, on my screen the large image appears centered but doesn't fill enough of the width.

    I'd probably also have liked to see more semantic HTML used; but ultimately the challenge is to create a card component, outside the context of a larger site where it might be used; so I don't think that's too critical.

    The main point I would mention is to do with the border-radius attributes on both the card itself and the yellow, card image. What you've gone for doesn't quite match the design file - and I'm not sure I prefer your version to what the design suggests.

    The card is probably looking for a border-radius: 20px and, from memory, the large title image is looking for a border-radius: 10px - but I think you'll also need to create a more specific CSS selector so that you can target the larger title image without also catching the author photo.

    Marked as helpful
  • Daniel Wiśniewski•30
    @TheWicha
    What are you most proud of, and what would you do differently next time?

    I don't know tbh :) Maybe i would use tailwind CSS

    What challenges did you encounter, and how did you overcome them?

    only with Figma, but i finally found out what fonts are there

    What specific areas of your project would you like help with?

    in this project i dont know :)

    qr-code

    2
    Alex Blue•70
    @fake-alex-blue

    I like the approach you took to this solution. It's clear you've made some different stylistic choices, using Montserrat for the h2 text, for example - which I can't argue with personally; I think it looks good.

    The only small thing I'd mention, is that you've not added the box-shadow on the card, which is a shame; I reckon it elevates the design of the original; although to be honest it's so subtle that I completely missed it on my first attempt at the challenge.

    Marked as helpful