Skip to content
OverviewSolutions
35
Comments
31
Ranit Manik
@RanitManik

All 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
  • eatwanderexplore•40
    @eatwanderexplore
    What are you most proud of, and what would you do differently next time?

    Being able to change the size/placement/order of each element is very satisfying.

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

    I didn't realize the category tag on the blog preview card was a button at first so I had trouble trying to make the padding match the design. Once I realized it was a button it made it a lot easier.

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

    I'm not sure how to use the figma files to help me with these projects.

    Static Blog preview card using HTML and CSS

    1
    Ranit Manik•880
    @RanitManik

    Congratculations on completing this challenge. Here are couple of suggestions for improvement:

    • Shadow Effect on Hover

    The shadow should grow when hover over the blog card. observe at the active state design closely. To make the shadow grow when hovering over the blog card, you can use the :hover pseudo-class in CSS. Here's an example:

    .blog-card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.blog-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

    This will create a smooth transition effect where the shadow grows when you hover over the card.

    • Explicitly Mention Font-Size Property

    would strongly recommend you to explicitly mention the font-size property. It's important to set a base font-size to ensure consistency across different screen sizes. Here’s how you can do it:

    body {
  font-size: 16px; /* Adjust this value as needed */
  line-height: 1.6;
  font-family: 'YourFontFamily', sans-serif;
}

h1 {
  font-size: 2em; /* Example for heading */
}

p {
  font-size: 1em; /* Example for paragraph */
}

    Adjust the font-size property according to your design needs to ensure readability on larger screens.

    • Centering the Container

    Don't use position properties to center a item like that. Instead use the conventional and more effective one. Using CSS Grid for centering elements is a modern and efficient approach. Here's how you can update your CSS:

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

.container {
  /* Your container styles */
}

    This method ensures that the container is centered both vertically and horizontally within the viewport.

    • I hope you find these suggestions helpful for improving your site's design and functionality. Feel free to reach out if you have any questions or need further assistance!
    Marked as helpful
  • Ranit Manik•880
    @RanitManik

    Congratulations on your first solution! 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;
}

      Because you used the position property, the website overflows on mobile screens as you had to explicitly specify the width and height of the main item. For better reference, you can check out my solution code.

    I hope you find these suggestions helpful for improving your site's design and functionality. Feel free to reach out if you have any questions or need further assistance!

    Marked as helpful
  • Ranit Manik•880
    @RanitManik

    The font size is immensly big for bigger screens like laptops

    Marked as helpful
  • Ahmed•80
    @Ahmed-l2
    What are you most proud of, and what would you do differently next time?

    I'm proud of learning how to properly handle displaying your page with different screen sizes which I was totally unfamiliar with before I had started this project.

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

    This project was a bit time consuming because it had a bunch of details that needed attention to get correct. And another challenge was how to get the page to display properly on mobile devices. This was new to me and figuring it out was an accomplishment.

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

    I would appreciate any feedback, especially on the mobile preview of the page.

    Recipe page using HTML/CSS

    1
    Ranit Manik•880
    @RanitManik

    • 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, as detailed in this article.

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

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

    Marked as helpful
  • Ranit Manik•880
    @RanitManik
     <div id="social-links">
        <button class="link">GitHub</button>
        <button class="link">Frontend Mentor</button>
        <button class="link">LinkedIn</button>
        <button class="link">Twitter</button>
        <button class="link">Instagram</button>
      </div>

    To improve the HTML structure for social links using <ul>, <li>, and <a> tags, here's how you can refactor it:

    <ul id="social-links">
  <li><a href="">GitHub</a></li>
  <li><a href="">Frontend Mentor</a></li>
  <li><a href="">LinkedIn</a></li>
  <li><a href="">Twitter</a></li>
  <li><a href="">Instagram</a></li>
