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

Code-S1

@Code-S1210 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

  • Huddle landing page


    Code-S1•210
    Submitted 5 months ago

    0 comments
  • Select a number


    Code-S1•210
    Submitted 5 months ago

    JAVASCRIPT


    0 comments
  • Responsive company subscription page


    Code-S1•210
    Submitted 5 months ago

    JavaScript definitely and how to plan the planning


    0 comments
  • A simple page


    Code-S1•210
    Submitted 6 months ago

    Definitely the hovering part


    1 comment
  • Stats preview card


    Code-S1•210
    Submitted 9 months ago

    0 comments
  • Result summary component


    Code-S1•210
    Submitted 9 months ago

    I need help in javascript


    0 comments
View more solutions

Latest comments

  • CJuno23•50
    @CJuno23
    Submitted 9 months ago

    Result summary component main

    2
    Code-S1•210
    @Code-S1
    Posted 9 months ago

    check out this article https://fedmentor.dev/posts/font-size-px/ to see the right sizing units and your width is too low on the .result you just need to increase it and just give padding on the .radius

  • Sainadh7731•40
    @Sainadh7731
    Submitted 9 months ago

    result card

    1
    Code-S1•210
    @Code-S1
    Posted 9 months ago

    its not responsive, and you havent even tried to make it as a responsive page,also there is no box shadow

  • Nico•660
    @yeldynov
    Submitted 9 months ago

    Bento Grid made in Tailwind CSS

    1
    Code-S1•210
    @Code-S1
    Posted 9 months ago

    You should add one more break point for the middle screens (ipads) as it is not responsive on middle sccreens

  • justine1607•140
    @justine1607
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I was amaze by using the css grid, especially the grid-template-area, in where you will just directly add the item without specifying grid column or row anymore, it less code and makes it clean. next time I should do separate the css of the body from the components.

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

    the challenges that I encountered, was in the row part of the grid because whenever i add max-height to the 2 cards in the middle there is this empty space that is so annoying, and what i did was I add some grid-template-rows and define its row so i wont get this empty whitespace at the bottom of my 2 middle cards anymore, but I'm open for suggestion of the pro's on how to handle like this situation because for me, on what I just did I think I just add some bandage to that problem that it's really not the solution for that.

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

    the specific areas that i would like help is on the grid-column that has an empty space.

    bento css grid responsive

    1
    Code-S1•210
    @Code-S1
    Posted 9 months ago

    Overusing <div> tags, known as "divitis," leads to cluttered code, poor semantics, and reduced performance. Instead, use appropriate semantic elements (like <header>, <section>, etc.) to improve readability, accessibility, and SEO. Keep HTML clean and minimal to ensure maintainability, scalability, and better CSS structure.

    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