Skip to content
OverviewSolutions
4
Comments
6
Blenimator
@Blenimator

All comments

  • Blenimator•60
    @BlenimatorPosted 3 months ago

    Looking good overall! I don't know react yet, but i would double check the width of your card. It's a bit too wide compared to the design card. Also i think the margins around the buttons are a bit too small.

    But i do like the styling of your buttons, love the little transition for the background and the outline is feeling pretty nice.

    Great stuff, thanks for sharing! :)

    0
  • Blenimator•60
    @BlenimatorPosted 3 months ago

    Hey ! :) This looks absolutely fantastic and i think it's the closest solution to the design i have seen so far!

    Great job!

    1
  • Blenimator•60
    @BlenimatorPosted 3 months ago

    Hey! This is a great solution overall! I think you hit the design quite nicely overall, but the overall size of the card is slightly off. You can check the provided figma file to double check the size of the card.

    Looking at your code it is easy to read on the html side of things, but when looking at the css code i am getting a bit confused - even though things are working obviously. I am just wondering why you have these crazy selectors, for example:

    main .intro span:first-child {
    background-color: var(--Yellow);
    width: fit-content;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: 800;
    margin-top: 10px;
    margin-bottom: 12px
}

    Why not using one specific name as class? I feel that with this way, someone else reading the code (like me), or picking it up later, has a hard time following around.

    Last thing i wanted to mention is, that it feels a bit weird when sizing down. Maybe consider doing the media query a bit earlier, so that you're not cutting into the drop shadow before it changes the size. But that's probably my personal taste. :)

    Thanks for showing and sharing your code! Looking forward to see more.

    Marked as helpful
    1
  • Blenimator•60
    @BlenimatorPosted 3 months ago

    This is great looking so far!

    I think you should consider double checking which font is used and probably double check the positioning of the white card as it doesn't look like it's centered on screen.

    Other than that, great work! :)

    0
  • CodzSchach•240
    @Joker4masSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Trying out this challenge was exciting as I had to look up concepts like box-shadow and CSS variables to help me get as close to designing the card as possible.

    Responsive Blog card using CSS flex-box

    1
    Blenimator•60
    @BlenimatorPosted 4 months ago

    Hey there! Think overall this is looking good so far!

    Just thought that you might wanna double check the size and placement of your card. It seems to be slightly off center and it stretches out on bigger monitors.

    Maybe you could consider adding a max-height/width for the .container class? I am not sure if the children would then inherit this, but maybe worth a try though.

    I do belive if you add a a height: auto; to your .container, it should be placed in the center of the screen vertically as well.

    For the .css itself, i probably would order things a bit different, like i'd put the .attribution to the bottom right before the media queries - but that's for my personal taste (just looking at the page from top to bottom and would arrange the css the same way if possible).

    Not sure if this would be a better practice or not, but maybe consider defining your color variables in the .root class and use it with names? Might be easier to read when you come back to your code later.

    Just my 2 cents. Hope it makes some sense and helps. Cheers!

    0
  • katrinavassell•10
    @katrinavassellSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of taking the first step on this particular project-based site!

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

    Towards the end of the project, I leaned on Figma specs more which were incredibly helpful. I should have used them sooner.

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

    I leaned on the work of others, Figma's code recommendations, and Chat GPT, so any feedback is appreciated.

    QR Code Component Main

    1
    Blenimator•60
    @BlenimatorPosted 4 months ago

    Hey there! Welcome to the Frontendmentor community! :)

    It's great to see that you made your first step! I think your code looks clean and easy to understand (at least from my beginners pov - just finished this challenge myself).

    The only thing i wonder about is, why your card looks a bit wider/smaller than the original design. Other than that i think it's looking great!

    Thanks for sharingand keep going!

    0