Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
4

Sapinder

@sapinder-pal565 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

  • IP Address Tracker | Vanilla JS | CSS | Leaflet.js | Ipify.org


    Sapinder•565
    Submitted almost 5 years ago

    0 comments
  • REST Countries with Local Search History | ReactJS | SASS | Webpack


    Sapinder•565
    Submitted almost 5 years ago

    1 comment
  • Fully Responsive Landing Page | React | Webpack | Sass | Contexts


    Sapinder•565
    Submitted almost 5 years ago

    2 comments
  • URL Shortening | React JS | Fetch API | Sass | Copy Functionality


    Sapinder•565
    Submitted almost 5 years ago

    1 comment
  • Fully Responsive Landing Page | Reactjs, Sass, Grid, Flexbox


    Sapinder•565
    Submitted almost 5 years ago

    0 comments
  • Fully Responsive Page | Background Parallox Scrolling | Reactjs


    Sapinder•565
    Submitted about 5 years ago

    1 comment
View more solutions

Latest comments

  • Vashista Kondeti•40
    @vashista-kondeti
    Submitted almost 5 years ago

    html css

    1
    Sapinder•565
    @sapinder-pal
    Posted almost 5 years ago

    Hi @Vashishta! You can use a grid layout like so-

    .first-box {
      grid-area: first;
    }
    .second-box {
      grid-area: second;
    }
    .third-box {
      grid-area: third;
    }
    .fourth {
      grid-area: fourth;
    }
    .features {
        display: grid;
        grid-template-columns: repeat(5, 1fr); //repeat 5 columns with equal proportions of width
        justify-content: center;
        grid-template-areas:
            "...       ...             first        ...        ..."
            "...      second    first        third   ..."
            "...      second    ...            third   ..."
            "...      second    fourth    third   ..."
            "...      ...              fourth    ...        ...";
    }
    

    You should read the documentation about grid layout!

  • Diarrah•3,418
    @Diarrah
    Submitted almost 5 years ago

    React with SCSS + Routing

    2
    Sapinder•565
    @sapinder-pal
    Posted almost 5 years ago

    Your projects are awesome-ly implemented @Diarrah. It's fabulous!

  • Sagar Kaurav•460
    @sagarkaurav
    Submitted almost 5 years ago

    Countries API solution using ReactJS Tailwindcss

    1
    Sapinder•565
    @sapinder-pal
    Posted almost 5 years ago

    You did a nice job @sagarkaurav! One thing I would want you to know is that you have to keep in mind the users who set third-party cookies to block, and so do I. This is why my browser prevents frontendmentor from previewing your solution (the original url should work but on this site, it's considered third-party). In my previous challenge, I also encountered the same. So I applied a try and catch block in necessary places. You should also consider this. I had to turn off the third-party cookies to view your page :)

  • Sapinder•565
    @sapinder-pal
    Submitted almost 5 years ago

    Fully Responsive Landing Page | React | Webpack | Sass | Contexts

    2
    Sapinder•565
    @sapinder-pal
    Posted almost 5 years ago

    I appreciate your feedback. I'm thinking to improve upon my usage of sass, however, in this project I spent a great amount of my time in implementing a lot of webpack stuff like- mini-css-extract-plugin, postcss-loader, autoprefixer, etc., and understanding how everything works. I'm slowly improving my way of working and forgetting my bad practices. I'll try to improve my sass way of working. Could you please elaborate the 'BEM' and '7:1' you said about?

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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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