Skip to content
OverviewSolutions
5
Comments
6
BarrieDirk
@barriedirk

All comments

  • Paulo Wells•470
    @wellsprSubmitted 5 days ago
    What are you most proud of, and what would you do differently next time?

    I tried to write semantic and well-structured code, focusing on organization, legibility, and accessibility. I'm using these challenges to research better ways to do things, one point at a time.

    What challenges did you encounter, and how did you overcome them?

    Perhaps the main focus here is to ensure the correct image appears at the appropriate size. I addressed this by using media queries, alternating between display: none and display: block.

    What specific areas of your project would you like help with?

    I would appreciate feedback on code structure, the use of semantic tags, accessibility, the application of BEM methodology, or any obvious areas where I might have complicated things.

    Responsive Product Card With Semantic Tags, Flexbox and Media Queries

    #accessibility#bem#lighthouse#sass/scss
    2
    P
    BarrieDirk•90
    @barriedirkPosted 4 days ago

    It looks great!, and I didn't know that in CSS you can add

    html { font-size: 62.5%; }

    to set the rem, nice idea!

    I think the manipulation of the images for response design is missing. When I searched for this, I found that you can use picture element:

    <picture> <source srcset="image-large.jpg" media="(min-width: 1024px)"> <source srcset="image-medium.jpg" media="(min-width: 768px)"> <img src="image-small.jpg" alt="Responsive Image"> </picture>

    or srcset and size attributes:

    <img src="image.jpg" srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw" alt="Responsive Image">

    The idea is to avoid downloading all the images, only those that fit the screen width.

    I hope this comment will be helpful to you

    Marked as helpful
    1
  • P
    BarrieDirk•90
    @barriedirkPosted 5 days ago

    I think when it is desktop, the width maximum of each column is 300px, 300px for the image and 300 for the content.

    And using the background image to show the product was very interesting.

    0
  • P
    BarrieDirk•90
    @barriedirkPosted 10 days ago

    Perhaps I am wrong, but I think the image should only span the entire width when the layout is equal to or less than 375px.

    And the same error I had, the height of the receive does not match what is expected.

    And missing the padding left of the ol li

    This is an CSS example I found to resolve my exercise with ol li, I hope this would be helpful for you

    .recipe ol { counter-reset: ol-counter; /* Start the numbering at 1 for ordered list */ }

    .recipe ol li { counter-increment: ol-counter; /* Increment the counter for each item / display: flex; flex-wrap: wrap; / Allow wrapping of the content */ }

    .recipe ol li::before { content: counter(ol-counter) ". "; /* Display the counter followed by a dot / position: absolute; left: 0; top: 0; / Align the number with the top of the list item */ font-size: 20px; color: var(--clr-stone-900); }

    0
  • P
    BarrieDirk•90
    @barriedirkPosted 13 days ago

    Nice code

    These are my observations:

    The links of the social network it would be better using ul with li. It's more semantic.

    Additionally, it's missing the hover behaviour when the mouse hover over the link

    And, there is not media query to manipulate the width of the card

    Cheers,

    0
  • P
    BarrieDirk•90
    @barriedirkPosted 15 days ago

    That's a clean solution with the CSS

    Thanks for sharing

    Marked as helpful
    0
  • Giovani Oliveira•90
    @GiodosvaniSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    -- I'm returning my studies and this challenge helped me to remember how to to get the things done using CSS.

    QR Code component using FlexBox

    1
    P
    BarrieDirk•90
    @barriedirkPosted 20 days ago

    I forgot to use CSS variables in my solution. I am glad to check your solutions to improve my skills.

    Thanks.

    1