Skip to content
OverviewSolutions
71
Comments
3264
P
Adriano
@AdrianoEscarabote

All comments

  • Adriano•42,680
    @AdrianoEscarabotePosted 13 days ago

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

    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>

    Everything else looks great.

    Hope this helps! 👍

    Marked as helpful
    0
  • Adriano•42,680
    @AdrianoEscarabotePosted 13 days 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:

    I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Learn More, he is not confirming a form, or something like, it will be redirected to another page, to Learn More about!

    to solve this problem do this:

    <a href="/">Learn More</a>

    The rest is excellent.

    I hope you find it useful. 👍

    1
  • CoolNight99•150
    @CoolNight99Submitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    I got the design and functionality working but I just edited the HTML using JavaScript instead of pulling the data from the JSON file, as it would have been a bit of a steep learning curve for me.

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

    Main challenge had to do with getting the design accurate. I had to do a lot of trial and error.

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

    Maybe some guidance on how to pull from the JSON file instead of editing the HTML.

    Time tracking dashboard

    1
    Adriano•42,680
    @AdrianoEscarabotePosted 13 days ago

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

    Consider using rem for font sizes. When font sizes are set in absolute units like pixels, users can't adjust the text size based on their preferences. Relative units like rem adapt to the screen size and user settings, making them more flexible across various devices.

    If you'd rather keep using px, you can download a handy VS Code extension that converts pixels to rem automatically

    link -> px to rem

    The rest is amazing.

    I hope this is helpful. 👍

    Marked as helpful
    1
  • Adriano•42,680
    @AdrianoEscarabotePosted 13 days ago

    Hello Madhuharika756, 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•42,680
    @AdrianoEscarabotePosted 13 days ago

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

    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 fantastic.

    Hopefully, you'll find it helpful. 👍

    1
  • Adriano•42,680
    @AdrianoEscarabotePosted 13 days ago

    Hey BoukaisAnis, Welcome to Front-end Mentor!!

    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! 👍

    Marked as helpful
    0
  • SunnyFGC•120
    @njmoon21Submitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    This was a very fun challenge. I am definitely most proud of being able to not only format the four cards in a grid layout, but also be able to change the display type of the cards after switching to mobile-view!

    If I were to do anything different... This is a problem with myself in general, but I tend to try to get every single detail completely perfect instead of trying to sort everything out beforehand. For example, the title section was kind of frustrating me because of the way the text wasn't wrapping around correctly.

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

    As I said previously, I had trouble trying to make the title and captions look spot on. Furthermore, I had a bit of trouble trying to make the title section have a certain width, and have the grid-layout section not have the same width the title section. I simply solved the problem by giving the title section a max width.

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

    If there are any general formatting issues or suggestions, please feel free to be straight-forward. I am also looking for advice for whether my code is easy to read or not, as that was most of what my solution comments were talking about... 😅

    Four Card Feature Page with HTML/CSS

    2
    Adriano•42,680
    @AdrianoEscarabotePosted 13 days ago

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

    <h1>Reliable, efficient delivery</h1>
<h1>Powered by Technology</h1>

    The most appropriate in this case would be just an h1 tag! containing the two contents, to make them break a line, we can use a max-width, and for the styling we can use a span element with the content that will be changed!

    The rest is excellent.

    I hope you find it useful. 👍

    1
  • Adriano•42,680
    @AdrianoEscarabotePosted 15 days ago

    Hey reshmakuna0, Welcome to Front-end Mentor!

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

    Avoid using the <br> tag in your HTML code. While <br> might seem like a simple way to break lines, it is considered bad practice and can lead to significant accessibility concerns. For users who rely on screen readers, the presence of <br> can be announced, which disrupts the flow of the content and creates a confusing experience.

    Instead of <br>, you should use semantic HTML to structure your content properly. For example, wrapping text in paragraphs (<p>) or using <div> containers for sections provides a cleaner and more accessible solution. This approach improves usability for screen readers and ensures that your content is presented in a meaningful way to all users.

    For more detailed guidance, refer to the MDN documentation on the <br> tag: MDN: Accessibility Concerns of <br>

    Pro Tip: Accessible web development isn't just a recommendation—it's essential for ensuring inclusivity on the web!

    Everything else looks great.

    Hope this helps! 👍

    1
  • piklu•80
    @Codeman-pikluSubmitted 15 days ago
    What are you most proud of, and what would you do differently next time?
    • Responsive Design: Successfully implemented a fully responsive layout that adapts seamlessly across devices.
    • Interactive Elements Added hover effects to enhance the user experience and make the design more dynamic.
    • Attention to Details: Focused on aligning with the design specifications, including color schemes, typography, and spacing.

    What I Would Do Differently Next Time

    • Improve Accessibility: Include ARIA roles and attributes for better accessibility for screen readers.
    • Explore JavaScript Interactivity: Add functionality such as dynamic plan selection or payment confirmation pop-ups.
    • Optimize Performance: Use image optimization techniques to reduce load times and improve performance metrics.
    What challenges did you encounter, and how did you overcome them?

    Challenges Encountered

    1. Ensuring Responsiveness:

      • Challenge: Creating a layout that looks good on both mobile and desktop devices.
      • Solution: Adopted a mobile-first workflow and used CSS Flexbox for flexible and responsive layouts.

    2. Hover Effects Implementation

      • Challenge: Making hover states visually appealing while maintaining a cohesive design.
      • Solution: Experimented with different colors, shadows, and transitions to enhance interactivity without overpowering the design.

    3. Background Positioning

      • Challenge: Correctly positioning the background pattern image to match the design.
      • Solution: Utilized the background-position and background-size properties effectively to ensure the image aligned properly.

    4. Typography Matching

      • Challenge: Aligning typography styles (font sizes, weights, and spacing) with the design file.
      • Solution: Used Google Fonts and carefully applied CSS font properties to achieve the required look.

    Overcoming Challenges:

    • I relied heavily on documentation like MDN Web Docs and tutorials to understand unfamiliar concepts.
    • Tested the design across various devices and browsers to identify and fix any inconsistencies.
    • Iterated on the design based on feedback and rechecked details like alignment, spacing, and colors.

    Would you like any of these challenges explained in more detail?

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

    1. Improving Responsiveness

      • I want to ensure the design looks seamless across all devices, especially tablets. Suggestions for handling edge cases or unconventional screen sizes would be helpful.

    2. Hover Effects and Animations

      • While I implemented hover states, I would like advice on enhancing them with smooth animations or transitions without affecting performance.

    3. Accessibility Improvements

      • Insights on making the design more accessible, particularly for screen readers or users navigating with a keyboard, would be beneficial.

    4. CSS Optimization

      • Feedback on optimizing my CSS code for better readability and maintainability would be appreciated, especially regarding the use of custom properties and organization.

    5. Advanced Layout Techniques

      • I'm curious about implementing CSS Grid or other advanced layout methods to create a more robust and scalable design for future iterations.

    Order summary component solutions

    1
    Adriano•42,680
    @AdrianoEscarabotePosted 15 days ago

    Hi piklu, 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. 👍

    1
  • Adriano•42,680
    @AdrianoEscarabotePosted 15 days ago

    Hi Danilo Lucban, 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•42,680
    @AdrianoEscarabotePosted 15 days ago

    Hello baloriaakash, 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. 👍

    Marked as helpful
    0
  • Adriano•42,680
    @AdrianoEscarabotePosted 15 days ago

    Hi Stephen Akinrodoye, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could 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 fantastic.

    Hopefully, you'll find it helpful. 👍

    Marked as helpful
    0