Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
6

Yash Kadam

@yash-278India280 points

Hi! I'm Yash Kadam, Web developer. I develop responsive Websites for the Web.

I’m currently learning...

ReactJS, while increasing my grasp on Vanilla JavaScript.

Latest solutions

  • Responsive Intro Section Component

    #tailwind-css

    Yash Kadam•280
    Submitted about 3 years ago

    0 comments
  • Responsive Fylo Data Storage Component

    #tailwind-css

    Yash Kadam•280
    Submitted about 3 years ago

    0 comments
  • Responsive Article Preview Component

    #tailwind-css

    Yash Kadam•280
    Submitted about 3 years ago

    0 comments
  • Responsive Intro Component with Tailwind CSS

    #tailwind-css

    Yash Kadam•280
    Submitted about 3 years ago

    0 comments
  • Mobile first Base Apparel Page with TailwwindCSS

    #tailwind-css

    Yash Kadam•280
    Submitted about 3 years ago

    1 comment
  • Responsive Coming Soon page with TailwindCSS

    #tailwind-css

    Yash Kadam•280
    Submitted about 3 years ago

    1 comment
View more solutions

Latest comments

  • AlwinJun•230
    @AlwinJun
    Submitted almost 3 years ago

    HTML5 CSS3 using css grid property for layout

    1
    Yash Kadam•280
    @yash-278
    Posted almost 3 years ago

    Great Work !!! Looks great, sizes can be adjusted, but you nailed the overall layout🙌.

    Try toning down shadows. Also try using a CSS Shadow generator online, It lets you play with shadows interactively.

    Also, deep and dark shadows should be avoided, It generally doesn't look that good.

    Congrats on completing the challenge🎉.

    Marked as helpful
  • Arjun J V•80
    @Arjunjv
    Submitted about 3 years ago

    nft preview card

    1
    Yash Kadam•280
    @yash-278
    Posted about 3 years ago

    Great work ARJUN 👏 The card design is perfect.

    Now on to the problems you faced:

    • For vertical alignment of icon you can refer to vertical-align CSS property. MDN Link
    • For centering the card, now this is a tricky one & more of a hack than a solution, but I personally use this.
    .centered-element {
      margin: 0;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    

    This works almost everytime, mostly for single element stuff.

    • Lastly for icon overlay, it's complicated to explain it here, but here's a resource for solution W3Schools

    Overall nice solution and try searching wherever you're stuck, because searching is a also a important aspect of code.

    Happy Coding! Hope you found this useful 🎉

    Marked as helpful
  • Praveen Perumal•740
    @solvedbiscuit71
    Submitted about 3 years ago

    Ecommerce product page with React and Emotion

    #react#emotion
    1
    Yash Kadam•280
    @yash-278
    Posted about 3 years ago

    Woah, aside from few line-height and shadows, this is a pixel-perfect solution. Awesome work Praveen.

  • lleonardus•80
    @lleonardus
    Submitted about 3 years ago

    Social proof section using CSS grid

    1
    Yash Kadam•280
    @yash-278
    Posted about 3 years ago

    Hi, lleonardus! 👋 Good effort on this challenge! 👍

    It's great that you modularized the CSS files, easy to navigate indeed. If you haven't yet, try TailwindCSS, It's a different approach on styling sites. One improvement that I can suggest is :

    • Add max-width to the main container so that it wont stretch on larger screens

    Use Grid Alignment to learn more about aligning items inside the grid.

    That's it! Hope you find this useful! 😁

    Marked as helpful
  • William•110
    @wi2liamalpha
    Submitted about 3 years ago

    Order summary using HTML + CSS

    1
    Yash Kadam•280
    @yash-278
    Posted about 3 years ago

    Hi, William! 👋 Good effort on this challenge! 👍

    One improvement that I can suggest is :

    • Keep alt="" empty for all decorative images for accessibility purposes. MDN Article

    That's it! Hope you find this useful! 😁

  • Mick•300
    @Mick-2097
    Submitted about 3 years ago

    Article preview

    3
    Yash Kadam•280
    @yash-278
    Posted about 3 years ago

    Great Work, You probably forgot to add a background to the arrow icon, other than that it looks pixel perfect.

    Box shadows are a big pain 😂, there are few handy tools available online Check this site out : Box Shadow Generator

    Marked as helpful
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