Skip to content
Submitted about 1 month ago

CSS grid, Responsive design

accessibility, sass/scss
mark orrente•160
@markorrente01
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Proud of the grid layout I used. I will try to be more flexible when using it next time.

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

I encountered the grid layout challenge of differentiating between align-content and align-items. I solved this by conducting deep research on the properties before continuing the project.

What specific areas of your project would you like help with?

I would just like y'all to give me an honest review and maybe resources that y'all used to improve your skills in front-end development.

Code

Please log in to post a comment

Log in

Community feedback

  • Leonardo Bravo P.•100
    @leonardo-bravop

    Amazing job! Everything is really clean and well structured. The cards' hover animation is really cool. You also considered good accessibility practices, although, after making a quick research I found using two <h1> elements in .header could confuse screen readers.

    I saw you were using a mixin for the font. I'm also using a similar one :) it was really useful for keeping the code DRY. Little observation, I noticed in your mixin you're defaulting $f-size to be normal. That confused me a bit, maybe it was intended to be a numeric value with a unit?

    Overall I really liked how you implemented the media queries and the grid. One last suggestion that may make more sense for bigger projects but it's worth mentioning would be to break SCSS into partials and then import them into a main style.scss using @use or @import.

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