FrontEndMentor Project feedback

[Kasakapen]

Just created a project from the frontend Mentor(took me 7-10days). What are some code bugs/ visual designs I can fix?
Link: Link to Project
How the project is supposed to look like: FrontEndMentor Link.

[bbsmooth]

I think you got it looking pretty much exactly like the prototype, nice job! I’m going to point out some potential issues, some very picky, just to give you something to think about.

• I would make the transition from one row to one column much sooner. As I gradually narrow my browser the cards get really skinny before they transition to a column. Also, the buttons at the bottom get out of alignment. Decide what the minimum width of a card should be when side by side (I would recommend you use rem units) and then make the break point for switching to a column trigger at that minimum width multiplied by three.

• Even when my browser is wider, as I’m gradually increasing the width there are times when the buttons get slightly out of alignment (some are slightly higher up from the bottom of the card than others). I’m guessing they want the buttons to always be the same distance from the bottom. You’re placing the buttons using a top-margin based from the <p>. Since the height of the <p> can change this is probably not the best way to approach this. There are several other alternatives for doing this that will keep all of the buttons aligned. The two that come to mind are using flexbox or absolute positioning.

• I would put a max-width on the cards as well (in rem units). This keeps the lines of content from getting too wide (which can be hard to read for some people) and also I think aesthetically it looks better if they don’t get too wide.

• When I mouse over a button there is a shift in the height of the card because of the border added on hover. This is usually not desirable. Remember, you can have transparent borders. Hopefully this is a big enough hint on one possible way to handle this.

• This is not necessarily something you can fix because you are following the design specs, but technically the white text on that orange background does not have enough color contrast to be accessible. Designers often do not take these issues into consideration so I just wanted to point it out so you will know to check color contrast and ask the designer to modify their design to take accessibility into account when there is an issue.

• Another color related accessibility issue, the keyboard focus outline indicator probably needs to be customized so that it is clear for all three buttons. The default indicator for my Firefox looks fine for the orange card but can’t really be seen on the light blue card and is completely invisible on the dark card. I’m guessing the design specs you have don’t even provide information on what the focus indicator should look like, which is probably what happens a lot of time in the “real world” anyway Again, just pointing out accessibility issues that are often overlooked by designers.

[Kasakapen]

@bbsmooth

I would make the transition from one row to one column much sooner. As I gradually narrow my browser the cards get really skinny before they transition to a column. Also, the buttons at the bottom get out of alignment. Decide what the minimum width of a card should be when side by side (I would recommend you use rem units) and then make the break point for switching to a column trigger at that minimum width multiplied by three.

I think I fixed it?

@bbsmooth

Even when my browser is wider, as I’m gradually increasing the width there are times when the buttons get slightly out of alignment (some are slightly higher up from the bottom of the card than others). I’m guessing they want the buttons to always be the same distance from the bottom. You’re placing the buttons using a top-margin based from the <p> . Since the height of the <p> can change this is probably not the best way to approach this. There are several other alternatives for doing this that will keep all of the buttons aligned. The two that come to mind are using flexbox or absolute positioning.

Having trouble fixing it, but I will find the solution soon:)

@bbsmooth

• I would put a max-width on the cards as well (in rem units). This keeps the lines of content from getting too wide (which can be hard to read for some people) and also I think aesthetically it looks better if they don’t get too wide.
• When I mouse over a button there is a shift in the height of the card because of the border added on hover. This is usually not desirable. Remember, you can have transparent borders. Hopefully, this is a big enough hint on one possible way to handle this.

Fixed both of them, thank you so much for the hint!! I will also keep in mind of the color contrast when making projects:)

transported the code to codepen: https://codepen.io/nainaz/pen/bGRQLLV
EDIT: Managed to fix the shift in heights when hovering over buttons, seems like I did not fix it last time.