Skip to content
OverviewSolutions
4
Comments
7

ErwiniaDev

@ErwiniaDev100 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

Latest comments

  • ErwiniaDev•100
    @ErwiniaDev

    Hello,

    I'd like to point out that I'm only a novice, so I'm not sure my feedback is very relevant...

    In any case, congratulations, the essentials are there and the few differences I can see are in the spacing (padding, margin, etc...).

    You've also used variables and CSS reset, perfect.

    Keep up the good work!

  • ErwiniaDev•100
    @ErwiniaDev

    First of all, congratulations on your solution, it's very similar to what was expected! What's more, I'm just a beginner, so my feedback may not be the most relevant...

    1. A quick note: you certainly deliberately chose to hover the links with a black background and green text, but the design showed a green background and black text instead.

    2. Like me, you haven't yet modified the README.md

    3. For this 3rd point, I'm really not sure at all, so please excuse me if I'm talking rubbish: for accessibility, it's recommended to use as few divs as possible, because they don't make any particular sense when users are using a screen reader, for example. Perhaps it's possible to replace your div with an article, for example, as it's a card, an independent element that could be reused elsewhere. (https://dev.to/zac_heisey/7-alternatives-to-the-div-tag-in-html-62i)

    4. And like me, it's not pixel perfect when it comes to spacing. I confess I got as close as I could to the requested version.

    It's really very clean in any case. I hadn't thought of using a list! Keep up the good work!

    Marked as helpful
  • ErwiniaDev•100
    @ErwiniaDev

    Hi! I'd better warn you, I'm just a beginner and I don't know Next.js, so my feedback may not all be relevant...

    Congratulations on your challenge, it's quite similar to the model. However, here are a few comments I can make:

    1. I think it's best to avoid using “main” directly to build your card, but rather to add a dedicated container (section for example).

    2. I think that the "learning" tag is not a button/link.

    3. You can bold the title of the card, as well as the author's name.

    4. According to the Figma file, you have a gap of 12px between the picture and the author name.

    5)The card's shadow should be very dense, on both the right and bottom faces.

    1. When I made the challenge, I put a padding in the card so that it would be the same everywhere. I think the space at the top of your card, separating the top-border and the image, is larger than the space at the sides.

    2. The border-radius for the image of the card is 10px, not 20px I think.

    As for the rest, I don't dare say too much for fear of talking nonsense. I hope these few comments will help you a little anyway.

    All the best!

  • Bintou karah•80
    @KarahDotjs
    What specific areas of your project would you like help with?

    I'm having trouble with the units of measurement for minimum and maximum height and width.

    qr-code-component

    #accessibility
    1
    ErwiniaDev•100
    @ErwiniaDev

    Hi there! First of all, congratulations on your project, it's pretty close to what's expected.

    I've got some feedback if you want, but I'd better warn you, I'm just a beginner so this feedback won't necessarily be the most relevant...

    1. Great, you thought of the "reset.css" file. I didn't know about it before doing this challenge myself. I was advised to put it directly in the "style.css" file for performance reasons.

    2. As this card is not intended to stand alone on a website page, its title is not the title of the page. You can therefore use an h2 instead of your h1.

    3. The body includes the header, main and footer. The footer is not part of the main. And pay attention to indentation in your HTML file.

    4. I think you don't need the div with the class="qr-img", and only one of the div is necessary between card-container and card-content. For my part, I've put the title and text together in a div so that I can easily manage the gap between them, for example. Not sure that's necessary.

    5. The border-radius for the card is 20px (you have 10px). For the padding of the card, it's 16px on the Figma file (you have 20px). And for the font-size of the card title, it seems to be 22px on the Figma file (you have 1.5rem = 24px, you can get 1.4rem I think).

    6. On this last point, I'm not quite sure. In the modern CSS reset, there's line-height: 1.5; but it just seems too big. For my part, I've commented out this line in the modern CSS reset.

    Honestly, nice work. I hope my feedback will be of some use to you and not mislead you.

    All the best!

    Marked as helpful
  • P
    Arsalan2078•70
    @Arsalan2078
    What are you most proud of, and what would you do differently next time?

    I am most proud of being able to use my custom css library. This will very significantly quicken styling process and reduce setup.

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

    I encountered issues with css specificity, speficially with my padding classes which were generated automatically.

    
    Learning

    p-xs-100 is responsible for mobile screen size padding on all sides, while pt-xs-50 and pb-xs-50 added padding on top and bottom respectively. The latter two didn't override paddings set by p-xs-100 class, which was generated after the two.

    I addressed the issue by creating two scss loops:

    • First generates universal margins and paddings
    • Second generates margins and paddings on one side at a time
    What specific areas of your project would you like help with?

    I am not particularily happy with my typography, and there are definitely more techniques and tips I could use to improve upon scss.

    Custom CSS Library, used Flexbox and utility classes to style elements

    #node#react#sass/scss#vite
    2
    ErwiniaDev•100
    @ErwiniaDev

    Hi, there, First of all, I'm sorry I'm such a beginner so my feedback won't necessarily be the best...

    Congrats for your project, it's near to the model!

    The only detail I found was the border-radius of the card (the model's is smaller than yours, 10px if I'm not being silly). However, I did find your border-radius: 0.625rem in your style.css (line 2675) but only for the image. It's 1.75rem (line 2671) for the card.

    I hope my feedback helps you in spite of everything. All the best!

    Marked as helpful
  • Chris Ebube Roland•160
    @ChrisRoland
    What are you most proud of, and what would you do differently next time?

    I was hesitant to read Tailwind's documentation or browse for help on the difficulty I was facing setting it up because I wanted to figure it out on my own. In the end, I realized that I could have saved myself a lot of time and frustration if I had just looked up the solution. I guess next time I wont hesitate to look up solutions to any blocks I encounter

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

    Its been a while I used Tailwind with traditional CSS and without PostCSS, so it took me some time to set up and build with the Tailwind CLI

    Blog Preview Card

    2
    ErwiniaDev•100
    @ErwiniaDev

    Hello, First of all, I'm sorry, I'm a real beginner so my feedback might not be the most relevant...

    Congratulations on your project, it looks great.

    I just see a small difference in size, maybe just increase the font-size a bit, keeping the rem as you did.

    Best wishes for the future!

View more comments