Alamin

Latest comments

• 

  Eric Anderson•140

  @shinhosuckSubmitted about 1 year ago

  

  Grid, Flex-box, Javascript

  1

  60
  

  Alamin•1,980

  @CodeWithAlaminPosted about 1 year ago

  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! 😊❤️

  0
• 

  Somadina Amuchie•180

  @gHoSTeCHsSubmitted over 1 year ago

  

  Rest country api with theme switcher

  1

  30
  

  Alamin•1,980

  @CodeWithAlaminPosted over 1 year ago

  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! 👍

  2
• 

  Abiel•180

  @arr199Submitted over 1 year ago

  

  Countries API

  #react#tailwind-css#typescript#react-router

  1

  40
  

  Alamin•1,980

  @CodeWithAlaminPosted over 1 year ago

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

  1
• 

  DanPhojanakong•20

  @phojojoSubmitted almost 2 years ago

  

  Order summary component solution using HTML and CSS

  1

  40
  

  Alamin•1,980

  @CodeWithAlaminPosted almost 2 years ago

  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

  0
• 

  Ana Gonçalves•40

  @anacatarinafgSubmitted almost 2 years ago

  

  Product review with SASS

  #sass/scss

  1

  40
  

  Alamin•1,980

  @CodeWithAlaminPosted almost 2 years ago

  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!! 😊❤️

  0
• 

  tizerk•240

  @tizerkSubmitted over 2 years ago

  

  QR Code Component using Vanilla HTML and CSS

  2

  40
  

  Alamin•1,980

  @CodeWithAlaminPosted over 2 years ago

  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! 😊❤️

  0