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 with HTML + CSS (СSS Grid)

archdron 65

@archdron

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, so this is my take on the challenge as a first-timer in HTML + CSS. Can't say if it is elegant or whatever, but there surely are some points for improvement. Could you, please, point them out for me?

Community feedback

@lailton-b

Posted

OMG, you sent it very well, wow!! The only thing I would say that you can improve is the shadows, do some research on material design and see how to make the shadows more real, it's really cool!

3

archdron 65

@archdron

Posted

@lailton-b Thanks, I will definitely take a look 👍

0
P

@nityagulati

Posted

The page looks good, Archdron. The code is clean and readable and I like that you split up the stylesheets, nice work! Is there a reason that you put the border-color for the cards as inline style in your HTML? I would recommend moving that to your external css.

Have you worked with HTML5 semantic tags before? That's something you can work with in your next project. It helps with screen readers and accessibility as well.

And you can also look up SMACSS architecture for organizing your styles, I think you might like it :) I'm currently working with it and it definitely makes life easier especially for bigger projects.

2

archdron 65

@archdron

Posted

@nityagulati

I'll make sure to check out SMACSS, but I think I need to properly wrap my mind around CSS first.

0
P

@nityagulati

Posted

@archdron Which course are you doing at the moment?

Yeah just keep practicing and once you have a good grasp of CSS, you can look up SMACSS and naming conventions such as BEM to organize and maintain your code. You are doing great :)

1
archdron 65

@archdron

Posted

@nityagulati This one. Looked like a good value to me. Are there any you would recommend?

Regarding the occasional inline styling, I thought I'd just leave the specific, one-off things inline and move the bulk styling to separate files.

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