Skip to content
OverviewSolutions
71
Comments
3230
Adriano
@AdrianoEscarabote

All comments

  • Ruben•190
    @RuxCastilloSubmitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I feel proud of my consistency, and practicing is truly helping me improve a lot.

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

    It was challenging for me to adjust the background and figure out how to properly arrange the image with the content.

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

    Any constructive criticism or tips for improvement are always welcome.

    Orden Summary vanilla

    1
    Adriano•41,620
    @AdrianoEscarabotePosted about 24 hours ago

    Hi Ruben, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:

    To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

    • Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

    • Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

    Feel free to choose one of the two!

    The rest is amazing.

    I hope this is helpful. 👍

    Marked as helpful
    1
  • Adriano•41,620
    @AdrianoEscarabotePosted about 24 hours ago

    Hello sophia, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

    To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:

    img {
    mix-blend mode: multiply;
    opacity: 80%;
}

    The rest is spot on.

    Hope it’s helpful to you. 👍

    0
  • Adriano•41,620
    @AdrianoEscarabotePosted about 24 hours ago

    Hi sophia, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

    Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.

    Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

    See the example below:

    <picture>
  <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
</picture>

    The rest is fantastic.

    Hopefully, you'll find it helpful. 👍

    0
  • Odetoyinbo Pelumi•30
    @BbylumiSubmitted 1 day ago
    What challenges did you encounter, and how did you overcome them?

    when i wanted to add the block shadow at the rigth i was thinking how am i going to get that, but i thought i could use border right and bottom which i did and it works

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

    responsive

    the block shadow, had to use border right and border bottom

    1
    Adriano•41,620
    @AdrianoEscarabotePosted about 24 hours ago

    Hey Odetoyinbo Pelumi, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

    Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.

    flexbox:

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

    grid:

    body {
    display: grid;
    place-content: center;
    min-height: 100vh;
}

    Everything else looks great.

    Hope this helps! 👍

    0
  • Adriano•41,620
    @AdrianoEscarabotePosted about 24 hours ago

    Hi VIS-WAS, how are you doing? I really loved the outcome of your project, but I have a few suggestions that I think might be helpful:

    To improve the semantics and accessibility of your code, consider using the <ul> (unordered list) element to group related links. The <ul> tag is ideal for representing collections, such as a list of social media links or navigation items.

    Using <ul> not only makes your code more structured and meaningful, but it also helps assistive technologies identify the group as a related set of items, enhancing the experience for screen reader users. Additionally, this approach improves overall readability and maintainability of your HTML.

    Example:

    <ul>
  <li><a href="#">GitHub</a></li>
  <li><a href="#">Frontend Mentor</a></li>
  <li><a href="#">LinkedIn</a></li>
  <li><a href="#">Twitter</a></li>
  <li><a href="#">Instagram</a></li>
</ul>

    In this example:

    • The <ul> wraps the entire group, indicating that these links are related.
    • Each item is enclosed in a <li> (list item), which provides a clear structure and logical grouping.

    This method is particularly useful for navigation menus, social media links, or any set of grouped items, offering better support for both SEO and screen readers.

    Pro Tip: Avoid using <div> elements alone for lists, as they don’t convey the same semantic meaning. Whenever possible, choose semantic tags like <ul> or <ol> to improve the quality of your code.

    The rest is excellent.

    I hope you find it useful. 👍

    0
  • Adriano•41,620
    @AdrianoEscarabotePosted about 24 hours ago

    Hi webthingz, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:

    To improve the semantics and accessibility of your code, consider using the <ul> (unordered list) element to group related links. The <ul> tag is ideal for representing collections, such as a list of social media links or navigation items.

    Using <ul> not only makes your code more structured and meaningful, but it also helps assistive technologies identify the group as a related set of items, enhancing the experience for screen reader users. Additionally, this approach improves overall readability and maintainability of your HTML.

    Example:

    <ul>
  <li><a href="#">GitHub</a></li>
  <li><a href="#">Frontend Mentor</a></li>
  <li><a href="#">LinkedIn</a></li>
  <li><a href="#">Twitter</a></li>
  <li><a href="#">Instagram</a></li>
</ul>

    In this example:

    • The <ul> wraps the entire group, indicating that these links are related.
    • Each item is enclosed in a <li> (list item), which provides a clear structure and logical grouping.

    This method is particularly useful for navigation menus, social media links, or any set of grouped items, offering better support for both SEO and screen readers.

    Pro Tip: Avoid using <div> elements alone for lists, as they don’t convey the same semantic meaning. Whenever possible, choose semantic tags like <ul> or <ol> to improve the quality of your code.

    The rest is amazing.

    I hope this is helpful. 👍

    Marked as helpful
    0
  • Adriano•41,620
    @AdrianoEscarabotePosted about 24 hours ago

    Hello Arshal Rejith S, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

    To improve the semantics and accessibility of your code, consider using the <ul> (unordered list) element to group related links. The <ul> tag is ideal for representing collections, such as a list of social media links or navigation items.

    Using <ul> not only makes your code more structured and meaningful, but it also helps assistive technologies identify the group as a related set of items, enhancing the experience for screen reader users. Additionally, this approach improves overall readability and maintainability of your HTML.

    Example:

    <ul>
  <li><a href="#">GitHub</a></li>
  <li><a href="#">Frontend Mentor</a></li>
  <li><a href="#">LinkedIn</a></li>
  <li><a href="#">Twitter</a></li>
  <li><a href="#">Instagram</a></li>
</ul>

    In this example:

    • The <ul> wraps the entire group, indicating that these links are related.
    • Each item is enclosed in a <li> (list item), which provides a clear structure and logical grouping.

    This method is particularly useful for navigation menus, social media links, or any set of grouped items, offering better support for both SEO and screen readers.

    Pro Tip: Avoid using <div> elements alone for lists, as they don’t convey the same semantic meaning. Whenever possible, choose semantic tags like <ul> or <ol> to improve the quality of your code.

    The rest is spot on.

    Hope it’s helpful to you. 👍

    Marked as helpful
    0
  • Adriano•41,620
    @AdrianoEscarabotePosted about 24 hours ago

    Hi biresh375, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

    Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.

    Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

    See the example below:

    <picture>
  <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
</picture>

    The rest is fantastic.

    Hopefully, you'll find it helpful. 👍

    Marked as helpful
    0
  • Adriano•41,620
    @AdrianoEscarabotePosted about 24 hours ago

    Hey mohin2202k, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

    Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.

    flexbox:

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

    grid:

    body {
    display: grid;
    place-content: center;
    min-height: 100vh;
}

    Everything else looks great.

    Hope this helps! 👍

    0
  • Adriano•41,620
    @AdrianoEscarabotePosted about 24 hours ago

    Hi Abdur Rahman, how are you doing? I really loved the outcome of your project, but I have a few suggestions that I think might be helpful:

    To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

    • Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

    • Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

    Feel free to choose one of the two!

    The rest is excellent.

    I hope you find it useful. 👍

    0
  • Adriano•41,620
    @AdrianoEscarabotePosted about 24 hours ago

    Hi b_Root, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:

    Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.

    Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

    See the example below:

    <picture>
  <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
</picture>

    The rest is amazing.

    I hope this is helpful. 👍

    Marked as helpful
    0
  • Adriano•41,620
    @AdrianoEscarabotePosted about 24 hours ago

    Hello anshu1612, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

    Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.

    flexbox:

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

    grid:

    body {
    display: grid;
    place-content: center;
    min-height: 100vh;
}

    The rest is spot on.

    Hope it’s helpful to you. 👍

    0