Skip to content
OverviewSolutions
17
Comments
603

hitmorecode

@hitmorecode7,380 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

View more solutions

Latest comments

  • Ishan Ahmad•130
    @ishanah09
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how clean and responsive the layout turned out. I managed to closely match the original design from the challenge, while using semantic HTML, scalable CSS variables, and well-organized styles. The responsiveness and background image swap between desktop and mobile views were particularly satisfying to get right.

    Next time, I would:

    Use a mobile-first approach from the beginning to simplify responsive logic.

    Consider using CSS Grid alongside Flexbox for more control over the layout structure.

    Add transition effects for smoother button interactions and maybe animate the image or price reveal for a more engaging user experience.

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

    Responsive Image Swap: The image wasn't appearing correctly on mobile at first. I realized this was due to inappropriate width and height settings after changing flex-direction to column. I fixed it by setting the image width to 100% and adding a specific height.

    Maintaining Visual Consistency Across Viewports: It was a challenge to keep padding, font sizes, and spacing looking balanced on both small and large screens. I used relative units and media queries to fine-tune the design.

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

    Accessibility: I’d like to learn more about how to make these types of cards more accessible beyond just alt text — maybe using aria attributes or better semantic markup.

    Performance: Tips on optimizing asset loading (like background images) for better performance on mobile would be helpful.

    Scalability: How to structure the CSS or use a CSS framework/component library without bloating the code.

    Responsive Product Preview Card

    1
    hitmorecode•7,380
    @hitmorecode

    Congratulations well done. It looks really good. Just a few tips

    • Make it a habit writing semantic html.
    • You could use the <del>$169.99</del> tag instead of the <span>$169.99</span> to strike the price.
    • For the images, you could use the <picture> element.
    • The text Perfume inside a div, don't do that. Use a <p> tag instead.
    • Don't add font-family inside the CSS reset, place it on the body instead.
    • You don't have to add width: 100%; on the body. By default the body width is always 100%. You only add width on the body on special occasions. If you want to have a horizontal scroll on the page for some reason.
    • Why did you add padding: 2rem 1rem; on the body? This is not necessary.
    • When you have a tag with a class, you can target that class directly, you don't have to go through multiple levels.
    main .text-content .price {
  color: var(--Green-500);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 1rem;
}

    You can do it like this

    .price {
  color: var(--Green-500);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 1rem;
}

    I hope you find this helpful. Keep it up 👍

  • hitmorecode•7,380
    @hitmorecode

    Congratulations well done. Looks good. Just a few tips, because your html and CSS is a bit messy.

    • Start using semantic html, avoid using divs.
    • The <h2> for the title change it to <h1>. A webpage must have one <h1> (just one).
    • You forgot the border radius on the hover overlay.
    • You could have done something like this with semantic html.
    <body>
  <main>
    <section>
      <img src="" alt="">
    </section>
    <section>
      <article>
        <h1></h1>
        <p></p>
        <section>
          <article>
            <img src="" alt="">
            <p></p>
          </article>
          <article>
            <img src="" alt="">
            <p></p>
          </article>
        </section>
      </article>
    </section>
    <footer>
      <img src="" alt="">
      <p><span></span></p>
    </footer>
  </main>
</body>
    • The trick is to try to get the job done with the least amount of CSS possible and always avoid repeating yourself.
    • You have two .aside-list combine them into one.
    .aside-list {
    color: hsl(178, 100%, 50%);
    font-weight: 500;
    font-size: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid hsl(215, 32%, 27%);
    padding-bottom: 1rem;
}