</ul>
  • Ayuba Kwasako Danburam•60
    @Kwasako
    What are you most proud of, and what would you do differently next time?

    Despite having no access to the Figma design I was able to implement the design with a very high accuracy.

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

    The challenge I encountered was getting my measurements and font size because I had no access to the Figma design. I overcame it by trying several values and font sizes.

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

    I think I am good

    Social Links Profile

    1
    Ranit Manik•880
    @RanitManik

    Hey there! I noticed a few issues while reviewing your site:

    1. Image Aspect Ratio: You've set explicit width and height for images, which is great for consistency. However, this causes the images to stretch unnaturally. Consider using object-fit: cover; for images to maintain their aspect ratio while filling the container appropriately.

      img {
  object-fit: cover;
}

    2. Centering the Container: Instead of using margin-top on .container to center it vertically, a more effective method is to use min-height: 100vh; on 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;
}

    3. Active State for Links: When hovering over links, the background color changes, but the text color remains unchanged. Ensure that the text color also adjusts in the active state to maintain consistency and improve usability.

      a:hover {
  background-color: /* your hover color */;
  color: /* adjust text color for readability */;
}

    I hope you find these suggestions helpful for improving your site's design and functionality. Feel free to reach out if you have any questions or need further assistance!

    Marked as helpful
  • Ranit Manik•880
    @RanitManik
    • Never ever set the horizontal width to 100vw. By default, it will take up the full width in your case. The issue with the CSS code .container { min-width: 100vw; } is that it establishes the minimum width of the container as 100 viewport widths (vw). This implies that the container will always be at least as wide as the entire viewport, which could lead to horizontal scrolling or unintended layout problems, particularly on smaller screens or when the content inside the container needs less space than the viewport width. Therefore, I recommend removing this line of CSS.

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

    Marked as helpful
  • Ranit Manik•880
    @RanitManik

    The font size appears too small; please ensure it's legible.

    Give the page a proper title for better context.

    Consider using radio buttons for query options to enhance usability.

    Ensure JavaScript code handles invalid states and provides feedback for the submit button.

    Please closely follow the design files for accurate implementation.

    Marked as helpful
  • Ranit Manik•880
    @RanitManik

    First of all, congratulations on completing your first frontend challenge here on Frontend Mentor! Everything looks great. Here are some suggestions from me:

    • Font Loading Optimization: Avoid using @import in CSS for font loading. Instead, directly link the fonts in the HTML file to enhance website performance, as explained in this article.

      <!-- Link Fonts in HTML -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100..900&family=Lexend+Deca:wght@100..900&display=swap">

    • 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, as detailed in this article.

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

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

    Marked as helpful
  • Ranit Manik•880
    @RanitManik

    I suggest using a minimum font size of 16px or 1rem for paragraphs as they are currently barely visible.

  • P
    Tuna Erten•430
    @tunaerten
    What are you most proud of, and what would you do differently next time?

    I downloaded the Figma files and used Figma for the first time. I didn't use Figma in my first project, but I found it very useful and will use it in all my projects from now on. Edit: I made some changes. When I first completed the project, I hadn't noticed the hover effect. First, I added that, and second, I placed the cursor from the Figma file. (Thanks to @SaruMakes for the tip.)

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

    I had the most difficulty making the cursor pointer have a black and white border. I struggled with this for a long time. It took me a considerable amount of time because I searched extensively on the internet for a solution to color the cursor pointer but found none. As a result, I ended up using an icon instead. I learned that a URL could be added to the cursor, which also took me a long time to figure out.

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

    If there is a way to color the cursor, please show it to me. I would be very happy.

    Blog Preview Card with css custom properties and media queries

    3
    Ranit Manik•880
    @RanitManik

    The shadow should grow when hovered.

    • Observe closely at the active states design file.
    Marked as helpful
  • Ranit Manik•880
    @RanitManik

    Everything looks great. However, the background image is not displaying because the path was entered incorrectly:

    .content {
    background-image: url("./images/bg-intro-desktop.png");
}
    Marked as helpful