Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
43
Comments
228

Harsh Kumar

@thisisharsh7New Delhi ,India3,270 points

👋Hey Everyone! I am a tech geek and open source contributor.

I’m currently learning...

CyberSec and WEB3

Latest solutions

  • Space tourism multi-page website


    Harsh Kumar•3,270
    Submitted 17 days ago

    0 comments
  • IP_Address_Tracker


    Harsh Kumar•3,270
    Submitted 17 days ago

    0 comments
  • Rest-countries-API-build-with-React


    Harsh Kumar•3,270
    Submitted over 2 years ago

    0 comments
  • Rock-paper-scissors-game-build-using-React


    Harsh Kumar•3,270
    Submitted over 2 years ago

    0 comments
  • Room-homepage-built-with-React


    Harsh Kumar•3,270
    Submitted over 2 years ago

    0 comments
  • Time-tracking-Dashboard-built-with-React


    Harsh Kumar•3,270
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • Cosmic Cat•20
    @CosmicCatOS
    Submitted about 23 hours ago
    What are you most proud of, and what would you do differently next time?

    I got just a little better at Flexbox, I definitely struggled with the annual plan container items, so when I figured it out, I got so relieved

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

    Flexbox is kinda confusing, you have align-content, justify-content, main-axis, cross-axis, it's too much, hahaaaaaaaaaaaaaaaaaa

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

    I can't seem to figure my way out of box-shadow... And, I can't find the exact value for the box-shadow design too.

    Order Summary with Flexbox

    1
    Harsh Kumar•3,270
    @thisisharsh7
    Posted about 22 hours ago

    Great job on completing the challenge! The mobile-first approach and use of CSS custom properties enhance maintainability.

    • For box-shadow, try box-shadow: 0 20px 20px hsla(245, 75%, 52%, 0.2) for a softer, more accurate effect matching common designs (check CSS-Tricks for examples).

    • Avoid hard-coded values like width: 19rem in .info; use relative units (% or vw) for flexibility across screens. The .container-2 class in CSS isn’t used in the HTML—remove it to clean up the code.

    • To improve, experiment with CSS Grid for the card layout to streamline spacing. Add a media query (e.g., @media (min-width: 768px)) to adjust .container width for larger screens.

    Great work overall—focus on relative units for a polished, scalable design!

  • Sean Mafnas•80
    @Makkatlahi
    Submitted about 23 hours ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I was able to approach this in a mobile-first manner. Adjust the styling according to the dimensions was tricky, but I found it to be a little less troublesome when going from desktop to mobile.

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

    I had a few challenges that forced me (in my current skill level) to utilize more specific manipulation of the styling components. I didn't want to break up the original structure of the html because I thought it would disrupt the layout and styling of the mobile view. I decided to tweak the surrounding properties of the property I was trying to correct.

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

    I would like help with coming up with better styling practices that allow me to avoid having to explicitly manipulate a particular property in order to achieve the desired result. I felt this was analogous to 'hard coding' values instead of passing in ones received from user input.

    Responsive Recipe Page using Css Flexbox, media queries and BEM naming

    1
    Harsh Kumar•3,270
    @thisisharsh7
    Posted about 22 hours ago

    Great job on the Recipe Page! Your mobile-first approach is commendable, ensuring a solid foundation for responsiveness.

    • The clean HTML structure and use of CSS custom properties (e.g., --Stone-100) enhance maintainability.

    • To improve styling practices, avoid hard-coded values like width: 200px or width: 136% in favor of relative units (e.g., vw, rem, or %) or CSS calc() for dynamic sizing. This reduces specificity and makes adjustments easier.

    • Consider using CSS Grid for the main layout to simplify alignment and spacing, reducing reliance on manual tweaks.

    • The media query range (500px–1580px) is broad—add intermediate breakpoints (e.g., 768px) for smoother transitions.

    • For the image, use aspect-ratio to maintain proportions instead of fixed heights.

    • To level up, explore SASS for nesting or Tailwind for utility-first styling. Strong work—focus on relative units and modular CSS for more flexible, scalable designs!

    Great work overall- Happy coding!

  • Mayza•40
    @MayzaMendesRodrigues
    Submitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I'm proud to have implemented a JavaScript cloning and templating approach that improves code security and structure. It made the UI safer and the code more modular and maintainable. Next time, I would focus on applying filters that modify the data directly in the JSON, rather than just updating the visual interface. I’d also like to integrate a frontend framework like React to make the application more scalable and organized.

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

    This project helped reinforce what I’ve been learning so far. The main challenge was applying concepts I had studied across different platforms and putting them into practice. To overcome this, I broke the project into smaller tasks, reviewed documentation regularly, and tested each part of the UI as I built it.

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

    I’d appreciate feedback on how to better handle filters that modify the JSON data itself, rather than just the UI. I'm also open to any suggestions or improvements from the community — I'm here to learn and grow from others’ experiences.

    Grid - JS - HTML

    1
    Harsh Kumar•3,270
    @thisisharsh7
    Posted about 22 hours ago

    Excellent work overall! Your use of JavaScript templating and cloning is impressive, enhancing security and modularity.

    • For improvements, consider modifying the JSON data directly for filtering. You could update the extension array using methods like map or splice when toggling isActive or removing items, ensuring data and UI stay in sync.

    • For scalability, integrating React could streamline state management—look into hooks like useState for managing extensions. The filter buttons work well, but adding a loading state during fetch could improve UX.

    • Accessibility can be enhanced by adding ARIA attributes (e.g., aria-checked on toggles) and keyboard navigation for buttons.

    • To optimize, consolidate repeated CSS properties (e.g., border-radius) into a shared class and use CSS variables for colors consistently.

    • Next steps: explore state management libraries (e.g., Redux) or CSS-in-JS for larger projects.

    Great job overall-keep up the good work!

  • P
    Olha Sliusarenko•320
    @Oliko136
    Submitted 1 day ago

    News homepage solution

    #accessibility
    1
    Harsh Kumar•3,270
    @thisisharsh7
    Posted about 22 hours ago

    Fantastic work on completing the challenge! Your modular CSS structure, using custom properties and organized imports, enhances maintainability and readability—great use of --spacing-* and --font-size-* variables!

    • For improvements, consider optimizing image loading with loading="lazy" on non-critical images to boost performance. The .trending__img fixed height (300px) might cause distortion on some devices; using aspect-ratio could maintain proportions dynamically. In the mobile menu, the 60vw width might feel narrow on smaller screens—test a wider range (e.g., 80vw) for usability. For the popular section, adding min-width to .popular__text could prevent text wrapping issues on smaller screens.

    • To level up, explore CSS-in-JS or utility-first frameworks like Tailwind for faster iteration. The JavaScript for menu toggling is clean but could include keyboard event listeners for enhanced accessibility.

    Overall, a polished solution, minor layout tweaks for perfection!

  • Angelina Faggiano•20
    @adeluca43
    Submitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I’m really proud of how I planned things out and worked through the layout step by step. Taking it piece by piece—starting with the structure, then colors and text, and finally the graphics—helped me stay focused and not get overwhelmed. It made it easier to pay attention to the small details.

    This was my first design-focused challenge where I had to match a layout using provided images, and I learned a lot about how to work with external assets and fine-tune styles to get things looking right.

    If I were to do it again, I’d try using more tools to help with layout precision—like labeling cards temporarily or using dev tools more effectively—to make adjusting spacing and sizing a little smoother.

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

    The biggest challenge was getting the layout to match the design exactly, especially with spacing, card sizing, and layering. I had to go card by card and tweak things individually, constantly checking against the design reference. The mobile layout also took some trial and error to get it feeling clean without messing up the desktop view. I’m happy with how it turned out overall, but I still wish the desktop view had a slightly more perfect match with the white space and card dimensions.

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

    I’d love feedback on how closely my layout matches the design, especially in the desktop view—some of the white space and card dimensions still feel a bit off to me.

    Also curious:

    When starting a project like this, do people usually focus on mobile-first or desktop-first, or bounce between the two?

    I built this using just HTML and CSS (with a bit of Flexbox and Grid). I also have experience with Bootstrap—what would be a good next step to level up from here?

    Piece-by-piece approach to a responsive Bento Grid layout

    1
    Harsh Kumar•3,270
    @thisisharsh7
    Posted about 23 hours ago

    Great work on the Bento Grid challenge! Your systematic approach to building the layout step-by-step shines through, and using Flexbox and Grid shows a solid grasp of modern CSS.

    • For responsiveness, the mobile view works but feels abrupt due to the single-column switch at 768px. A more gradual approach, like a two-column layout at an intermediate breakpoint (e.g., 900px), could smooth the transition. Mobile-first is often preferred for simpler scaling, but desktop-first works if the design prioritizes desktop. Experiment with both to find what suits your workflow.

    • To level up, explore CSS preprocessors like SASS for better organization or try a framework like Tailwind for rapid styling. For precision, use browser dev tools to inspect pixel-perfect spacing.

    • Challenges like card sizing were well-handled by tweaking individually, but consider CSS calc() for dynamic sizing.

    Overall, a strong submission—focus on refining responsiveness and spacing for polish!

  • Siddharth-esc•10
    @Siddharth-esc
    Submitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    i'm glad that that i have completed this project in a short span of time. one of the things that i will do differently next time is breaking stuff into smaller parts and checking how each item works as per the responsiveness which will save a lot of my time.

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

    there were not any major problems in this challenge, although i faced one will positioning the footer which was malfunctioning.

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

    how to prevent malfunctioning in media queries and also while adding new elements in html.

    cards made using css grid, used flexbox to align items, used media que

    2
    Harsh Kumar•3,270
    @thisisharsh7
    Posted 3 days ago

    Great job completing the challenge!

    Strengths:

    • Clean Design: The gradient backgrounds and card styling are well-executed, matching the design.
    • Clear Structure: The HTML is organized, with distinct sections for the result and summary cards.

    Some suggestions:

    • Media Query Malfunction: The footer (attribution) positioning issues stem from multiple media queries overriding bottom. Consolidate into one media query (e.g., @media (max-width: 640px)) and adjust bottom dynamically (e.g., bottom: calc(-300px - 10vw)) to avoid overlap across screen sizes.
    • Adding New Elements: When adding elements, ensure they respect the existing flex/grid layouts. Test new elements in both desktop and mobile views to avoid breaking responsiveness. Use box-sizing: border-box consistently to prevent padding/margin issues.
    • Accessibility: Add alt text to images (e.g., alt="Reaction icon") for screen readers.
    • CSS Optimization: Use CSS custom properties for colors (e.g., --red: #ff5757) to simplify maintenance.
    • Footer Fix: Move .attribution outside .card-container to avoid layout conflicts.

    Breaking tasks into smaller parts, as you plan, will help! Solid work overall.

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

Mentor of the Week - 1st Place

This badge is awarded to the top placed community member on the weekly Wall of Fame.

Mentor of the Month - 1st Place

This badge is awarded to the top placed community member on the monthly Wall of Fame.

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