Skip to content
OverviewSolutions
46
Comments
96

Alamin

@CodeWithAlaminDhaka, Bangladesh1,980 points

Front-end developer with a focus on delivering beautiful and intuitive interfaces. Committed to attention to detail and constant growth. Excited for the opportunities on Frontend Mentor!

I’m currently learning...

NextJs and also mastering my TypeScript skills.

Latest solutions

View more solutions

Latest comments

  • Alamin•1,980
    @CodeWithAlamin

    Hi @shinhosuck,

    Overall, you did a great job! The website looks great. However, I have a few suggestions for you.

    You should use anchor tags <a> instead of div where a user expects to click.
    Example before:

    <div class="hero-contents">
    <div class="hero-content">
    <h3 class="hero-content-title">Hydrogen VS Electric Cars</h3>
    <p class="hero-content-paragraph">Will hydrogen-fueled cars ever catch up to EVs?</p>
</div>

    Example after:

    <a href="#" class="hero-contents">
    <div class="hero-content">
    <h3 class="hero-content-title">Hydrogen VS Electric Cars</h3>
    <p class="hero-content-paragraph">Will hydrogen-fueled cars ever catch up to EVs?</p>
</a>

    Overall, this is a very well-done solution to the challenge. Great job!

    Hope my suggestions were Helpful! 👍

    Keep up the good work! 😊❤️

  • Alamin•1,980
    @CodeWithAlamin

    Hi Somadina Amuchie,

    Overall, I'm really impressed with your work! The website looks great. However, I did find a few bugs that I thought I'd mention:

    • When filtering by region and then searching for a country, the search results do not filter to the selected region. Instead, all countries are returned.
    • After searching for a query and opening a country's details, clicking the back button to return to the search results prevents other countries from opening.
    • There is no loading indicator to show the user that the website is working in the background.
    • When opening a country's details, the border countries are not shown.

    Overall, I think the site is very close to completion. Fixing the above-mentioned bugs would put your JavaScript skills to the challenge, but I'm confident that you can do it! 👍

  • Abiel•180
    @arr199

    Countries API

    #react#tailwind-css#typescript#react-router
    1
    Alamin•1,980
    @CodeWithAlamin

    Nicely done. I tested on my mobile and found some performance issues. Other than that, it's nice 👍

  • Alamin•1,980
    @CodeWithAlamin

    Hi! Congratulations on completing the challenge! I have reviewed your code and overall it looks good, but I noticed a few areas that could be improved. Here are my suggestions:

    • In your CSS file, you are using position: absolute and z-index: -1 to position the background image behind the text. This is not the best approach as it can cause issues with the layout of your page, especially on smaller screens. Instead, consider using a background property like background-image or background-color to achieve the same effect.

    • In some places, you have used an asterisk * selector to apply default styles to all elements. While this can be useful in some cases, it is generally better to be more specific with your selectors. For example, instead of using * { margin: 0; padding: 0; box-sizing: border-box; }, you could use html, body { margin: 0; padding: 0; box-sizing: border-box; } to apply these styles only to the html and body elements.

    • Finally, I noticed that some of your class names are not very descriptive, like btn-primary and btn-secondary. It's always a good practice to use descriptive class names that clearly indicate the purpose of the element they are applied to. This can make your code easier to understand and maintain in the long run.

    I hope these suggestions are helpful to you as you continue to develop your skills. Keep up the good work!

    Marked as helpful
  • Alamin•1,980
    @CodeWithAlamin

    Hi Ana Gonçalves 👋 Great job on completing this challenge! 🥳 Your layout looks great.

    Here are a few suggestions to further improve your code:

    • Consider using more specific CSS selectors to avoid potential conflicts with other elements on the page. For example, instead of .card__leftSide .card__image, you could use .card__image--left and .card__image--right, or simply .card__image--left and .card__image--right.

    • Consider using CSS variables to define and manage colors, fonts, and other common styles. This will help ensure consistency across your site and make it easier to make changes later on

    • Make sure to follow consistent naming conventions for your classes and IDs. For example, in your main element you have a .card class, but outside of main you also have a .card class. This could lead to confusion or unexpected behavior in your CSS. Consider using more descriptive names like .product-card or .pricing-card instead.

    Hope I'm Helpful! 👍

    Keep up the good work and happy coding!! 😊❤️

  • Alamin•1,980
    @CodeWithAlamin

    Hi tizerk👋 Great job on completing this challenge! 🥳

    I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.

    • The .card-container class has a fixed width of 92% and a fixed height of 88%. This could cause issues with responsiveness on different screen sizes. Instead, it could be improved by using a more flexible layout such as using max-width and max-height with a percentage value, or using CSS Grid or Flexbox layout.
        .card-container {
        max-width: 80%;
        max-height: 80%;
        margin: 0 auto;
        border-radius: 10px;
    }
    • The .cart-btn class has a fixed padding value of 0.875rem for both the top and bottom. This could cause issues with responsiveness on different screen sizes. Instead, it could be improved by using a more flexible layout such as using padding with a percentage value.
        .cart-btn {
        padding: 1% 0%;
    }

    Overall, this is a very well done solution to the challenge. Great job!

    Hope I'm Helpful! 👍

    Keep up the good work! 😊❤️

View more comments