Skip to content
OverviewSolutions
35
Comments
31

Ranit Manik

@RanitManikMecheda, West Bengal, India880 points

Studying Computer Science. Passionate Developer, Creative Designer - Crafting Digital Excellence

I’m currently learning...

DSA, NodeJS

Latest solutions

View more solutions

Latest comments

  • Ranit Manik•880
    @RanitManik

    To enhance the card design challenge implementation, please address the following points:

    1. Card Shadow on Hover: Ensure that the shadow of the card grows on hover as specified. You can refer to the active state file in your project's design directory for reference.

    2. Unit Choice for Styling: Use rem instead of px for properties like width, height, margin, padding, and font-size to achieve better scalability and responsiveness. For instance, the following CSS demonstrates how to use rem units effectively:

      /* Use rem for Better Scalability */
.container {
    font-size: 1rem; /* Equivalent to 16px */
    width: 57.4375rem; /* Equivalent to 919px */
    height: 31.3125rem; /* Equivalent to 501px */
}

    Hope it helps

    Marked as helpful
  • Ranit Manik•880
    @RanitManik

    Here are some suggestions from me:

    • Specify Image Dimensions:

      • Always set both the height and width attributes for images. This practice ensures that the space required for the image is reserved when the page loads, preventing layout shifts. Your initial page is currently experiencing layout shifts because these attributes are not specified. For more details, refer to this article.

    • If you think this comment is helpful you can mark it as helpful

  • Ranit Manik•880
    @RanitManik

    Congratulations on completing the challenge! Here is my feedback for you:

    • Centering the Container: Avoid using position: absolute for centering elements. Instead, use a more effective method by applying min-height: 100vh; to the body and display: grid; place-items: center; to center the .container. This ensures better responsiveness and alignment.

      body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

    • Unit Choice for Styling

      • Opt for using rem instead of px or em for properties like width, height, margin, padding, and font-size. This choice ensures better scalability and responsiveness. Detailed information can be found in this article.
      /* Use rem for Better Scalability */
.container {
  width: 57.4375rem; /* Equivalent to 919px */
  height: 31.3125rem; /* Equivalent to 501px */
 font-size: 1rem; /* Equivalent to 16px */
}

    If you find this comment helpful please mark it as helpful

    Marked as helpful
  • Ranit Manik•880
    @RanitManik

    Congratulations on finishing this challenge! I have reviewed your code and here are a few suggestions for improvement:

    1. Centering the Container

      • Instead of using margin on .container to center it vertically, a more effective method is to use min-height: 100vh; on the body and display: grid; place-items: center; to center .container. This approach ensures better responsiveness and alignment.
      body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

    2. Wrong use of Buttons

      • Avoid using buttons for the learning tag. Even though it looks like a button, it's not a button. If you use a button, the browser will consider it as a button and you may encounter accessibility problems later on. You can wrap that into a div element.

    3. Card Shadow on Hover

      • In the card design challenge, it was stated that the shadow of the card should grow on hover. This is missing in your implementation. Observe the active state file in your design directory of the project and implement the hover effect.
      .card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}

    I hope you find my feedback helpful. Please mark it as helpful if you do!

    Marked as helpful
  • Ranit Manik•880
    @RanitManik

    Congratulations on finishing this challenge! I have reviewed your code and here are a few suggestions for improvement:

    1. Semantic HTML5 Elements

      • Consider using more semantic elements (landmarks) like <main>, <article>, and <header> to improve the structure and readability of your HTML. All content should be contained within landmarks. Every page should minimally have a <main> element. You can find more information about this here.

    2. Font Loading Optimization

      • Avoid using @import in CSS for font loading. Instead, directly link the fonts in the HTML file to enhance website performance. This method is explained in this article. Here’s an example:
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100..900&family=Lexend+Deca:wght@100..900&display=swap">

    3. Unit Choice for Styling

      • Opt for using rem instead of px for properties like width, height, margin, padding, and font-size. This choice ensures better scalability and responsiveness. Detailed information can be found in this article.
      /* Use rem for Better Scalability */
.container {
  width: 57.4375rem; /* Equivalent to 919px */
  height: 31.3125rem; /* Equivalent to 501px */
}

    4. Cursor Pointer for Buttons

      • Always use the cursor: pointer; property for buttons to improve the user experience.
      button {
  cursor: pointer;
}

    I hope you find my feedback helpful. Please mark it as helpful if you do!

    Marked as helpful
  • Dipesh•430
    @Dipesh-sapkota1
    What challenges did you encounter, and how did you overcome them?

    Customizing default behavior of form

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

    I want to improve responsiveness of overall site.

    responsive newsletter form using flex-box

    1
    Ranit Manik•880
    @RanitManik

    Your solution looks legitimate. I have reviewed your code, and here are some suggestions from me:

    1. Specify Image Dimensions:

      • Always set both the height and width attributes for images. This practice ensures that the space required for the image is reserved when the page loads, preventing layout shifts. Your success page is currently experiencing layout shifts because these attributes are not specified. For more details, refer to this article.

    2. Display User Email:

      • On the success page, ensure you display the user's previously input email. Currently, the email shown is always ash@loremcompany.com, which is incorrect.

    3. Alt Text for Images:

      • Avoid using alt text for non-decorative images. In this challenge, all images are non-decorative, so you should leave the alt attribute blank, like this: <img src="./assets/image.jpg" alt="">. For more information on this best practice, watch this video.
    • I hope you find my feedback helpful. Please mark it as helpful if you do.
    Marked as helpful
View more comments