Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
9

nitinrs95

@nitinrs95240 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Stats Preview Card Component Main

    #sass/scss

    nitinrs95•240
    Submitted 3 months ago

    0 comments
  • Profile Card Challenge using Sass

    #sass/scss

    nitinrs95•240
    Submitted 3 months ago

    0 comments
  • NFT Preview Card Component Main

    #sass/scss

    nitinrs95•240
    Submitted 4 months ago

    0 comments
  • Meet landing page solution using Sass

    #sass/scss

    nitinrs95•240
    Submitted 4 months ago

    1 comment
  • Testimonials Grid Section Using Grid

    #sass/scss

    nitinrs95•240
    Submitted 4 months ago

    1 comment
  • Four Card Feature Section using Grid

    #sass/scss

    nitinrs95•240
    Submitted 4 months ago

    1 comment
View more solutions

Latest comments

  • P
    Melvin Sanchez Vazquez•300
    @melvin1207
    Submitted 4 months ago

    Meet Landing Page

    #sass/scss
    1
    nitinrs95•240
    @nitinrs95
    Posted 4 months ago

    Hi Melvin,

    Excellent effort on tackling this challenge! Your work shows promise, and I have a few suggestions to help you elevate it further:

    Semantic HTML:

    • Consider expanding your use of the <section> tag. It's not just for text; try using it to group related content, including images. This approach will give your HTML a more logical and meaningful structure.
    • The <h1> tag represents the main topic of the page, serving as the highest-level heading. Using it once ensures a clear hierarchy.

    BEM Methodology:

    • Implementing BEM (Block Element Modifier) for your class names could significantly improve your code organization. This naming convention will not only make your HTML clearer but also enhance your Sass implementation.

    Sass Organization:

    • Look into the Sass 7-1 pattern. This method of organizing your Sass files and folders can greatly improve the maintainability and scalability of your stylesheets.

    Responsive Design:

    • To ensure your design looks great on all devices, focus on making it more responsive. Consider how your layout adapts to various screen sizes and implement appropriate breakpoints.

    These adjustments will help refine your code and improve the overall quality.

    Marked as helpful
  • Paulo Wells•530
    @wellspr
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I think I've managed to get very close to the original design.

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

    Coding this solution was fun and I'm happy with the result.

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

    I'd love to get feedback on this solution!

    Mobile-First Responsive Layout: Media Queries, Flexbox and Grid

    #accessibility#lighthouse#sass/scss#bem
    2
    nitinrs95•240
    @nitinrs95
    Posted 4 months ago

    Hi Paulo,

    Excellent job on implementing this design.

    For future projects involving grids, you might consider using the grid-template-areas property. It can help adjust the card layout across different breakpoints before switching to the mobile view.

    grid-template-areas:
        "card1 card1 card2 card5"
        "card3 card4 card4 card5";
    
      @media (max-width: 68.75em) {
        grid-template-areas:
          "card1 card1 card2"
          "card5 card5 card5"
          "card4 card4 card3";
      }
    
      @media (max-width: 56.25em) {
        margin-top: 5rem;
        grid-template-areas:
          "card1 card1"
          "card2 card3"
          "card5 card5"
          "card4 card4";
      }
    
      @media (max-width: 32.5em) {
        margin-top: 5rem;
        grid-template-areas:
          "card1 "
          "card2"
          "card3"
          "card4"
          "card5";
      }
    
    
    Marked as helpful
  • Josef Dosoudil•170
    @jeptun
    Submitted almost 3 years ago

    Grid, Rem, Sass

    #sass/scss
    1
    nitinrs95•240
    @nitinrs95
    Posted 4 months ago

    Great solution Josef

  • P
    Leonard Cohen•200
    @lenny131
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    This project was a good opportunity to learn Sass. I also considered responsive design using rem instead of px and using logical properties.

    Product Preview Card Component with Sass

    #sass/scss
    1
    nitinrs95•240
    @nitinrs95
    Posted 5 months ago

    Hey Leonard,

    Nice job using Sass for this challenge! It's pretty cool.

    You might want to try out BEM for naming your HTML classes too. It works really well with Sass.

    I also gave Sass a shot for this challenge. I'm still learning it, but it's been fun to use.

  • Chris•110
    @Cemijares23
    Submitted over 1 year ago

    Recipe Page Using Some BEM and CSS Grid

    #bem
    1
    nitinrs95•240
    @nitinrs95
    Posted 6 months ago

    Hello Chris,

    Your design appears flawless, even with the use of pixel-perfect precision.

    Just a quick suggestion: instead of using modifier classes (e.g., .entity) for bottom margins, try leveraging Flexbox with the gap property. It simplifies spacing and gives better control over layouts. Also, consider placing utility classes after the main class (e.g., class="instructions entry") and using more descriptive class names for clarity and maintainability.

    Hope this helps! Still learning myself, but thought I’d share.

    Marked as helpful
  • P
    João Víctor de Araujo Lima•350
    @xuaun
    Submitted 6 months ago

    Social links profile card page using CSS flex

    1
    nitinrs95•240
    @nitinrs95
    Posted 6 months ago

    Hi João,

    Great job on the HTML semantics! The structure looks good from my perspective. For future improvements, consider refining your class naming with the BEM methodology or any other approach you prefer. It ensures clarity and consistency in your code.

    Marked as helpful
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub