Skip to content
OverviewSolutions
19
Comments
10
Gift Richard
@fibonacci001

All comments

  • Gift Richard•520
    @fibonacci001Posted about 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
  • Gift Richard•520
    @fibonacci001Posted about 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! 🚀

    Marked as helpful
    1
  • Gift Richard•520
    @fibonacci001Posted over 1 year 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.

    Marked as helpful
    0
  • Gift Richard•520
    @fibonacci001Posted over 1 year 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
  • Gift Richard•520
    @fibonacci001Posted over 1 year 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
    @Meowmeow11120Submitted almost 2 years ago

    there is my first projection after I learn css and html myself for a month. There are a lot of mistakes, I would like to gain advices from everybody. In addition, I would like to ask How to make a box sized to hold images and content without having to set the width to be half the width of the box containing them.

    Product preview card component

    1
    Gift Richard•520
    @fibonacci001Posted almost 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
  • Gift Richard•520
    @fibonacci001Posted almost 2 years ago

    you really did a good job on the desktop display, but you should have grouped both the image and card content in a div and used display: flex; flex-direction: row; and in the media query, you change the direction flex-direction: column; hope you find this helpful @J-HernandezM

    Marked as helpful
    0
  • Udy-Johnson10•10
    @Udy-Johnson10Submitted almost 2 years ago

    I had difficult with aligning the prices to the center and the right side height wasn't aligning with the left. I'm not sure of the positioning code that why I didn't use it. Also not sure whether the site adapts to any display screen properly.

    Product preview card component

    2
    Gift Richard•520
    @fibonacci001Posted almost 2 years ago

    the easiest way will be to display the prices in inline-block, and use margin: auto 0; or you specifically set a margin to help center it, and use media query to control the spacing when it's displayed on mobile. I hope this was helpful @Udy-Johnson10

    Marked as helpful
    0
  • jesse610•20
    @jesse610Submitted almost 2 years ago

    Hi! Thanks for taking a look at my work.

    Is the way my HTML structured considered best practice with the divs and the class names?

    And in my CSS, I was unsure of the naming best practices as well.

    Thanks, Jesse

    Product preview card

    2
    Gift Richard•520
    @fibonacci001Posted almost 2 years ago

    you can choose to use Use descriptive class names, Class names should describe what the element does, not how it looks. For example, use .btn for a button, rather than .red-btn for a red button. Minimize the use of generic class names: Avoid using generic class names like .container or .row, which may not accurately describe the purpose of the element. although HTML structure are largely subjective and can vary based on personal preferences and specific project requirements. hope this was helpful Jesse

    Marked as helpful
    1
  • windowpi•50
    @windowpiSubmitted almost 2 years ago

    What would be a better way of implementing the product card with the image on the left and text on the right? Took me a long time to try and figure it out and I am sure there is an easier way of doing it.

    Thanks in advanced!

    Preview Card with HTML and CSS Flexbox / Desktop Version

    3
    Gift Richard•520
    @fibonacci001Posted almost 2 years ago

    hi windowpi, A common and effective way to implement a product card with an image on the left and text on the right is by using CSS flexbox. With CSS flexbox, you can easily create a flexible container for the card, set the direction of the items (i.e., image and text), and align them as desired.

    ok.... take this as an example

    HTML

    <div class="product-card"> <img src="product-image.jpg" alt="Product Image"> <div class="product-info"> <h3>Product Name</h3> <p>Product description goes here</p> </div> </div> CSS .product-card { display: flex; flex-direction: row; }

    .product-info { padding: 10px; text-align: left; } With this example code, the image and the product info will be displayed side-by-side in a row, with the product info having a padding of 10 pixels and left-aligned text. hope this was some kind of help to you.

    Marked as helpful
    1