Skip to content
OverviewSolutions
8
Comments
13
Munsif Ali
@Munsif-Ali

All comments

  • Munsif Ali•200
    @Munsif-AliPosted over 1 year ago

    congratulations on your solution i would give some suggestions on your solution As per web accessibility guidelines, all non-text content such as images, videos, and audio must have alternative text that describes the content's purpose or function.

    In the case of the <object> element with no visible content, it is recommended to provide an alternative text using the <object> element's title attribute or a nested <img> element with its alt attribute. Here is an example:

    <object data="/assets/images/icon-visual.svg" type="" title="Icon Visual"></object>

    <object data="/assets/images/icon-visual.svg" type="">
  <img src="/assets/images/icon-visual.svg" alt="Icon Visual">
</object>

    By providing an appropriate alternative text, users who use assistive technologies like screen readers can understand the purpose or function of the non-text content.

    Marked as helpful
    1
  • Munsif Ali•200
    @Munsif-AliPosted over 1 year ago

    there is a little gap in the main card and the image borders at the bottom give the image height 100% to take the full height on the parent like this:

    img{
height: 100%;
}

    and for image use picture tag in html

     <picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

    in that you can specify different images source according to the width you can read more about here about picture tag

    Marked as helpful
    0
  • Munsif Ali•200
    @Munsif-AliPosted over 1 year ago

    although your design is looking good but you that have unnecessary scrolling in it which i think is due to

    .container{
height:150vh;
}

    this code is giving 150% of the view height to the container that is causing the scroll in your design

    0
  • Munsif Ali•200
    @Munsif-AliPosted over 1 year ago

    although your design is looking good i would give you one suggestion that is your repository structure is not looking good i mean create a separate folder for images and place all the images in that folder and create a folder for CSS and place the CSS files in that folder

    0
  • Munsif Ali•200
    @Munsif-AliPosted over 1 year ago

    In HTML, images should always include alternative text, also known as "alt text," to provide a textual description of the image for users who cannot see the image, such as those who use screen readers or have images turned off in their browser.

    If you are encountering an error message stating that images must have alternate text, it means that you have not included the required "alt" attribute in the image tag. To fix the error, simply add the alt attribute to your image tag and provide a brief but descriptive text that accurately describes the content and purpose of the image.

    Here's an example of an image tag with the alt

    <img src="example.jpg" alt="A red apple on a white background">

    In this example, the alt text describes what the image depicts, allowing users who cannot see the image to understand its content.

    0
  • Munsif Ali•200
    @Munsif-AliPosted over 1 year ago

    It look like you have given the wrong path of the image. To give a relative image source (src) in HTML, you can specify the image's location relative to the HTML file's location. Here are some examples:

    • If the image is in the same directory as the HTML file:
    <img src="image.jpg" alt="Image description">
    • If the image is in a subdirectory called "images" in the same directory as the HTML file:
    <img src="images/image.jpg" alt="Image description">
    • If the image is in a parent directory called "images" relative to the HTML file:
    <img src="../images/image.jpg" alt="Image description">

    In the second example, the "../" notation indicates that the file is located one directory level above the current directory. In the third example, it is located two levels above.

    Note that the actual path may differ depending on your file structure, so make sure to adjust the relative path accordingly.

    In HTML, images should always include alternative text, also known as "alt text," to provide a textual description of the image for users who cannot see the image, such as those who use screen readers or have images turned off in their browser.

    If you are encountering an error message stating that images must have alternate text, it means that you have not included the required "alt" attribute in the image tag. To fix the error, simply add the alt attribute to your image tag and provide a brief but descriptive text that accurately describes the content and purpose of the image.

    Here's an example of an image tag with the alt attribute:

    <img src="example.jpg" alt="A red apple on a white background">

    In this example, the alt text describes what the image depicts, allowing users who cannot see the image to understand its content.

    Marked as helpful
    1
  • Ecyla•20
    @ecy16Submitted over 1 year ago

    Could someone explain to me how to make the image visible?

    QRcode components

    4
    Munsif Ali•200
    @Munsif-AliPosted over 1 year ago

    I look at the code of your solution and found that there is no image in the repository make a folder in your repo and place the image in it and use img tag in html to load the image in your design like this:

    <img src="./images/image_name.png" 
alt="description of the image if image isn't load correctly this text will be displayed">
    Marked as helpful
    0
  • Munsif Ali•200
    @Munsif-AliPosted over 1 year ago

    although your solution is looking good and your code is pretty clean but i would like to give some suggestions

    • try to create variable for the colors you are using in your CSS and then assign these variable to the property like this
    :root{
--primary-blue-color:#1a75ff;
}
p{
background-color:var(--primary-blue-color);
}
    • you haven't used the font that was mention in the style guide.
    • also remove the opacity 80% from the heading if you can look to the design it is fully visible and you have make it 80% visible by providing opacity:80%; which is not looking good.
    • lastly i would suggest to make the background-shadow a little bit light its very strong now.
    Marked as helpful
    1
  • Munsif Ali•200
    @Munsif-AliPosted over 1 year ago

    your code repository link is not working its broken.

    Marked as helpful
    1
  • Munsif Ali•200
    @Munsif-AliPosted over 1 year ago

    although the design is looking good i would like to mention something

    • The image’s alt tag description needs to be improved upon ⚠️. Assume that you are describing the image to someone over the phone.

    More Info:📚

    more about images

    • This component requires the use of two images 🎑 at different breakpoints ⚠️. The picture element will facilitate this.

    Here is how it looks like implemented: EXAMPLE

    Syntax:

    <picture>
  <source media="(min-width: )" srcset="">
<img src="" alt="">
</picture>

    More Info:📚

    picture tag

    • The old price (169.99) 🏷 is not being properly announced 😢 to screen readers. To fix this, you are going to wrap the the price in a s element and inside it you will add a span element with an visually-hidden class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

    The Strikethrough Element

    Change ⚠️ the height to min-height in your body element, to improve your component's responsiveness and remove the width: 100vw; as is not needed.

    ALWAYS Implement a "Mobile First" approach 📱 > 🖥

    Mobile devices are now the dominant 👑 way in which people browse the web. So when building your content, you will start building with small screen sizes (starting at 320px) and work your way to larger screens using min-width.

    More Info: 📚

    Mobile First

    If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

    you can reach me here

    Munsif Ali

    Happy Coding! 👾

    0
  • Munsif Ali•200
    @Munsif-AliPosted over 1 year ago

    When viewed on a small screen, the design appears pleasing to the eye. However, as the width of the screen expands beyond 450, the design begins to break and lose its cohesive appearance. The optimal viewing experience can be attained at a width of 1210. As the screen continues to widen towards 1900, the design once again begins to fragment and lose its overall harmony.

    If you require assistance in resolving these issues, please do not hesitate to reach out to me. I would be delighted to assist you and collaborate with you in resolving these design challenges.

    0
  • Obialor Ijeoma•30
    @IgraziellaSubmitted over 1 year ago

    I've been on this challenge for a while now and still can't get around how to get an even border radius for all sides. I'm quite lost there. Any help on how to handle this will be really appreciated.

    Product preview card using CSS and Html

    2
    Munsif Ali•200
    @Munsif-AliPosted over 1 year ago

    Firstly, the code is not currently responsive, which means that it may not display optimally on various devices and screen sizes. Additionally, the required color scheme has not been fully implemented, resulting in a less cohesive overall design.

    Furthermore, the border radius has not been properly applied, resulting in a less polished appearance for the design elements. In particular, the card does not look as visually appealing on desktop sites, and the design becomes broken on mobile versions of the site.

    Overall, while the code is a good starting point for the project, there are some areas where additional work is needed in order to fully realize the design requirements and ensure a consistent and visually appealing user experience across different devices and screen sizes.

    if you need any help regarding this fell free to connect. i would be happy to contribute with you on this project.

    0