Skip to content
Submitted over 3 years ago

3-column-card component with SASS using the SMACSS methodology

Said Alejandro Rosas Vera•145
@said-alrove
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi!, what's up? I had already made this challenge a few weeks ago, but I started to remade my projects (including the Frontend Mentor challenges) trying to apply new things I've learned, such as SASS (I had already known SASS, but just recently I finished of reading the documentation and practicing with it, so just now I feel confident enough to build projects with SASS).

I have to add that I used my own kinda library with mixins for SASS, such as mixins for media queries, Flexbox, and Grid.

Also, something important to mention is that I used the SMACSS methodology for structuring this project. I've already used this methodology a couple of times, but I'm still in the process of mastering it.

Feedback is always appreciated :D.

P.D. Likewise I've implemented the use of logical properties such as inline-size (width), and block-size (height) due to nowadays there's already enough browser support for them.

Community feedback

  • Halí V.•230
    @halivertPosted over 3 years ago

    For your three accessibility issues:

    1, 3. Document should have one main landmark

    You could wrap the three cards inside a <main>

    1. Page should contain a level-one heading

    Sections could have an h1 level heading

    Also the way you write your styles is great for modularity.

    Good job 👍🏽

    1
    Said Alejandro Rosas Vera•145
    @said-alrovePosted over 3 years ago

    @halivert Hi! thanks for your advice, I hadn't really understood what the "main landmark" meant, but now I do. Likewise, I didn't know that I could use more than one h1 on the page under those circumstances 😮.

    Also, thanks for your last comment, I try to do my best to modulate my stylesheets with different methodologies and thus have a more organized project. Have a nice day!.

    1
  • Ahmed Faisal•5,095
    @afrusselPosted over 3 years ago

    Hi, nice work using all latest trends technology and library. I found a issue. Your main container is not center align both horizontal and vertical. So make it center. Other then it's nice.

    1
    Said Alejandro Rosas Vera•145
    @said-alrovePosted over 3 years ago

    @afrussel Thank you so much man, I almost forget it 😰, it's already done. Have a nice day!.

    0

Please log in to post a comment

Log in with GitHub

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