.aside-list {
    list-style: none;
    display: flex;
}
    • Here you want to target .icon-view and you are doing so by going through three different layers. When an element has a class, you can just target that specific class.
    .div-container .div-setcion-article .icon-view {
    position: absolute;
    top: 0;
    background-color: hsla(178, 100%, 50%, 0.533);
    width: 21rem;
    height: 21rem;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

    You could have done this

    .icon-view {
    position: absolute;
    top: 0;
    background-color: hsla(178, 100%, 50%, 0.533);
    width: 21rem;
    height: 21rem;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

    I hope you find this helpful. Keep it going 👍 through practice you will learn 😁

  • hitmorecode•7,380
    @hitmorecode

    Congratulations looks nice. Just a few tips.

    • Add this CSS rule on the body to fix the background image.
    background-repeat: no-repeat;
background-size: contain;
    • Try to avoid using divs and think more about semantic html

    I hope you find this helpful. Keep it up 👍

    Marked as helpful
  • Samuel Silva Filho•10
    @samuelsfilho
    What are you most proud of, and what would you do differently next time?

    foi dificil entender porque algumas funcionalidades não pegavam as divs. e lembrar as propriedades.

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

    para deixar código mais limpo, usei muito margin para ambos os lados.

    Card Front end Mentor

    1
    hitmorecode•7,380
    @hitmorecode

    Nice well done. I took a look at your html, css and your github page and these are the things that you can fix.

    • You need to organize your github better.
    • There is a <h1> in the webpage, but this <h1> is nowhere to be found in the html.
    • Compare the design file with your file again you will see that there is a big difference.
    • You don't have to create separated CSS files for every rule. Combine all CSS files into one file.
    • Start setting CSS rules on the body first.
    body {
   min-height: 100vh;
   font-family: "set the font family";
   backgroud-color: "set the background color";
   // in this case you want to place the card in the center of the page. Use flexbox or CSS grid to do so. I'll show you with flexbox.
   display: flex;
   justify-content: center;
   align-items: center;
}
    • If you set the font family on the body, you don't have to repeat it every time. Once in the body it will apply for the entire page.
    • You forgot to add the hover effect on the card.
    • Next time make it a habit of using semantic html.

    I hope you find this helpful. If you have any questions let me know. Keep it up 👍

    Marked as helpful
  • Siyam Ahmed•60
    @Siyam1888
    What are you most proud of, and what would you do differently next time?

    I am happy that I could use some modern responsive css techniques with grid, RAM(Repeat, Autofit, Minmax) and make use of clamp to make the fonts responsive. However, I am yet to get a strong hold of these features and I have a long way to go on the path of building responsive web designs. Nex time I would like to achieve the same features with flexbox or with more efficient grid techniques. k

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

    As I was new to grid, I faced some difficulty in preparing the layout. Howeve, a simple google search made my life easier.

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

    It would be really helpful if you suggest me some more efficient ways to build the same layout and more suggestions on design principles. Thanks in advance.

    Responsive Four Card Feature Section with CSS Grid

    2
    hitmorecode•7,380
    @hitmorecode

    Nice well done. Just a few tips

    • For the coming challenges make it a habit writing semantic html.
    • Add a min-height on the body
    • For the border on top of the card, don't user border-top, make use of pseudo elements and style it to make it look like the design file.

    I hope you find this helpful. Keep it up 👍

  • hitmorecode•7,380
    @hitmorecode

    Well done good try. As you can see your page does not look like the design page. To place the cards like the design page, you can use position or you can use CSS grid. As for the border on top of the cards, don't use border-top use the before pseudo element and style it to make it look like the design file.

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      } 

      main {
        display: grid;
        grid-template-rows: repeat(4, 100px);
        grid-template-columns: repeat(3, 300px);
        grid-gap: 10px;
      } 

      .feature-card {
        width: 300px;
        height: 200px;
        border: 1px solid black;
      }

      .supervisor {
        grid-row-start: 2;
        grid-row-end: 4;
      }

      .team-builder {
        grid-column-start: 2;
        grid-column-end: 3;
      }

      .calculator {
        grid-row-start: 2;
        grid-row-end: 4;
        grid-column-start: 3;
        grid-column-end: 4;
      }

      .karma {
        grid-row-start: 3;
        grid-row-end: 5;
        grid-column-start: 2;
        grid-column-end: 3;
      }

    You can do something like this to create a layout that matches the design file.

    I hope this was helpful. If you have any questions regarding this, please feel free to ask. Keep it up 👍

View more comments