Gift Richard

Latest comments

• 

  Copper2•410

  @long-1810

  Submitted over 1 year ago

  

  Product card component

  2

  40
  

  Gift Richard•520

  @fibonacci001

  Posted over 1 year ago

  Hi there 👋

  Great job on this coding challenge! Your product preview card is looking good overall. Below are some suggestions that can help refine it further.

  HTML 🏷️ Use <button> for "Add to Cart" instead of <div> for accessibility Wrap all content in a <main> element CSS 🎨 Apply box-sizing: border-box so padding doesn't affect width/height Favor classes over IDs for styling elements Avoid fixed heights so it adapts to different screens Use rem/em units rather than vw for font-size consistency Make columns equal width with width: 50% Image Issue 🖼️ You asked about the image being buggy - a couple things to check:

  Make sure the image file path is correct Double check the background-size property is set correctly Use a responsive max-width: 100% on the image container Example Code 💻

  html
  
  
  
  <main>
  
    <!-- card content -->  
  
    <button class="add-cart">Add to Cart 🛒</button>
  
  </main>
  

  css
  
  Copy code
  
  .add-cart {
    cursor: pointer;
  }
  
  .col {
    width: 50%;
  }
  

  Let me know if this helps address your question about the image!.Just Keep up the great coding!, 🚀 practice makes perfect 😊

  0
• 

  NaQu•570

  @NaQu2003

  Submitted over 1 year ago

  

  Animated fylo data storage component

  1

  70
  

  Gift Richard•520

  @fibonacci001

  Posted over 1 year ago

  Hey there! 👋

  You did an awesome job on this data storage component challenge. The overall layout and styling look great! I just have a few friendly suggestions that could help take it to the next level:

  🌟 For accessibility, the <div> with id="cart" should be a <button> element instead. That way screen readers can identify it as a clickable button. Don't forget to add cursor: pointer to show the hand icon on hover.

  🌟 I noticed the <main> tag only wraps part of the content. Try wrapping the entire component in <main> so assistive technologies can identify the main content correctly.

  🌟 Box-sizing: border-box is your best friend! It makes width/height include padding and borders. No more math headaches 😅. Check it out here.

  🌟 Classes over IDs can help avoid specificity issues down the road. IDs are best for JS hooks.

  🌟 Avoid fixed heights, let the content determine the height for responsiveness.

  🌟 Rem/em units > vw units for font-size. More consistent across devices.

  🌟 For two equal Flex columns, width: 50% on both works like a charm!

  I hope these tips help take your skills to the next level! Your solution is looking awesome, and most importantly, keep enjoying the process. Coding is fun, creative, and empowering. Wishing you the best on your next project! 🚀

  1

  Marked as helpful
• 

  Ashwani Pandey•180

  @ashwanipydev

  Submitted almost 2 years ago

  

  Frontend Mentor - Product preview card component solution

  2

  30
  

  Gift Richard•520

  @fibonacci001

  Posted almost 2 years ago

  hi! Pandey, Your code is functional and interactive. Good job on using the data-icon attribute and the ::before pseudo-element to create a custom button with an icon.👍 There are some minor areas where you can improve the code, here is an example:

  .product__price {
  font-size: 2rem;
  }
  
  .flex-group {
  gap: 1rem;
  }
  

  Overall, your code is well-written and meets the design specifications. I hope you find my feedback helpful.

  0

  Marked as helpful
• 

  P

  Abdirahim Ali Mahamoud•380

  @asad102

  Submitted almost 2 years ago

  

  Designing FAQ Section Using TailwindCSS Accordion

  #tailwind-css

  1

  30
  

  Gift Richard•520

  @fibonacci001

  Posted almost 2 years ago

  hi! Ali, your code is really responsive and adapts to different screen sizes. Good job on using TailwindCSS to create a mobile-first design and using media queries to adjust the layout for larger screens.👍 The code is also functional and interactive. Good job on using the native HTML <details> and <summary> elements to create an accordion effect for the FAQ section.👍 But There are some minor areas where you can improve the code:

  You can add some alt attributes to your <img> tags to provide alternative text for screen readers and users who have images disabled. For example, you can add an alt attribute like this:

  <img src="./img/illustration-box-desktop.svg" alt="A purple box with a woman's head popping out" class="hidden md:block">
  

  You can also use relative units such as rem or em instead of absolute units such as px for font sizes, margins, paddings, etc. This will make your website more responsive and adaptable to different user preferences and browser settings. just like this example here, you can use rem units like this:

  .text-xl {
  font-size: 1.5rem;
  }
  
  .mt-15 {
  margin-top: 3.75rem;
  }
  

  Overall, your code is truely well-written and meets the design specifications. I hope you find my feedback helpful and constructive.😊

  0
• 

  Austine Gomez•660

  @agomez99

  Submitted almost 2 years ago

  

  Base Apparel coming soon page

  #bulma

  1

  30
  

  Gift Richard•520

  @fibonacci001

  Posted almost 2 years ago

  hi Austine, your code is well-formatted and easy to read. Good job on using consistent indentation, spacing, and naming conventions.👍 The isValidEmailFormat function is simple and clear, but it has a redundant check for the email address. The emailRegex.test(emailAddress) method will return false if the emailAddress is an empty string, so there is no need to add the Boolean(emailAddress) check. You can simplify the function to: function isValidEmailFormat(emailAddress) { return emailRegex.test(emailAddress); } You are also using the document.getElementById method multiple times to access the same elements. This is inefficient and repetitive. You could just store the elements in variables outside the function and reuse them inside the function. just like this:

  const errorDisplay = document.getElementById("error-display");
  const successDisplay = document.getElementById("success-display");
  const errorIcon = document.getElementById("error-icon");
  
  function signUp() {
  // use the variables instead of calling document.getElementById again
  const email = emailInput.value;
  // ...
  }
  

  2
• 

  trung tran•80

  @Meowmeow11120

  Submitted over 2 years ago

  

  Product preview card component

  1

  10
  

  Gift Richard•520

  @fibonacci001

  Posted over 2 years ago

  hi, @Meowmeow11120 congrats on completing your tasks, about the question you asked, i have some advice for you. There are a few different ways to create a box that can hold images and content without having to set the width to be half the width of the container. Here are a few options:

  1. Use the "display: flex" property on the container element, and set the "flex-wrap" property to "wrap". This will allow the items inside the container to automatically wrap to the next line if there isn't enough horizontal space. Here's an example CSS: .container { display: flex; flex-wrap: wrap; }
  2. Use the "max-width" property instead of the "width" property on the container element. This will allow the container to shrink to the size of its contents, but won't expand beyond the maximum width specified. Here's an example CSS: .container { max-width: 800px; /* set your desired maximum width */ }
  3. Use the "inline-block" display property on the items inside the container, and set the "vertical-align" property to "top". This will allow the items to stack vertically, and the container will automatically adjust to the height of the tallest item. Here's an example CSS: .item { display: inline-block; vertical-align: top; } i hope you find them useful on your next tasks

  0