Frontend Mentor | ErwiniaDev's profile

Amateur Developer•150

@devtoday22Submitted 12 days ago

Blog Preview Compoent with NEXTJS

2

ErwiniaDev•40

@ErwiniaDevPosted 10 days ago

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:

I think it's best to avoid using “main” directly to build your card, but rather to add a dedicated container (section for example).
I think that the "learning" tag is not a button/link.
You can bold the title of the card, as well as the author's name.
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.

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

0

Bintou karah•50

@KarahDotjsSubmitted about 1 month ago

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

1

ErwiniaDev•40

@ErwiniaDevPosted 17 days ago

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

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

0

Arsalan2078•50

@Arsalan2078Submitted 21 days ago

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

2

ErwiniaDev•40

@ErwiniaDevPosted 21 days ago

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

1

Chris Ebube Roland•70

@ChrisRolandSubmitted 24 days ago

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