Kawsar Ahmed Fahad

Latest comments

• 

  Andres•110

  @AndresJurado117Submitted over 2 years ago

  

  Single Price Grid Component Zach Class with adjustments.

  2

  20
  

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted over 2 years ago

  Hello, Andres Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • You might want to use semantic tags like the <main> to wrap your code, instead of div. like

  <main id="card">
  </main>
  

  This would help improve accessibility.

  • add favicon <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  • add the below styles to the body. It will center everything

  body {
      justify-content: center;
      align-items: center;
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      /* padding: 20px; */
  }
  

  • remove margin: auto; in the #card

  • use modern CSS reset https://piccalil.li/blog/a-modern-css-reset/

  • Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

  I hope it will work. Happy coding.

  Marked as helpful

  1
• 

  Stanley•20

  @dadsec-devSubmitted over 2 years ago

  

  Frontend Mentor - Product preview card component

  #accessibility

  2

  30
  

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted over 2 years ago

  Hello, Stanley Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • You might want to use semantic tags like the <main> to wrap your code, instead of div. like

  <main class="container"></main>
  <footer class="attribution"></footer>
  

  This would help improve accessibility.

  • add the below styles to the body. It will center everything

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

  • Add the below styles to the .container

  .container{
      max-width: 40rem;
      /* margin: 7rem 15rem 9rem 15rem; */
      /* border: 1px solid hsl(30, 38%, 92%); */
  }
  

  Remove all margin

  • Fixed the media issue.

  • Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

  • This is my solution of this challenge live, repo

  I hope it will work. Happy coding.

  Marked as helpful

  0
• 

  Danii•30

  @iDylaanSubmitted over 2 years ago

  

  Responsive Product Previewer Card

  2

  40
  

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted over 2 years ago

  Hello, Danii Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • add the below styles to the body. It will center everything

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

  • @media (min-width: 768px){} not min-width: 1440px this will be more responsive.

  • for HTML Validation error follow this URL https://rocketvalidator.com/html-validation/section-lacks-heading-consider-using-h2-h6-elements-to-add-identifying-headings-to-all-sections

  • Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

  • This is my solution of this challenge live, repo

  I hope it will work. Happy coding.

  0
• 

  Mustafa Anandwala•30

  @Mussu007Submitted over 2 years ago

  

  Product-review-card

  2

  30
  

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted over 2 years ago

  Hello, Mustafa Anandwala Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • You might want to use semantic tags like the <main> to wrap your code, instead of div. like

  <main class="container">
  </main>
  

  This would help improve accessibility.

  • add align-items: center; to the body

  • remove margin from the .container

  • Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

  • This is my solution of this challenge live, repo

  I hope it will work. Happy coding.

  Marked as helpful

  1
• 

  Ikenna Oguejiofor•540

  @ikennarichardSubmitted over 2 years ago

  

  CSS grid, Flexbox, responsive

  2

  40
  

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted over 2 years ago

  Hello, Ikenna Oguejiofor Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • You might want to use semantic tags like the <main> to wrap your code, instead of div. like

  <main class="container">
  </main>
  

  • add alt="image-product-desktop" attribute in img

  This would help improve accessibility.

  • add the below styles to the body. It will center everything

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

  • remove the below styles from .container & .wrapper

  .container{
      /* width: 50vw; */
      /* display: flex; */
  }
  
  .wrapper{
  /*left: 50%;*/
      background: white;
  }
  
  @media (max-width: 550px)
  .wrapper {
      /*margin-top: 20px; */
      /* margin-left: 20px; */
     /*left: 50%;*/
   }
  .product-details {
      width: fit-content;
  }
  }
  

  • Fixed the other HTML Validation error from the report.

  • Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

  • This is my solution of this challenge live, repo

  I hope it will work. Happy coding.

  Marked as helpful

  0
• 

  khaleelulah•350

  @khaleelulahSubmitted over 2 years ago

  

  nft preveiw card component using css flexbox

  1

  30
  

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted over 2 years ago

  Hello, khaleelulah Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • You might want to use semantic tags like the <main> to wrap your code, instead of div. like

  <main class="main-container">
  </main>
  

  This would help improve accessibility.

  • active-state of img

  <a class="image" href="#">
          <img src="./assets/images/image-equilibrium.jpg" alt="Equilibrium image" />
  </a>
  

  • hover effect

  .image {
  	position: relative;
  	display: block;
  	height: 320px;
  	overflow: hidden;
  	border-radius: .7rem;
  }
  
  .image::before {
  	content: '';
  	position: absolute;
  	top: 0;
  	left: 0;
  	z-index: 100;
  	width: 100%;
  	height: 100%;
  	opacity: 0;
  	transform: scale(0);
  	background-color: transparentize(hsl(178, 100%, 50%), 0.5);
  	transition: transform 0.4s ease-in-out, opacity 0.3s;
  }
  
  .image:hover::before {
  	opacity: 1;
  	transform: scale(1);
  }
  
  .image::after {
  	content: url(../../images/icon-view.svg);
  	position: absolute;
  	top: 0;
  	left: 0;
  	z-index: 100;
  	width: 100%;
  	height: 100%;
  	opacity: 0;
  	transition: opacity 0.2s ease-in 0.1s;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  }
  
  .image:hover::after {
  	opacity: 1;
  }
  
  

  • for HTML validation error of img please visit below links

  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img, https://www.w3schools.com/tags/att_img_width.asp

  • fix the other Accessibility issue from the report.

  • Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

  • this is my solution of this challenge live,repo

  I hope it will work. Happy coding.

  Marked as helpful

  0