Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four card feature section

abiol4001 10

@abiol4001

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Nice work on this challenge and congrats on submitting your first solution! Just a heads up that the View Code link currently goes to the live version of your project. This should point to the code repo so that it's as easy as possible for people to see your code and give you feedback.

Here are a couple of pointers after taking a look at your project:

  • I'd recommend never using IDs for styling purposes. They're overly specific and they can't be reused on the same page. Instead, I would stick to class, attribute, pseudo and type selectors. This will make your CSS more maintainable as it grows on larger projects.
  • You're repeating a lot of styles in the .top, .right, .bottom and .left classes. I would recommend putting those duplicated styles in a single class called something like .card. This would avoid code duplication and you can the use other classes to handle the differences, like the border-color.

I hope you find these tips helpful. Keep up the great work! 👍

0

abiol4001 10

@abiol4001

Posted

I greatly appreciate your remark on my work, I believe there's much room for improvement to my codes and I'm willing to give my all to get better

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@abiol4001 you're welcome! With each project your skills will improve and you'll find the workflow that suits you best. Also, for each project taking the time to really refine it and get it looking as close to the design as possible will be time well spent.

If you ever have any questions please feel free to message me!

0
Greta 340

@gretagr

Posted

Hey, it seems you added bad links for your code and live view. You can fix that by going to your solution, clicking thee dots near the name of the solution and selecting "edit solution".

Your work deserved to be seen!

0

abiol4001 10

@abiol4001

Posted

@gretagr Thanks for calling my attention to that, I got that fixed already. I'm really sorry for taking this long to respond. Have a good day

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord