Skip to content
OverviewSolutions
5
Comments
14
Oscar Bocanegra
@obocanegra-dev

All comments

  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello Sansa! 👋

    Congratulations on your progress on this project! I have some suggestions to further enhance your design:

    Instead of using padding: 5%; to center the container, I recommend applying the following properties to the body selector in your CSS file: display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh;. This will effectively center the container both vertically and horizontally. Once you make these adjustments, you can remove the padding property.

    Additionally, I suggest using relative units, such as rem or em, for font sizes instead of pixels. This allows for better scalability and ensures that your text adapts well to different devices and screen sizes.

    For images that are not purely decorative, like the QR code, it's beneficial to provide a descriptive alt attribute. For example, you could use "QR code to Frontend Mentor website". This provides valuable context to users who rely on assistive technologies, enhancing the accessibility of your site.

    You're doing a fantastic job! Keep up the great work, and don't hesitate to ask if you have any questions or need further assistance. Good luck with your future endeavors! 🚀✨

    Best regards, Oscar

    Marked as helpful
  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello @Pabz2020! 👋

    Congratulations on completing your first challenge on Frontend Mentor! 🎉 I want to acknowledge your hard work and dedication in achieving this milestone.

    Here are some suggestions to further enhance your project:

    To center the card, I recommend adding the following properties to the body selector in your CSS file: display: flex; flex-direction: column; align-items: center; justify-content:center; min-height: 100vh;. This will vertically and horizontally center the content on the screen. Once you make these changes, you can remove the margins from the footer and the card, and it should appear properly centered.

    Additionally, I suggest using semantic elements instead of relying on numerous <div>s. Semantic elements like <header>, <nav>, <main>, and <footer> add meaning and structure to your HTML, improving accessibility and search engine optimization.

    For the QR code image, it would be beneficial to provide a more descriptive alt attribute, such as "QR code to Frontend Mentor website". This helps provide clear context to users who rely on assistive technologies and enhances the accessibility of your site.

    I also noticed that you didn't use the specified font in the design. Make sure to import the font correctly in your CSS file. You can find the import link on the font's website.

    You're making great progress! Keep implementing these best practices and exploring new opportunities to enhance your skills.

    If you have any questions or need further assistance, feel free to ask. Best of luck with your future projects! 🚀✨

    Warm regards, Oscar

    Marked as helpful
  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello Malcome! 👋

    Congratulations on your amazing design work! Your effort and creativity are truly commendable.

    Here are some suggestions to further enhance your project:

    I highly recommend using semantic elements instead of relying heavily on <div>s. Semantic elements like <header>, <nav>, <main>, and <footer> add meaning and structure to your HTML, improving accessibility and SEO.

    If you have only one heading, it's better to use <h1> instead of <h2>. This ensures proper hierarchy and emphasizes the primary heading of your page.

    For the image, it's important to provide a descriptive alt attribute, such as "QR code to Frontend Mentor website". This helps users understand the purpose of the image, especially for those who rely on assistive technologies.

    When specifying font sizes, it's recommended to avoid using pixels and instead use relative units like rem or em. This ensures better scalability and responsiveness across different devices.

    Adding text-align: center; will help align the content in the center and bring it closer to the original design. This will provide a visually consistent experience.

    You're almost there! Incorporating these suggestions will help further align your project with the original design.

    Keep up the great work, and feel free to ask if you have any questions or need further assistance. Good luck with your future endeavors! 🚀✨

    Best regards, Oscar

    Marked as helpful
  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello Levi! 👋

    Congratulations on completing your first challenge on Frontend Mentor! 🎉 I wanted to extend my warmest congratulations to you for your achievement.

    Here are some suggestions to further enhance your project:

    I highly recommend using semantic elements instead of relying heavily on <div>s. Semantic elements like <header>, <nav>, <main>, and <footer> add meaning and structure to your HTML, improving accessibility and SEO.

    If there is only one heading, it's better to use <h1> instead of <h2>. This ensures proper hierarchy and emphasizes the primary heading of your page.

    It would be beneficial to provide a more descriptive alt attribute for your image, such as "QR code to Frontend Mentor website". This helps users understand the purpose and content of the image, improving accessibility.

    Instead of setting a fixed width, it's better to use max-width. This allows your content to be more responsive and adapt well to different screen sizes.

    I noticed that the imported font is not the one specified in the design. It should be "Outfit" instead of "Open Sans". Make sure to update the font import to match the design requirements.

    I hope you find these suggestions helpful. You've done an amazing job so far, and I encourage you to keep up the great work!

    If you have any questions or need further assistance, please feel free to ask. Good luck with your future projects! 🚀✨

    Best regards, Oscar

  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello @IlledNacu! 👋

    Congratulations on your fantastic work! You've done an excellent job, and I want to commend you for your efforts.

    Here are some suggestions to further improve your project:

    To vertically center the content, you could change height: 100%; to min-height: 100vh; and add justify-content: center;. This will ensure that the content is centered vertically on the viewport.

    I recommend setting a higher breakpoint value (375px is quite small) to make your design responsive on a wider range of screens. This will help ensure that your project looks great on various devices.

    Instead of setting a fixed width for the container, consider using max-width. This allows the container to be more responsive and adapt to different screen sizes.

    There's no need to fix the height of the container either. Let it adjust naturally based on its content and any specified padding or margins.

    It's important to maintain the correct order of headings. Avoid placing an <h2> before an <h1>. Make sure to follow a logical heading hierarchy to enhance readability and semantic structure.

    Font sizes should always be specified using relative units like rem or em, rather than pixels. This ensures better responsiveness and scalability across different devices.

    For decorative icons, it's not necessary to provide descriptions in the alt attribute. However, for images like the perfume, it's recommended to use more descriptive alt text to enhance accessibility.

    Everything else looks great! As an extra challenge, I invite you to experiment with transitions on the hover effect of the button. This can add a delightful touch of interactivity to your project.

    Keep up the excellent work, and don't hesitate to explore further opportunities for growth and improvement! 🚀✨

    If you have any questions or need additional assistance, feel free to ask. Enjoy the journey of your development!

    Best regards, Oscar

    Marked as helpful
  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello Victor! 👋

    Congratulations on your amazing design! It looks fantastic, and I want to highlight the great work you've done.

    Here are some suggestions to further enhance your project:

    I highly recommend using semantic elements instead of relying on numerous <div>s. Semantic elements like <header>, <nav>, <main>, and <footer> add meaning and structure to your HTML, improving accessibility and SEO.

    I don't think the margin: 16px; on .card is necessary. In fact, it may prevent proper centering on mobile screens. I suggest reviewing and adjusting the margin to ensure that the content appears centered on all screens.

    Instead of specifying a fixed width (width), I recommend using max-width. This will make the elements more responsive and adapt better to different screen sizes.

    For interactive elements, it's preferable to use either <a> or <button> tags, depending on the appropriate use case. This will help users clearly identify interactive areas and improve the usability of your project.

    Furthermore, everything else looks great. I encourage you to play around with transitions and hover effects in this design. It can add an extra touch of interactivity and enhance the user experience.

    Keep up the excellent work and continue exploring your creativity! I'm confident that you'll achieve even more impressive results in your future projects. Go for it! 💪🚀

    If you have any questions or need further assistance, feel free to ask. Enjoy your development journey!

    Best regards, Oscar

  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello @Ur_dad! 👋

    Congratulations on completing your first challenge! 🎉 You did a great job, and I'm really impressed with your work.

    Here are some suggestions to further enhance your project:

    First of all, I recommend moving the inline styles from your HTML and creating a separate CSS file. You can then link this CSS file in your HTML. This will help keep your code organized and make it easier to maintain and update your styles.

    I highly recommend using semantic elements instead of relying heavily on <div> elements. Semantic elements like <header>, <nav>, <main>, and <footer> provide meaning and structure to your HTML, improving both accessibility and SEO.

    For the image, it would be even more descriptive to use "QR code to Frontend Mentor website" instead of just "QR code". This will provide clearer context and enhance the accessibility of your site.

    Avoid using a fixed width for your container as it hampers responsiveness. Instead, consider using max-width to allow your container to adjust fluidly to different screen sizes.

    Set the min-height of your container to 100vh to ensure that it fills the entire viewport and is vertically centered. This will improve the overall appearance and user experience.

    Remember to avoid using pixel units for font sizes. It's better to use relative units like rem or em. This ensures that your font sizes are responsive and adapt well to different devices and user preferences.

    Keep up the fantastic work and continue challenging yourself! I'm confident that you'll achieve even greater results in your future projects. Best of luck! 💪🚀

    If you have any questions or need further assistance, feel free to ask. Enjoy your coding journey! ✨😊

    Warm regards, Oscar

    Marked as helpful
  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello Lucas! 👋

    Congratulations on completing your first challenge on Frontend Mentor! 🎉 You've done a great job, and I'm thrilled to see your progress.

    Here are some suggestions to further improve your project:

    I highly recommend using semantic elements instead of relying on numerous <div>s. Semantic elements like <header>, <nav>, <main>, and <footer> add meaning and structure to your HTML, improving accessibility and search engine optimization.

    For the QR code image, it's important to provide a description in the alt attribute, such as "QR code to Frontend Mentor website." This helps provide clear context for users relying on screen readers and enhances the accessibility of your site.

    Remember that font sizes should never be specified in pixels. It's best to use relative units like rem or em. This ensures that your font sizes are responsive and adapt well to different devices and user preferences.

    Consider changing the height attribute to min-height. This allows the content to expand properly if it exceeds the initially set height.

    Additionally, it's advisable to avoid using fixed widths. Instead, consider using max-width. This will make your design more responsive and ensure it adapts well to different screen sizes.

    Keep up the great work and continue challenging yourself! I'm confident that you'll achieve great things in your future projects. Go for it! 💪🚀

    If you have any questions or need further assistance, feel free to ask. Good luck with your future endeavors on Frontend Mentor! ✨😊

    Best regards, Oscar

  • Oscar Bocanegra•235
    @obocanegra-dev

    Congratulations on taking the plunge and tackling your first Frontend Mentor challenge! It looks great, and you've done a fantastic job.

    I have a few suggestions to enhance your work:

    Instead of writing CSS directly in your HTML, I recommend creating a separate stylesheet file and linking it to your HTML. This will help keep your code organized and make it easier to manage and update your styles.

    Consider using semantic elements rather than generic <div>s. Semantic elements like <header>, <nav>, <main>, and <footer> add meaning and structure to your HTML, improving accessibility and search engine optimization.

    For the QR code image, it would be helpful to use a more descriptive alt attribute, such as "QR code to Frontend Mentor website." This provides better context for screen readers and improves the accessibility of your site.

    Remember that font sizes should never be specified in pixels. It's better to use relative units like rem or em. This ensures that your font sizes are responsive and adapt well to different devices and user preferences.

    Keep up the excellent work, and don't hesitate to explore more challenges on Frontend Mentor to further enhance your skills! 🎉💪

    If you have any questions or need further assistance, feel free to ask. Good luck with your future projects! 🚀✨

    Warm regards, Oscar

  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello kokenydaniel! 👋

    Congratulations on your incredible work in the Frontend Mentor challenge! 🎉 You've done a great job, and I would like to offer you some suggestions to further improve your project:

    I noticed that the card container appears large on small screens because the width is fixed. I recommend adding a max-width property to the container to make it better fit on smaller devices. This will help your design look more balanced and responsive.

    I suggest adding a breakpoint earlier, with a higher number of pixels, as 375px is quite low. This way, you can ensure that your design looks good on a wider range of screens and devices.

    I recommend using semantic elements in your HTML instead of relying too much on generic divs. This will help improve the structure and accessibility of your code by providing clear semantic meaning to each section of your page.

    For your next project, I strongly recommend adopting the "mobile first" approach. Starting with designing and developing for mobile devices will allow you to build a solid foundation and ensure an optimal user experience on all devices.

    Additionally, consider taking advantage of the current design to add interesting interactions with the hover effect on the button. This can add an interactive and appealing touch to your project.

    Overall, I want to congratulate you again on your work. You've truly achieved something great! These suggestions are meant to help you take your project to the next level.

    Keep up the great work and don't hesitate to explore more challenges on Frontend Mentor to continue improving your skills! 💪

    Wishing you much success in your future projects! 🚀✨

    Best regards, Oscar

    Marked as helpful
  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello Riccardo! 👋

    Congratulations on your excellent work in the Frontend Mentor challenge! 🎉 You've done a great job, and I want to highlight some suggestions to further improve your project:

    It's a good practice to use semantic elements in HTML. For example, instead of using a card container <div class="card-container">, you could consider using a <main> element and then use <section> elements to group related content within the card. This will help improve the structure and accessibility of your code.

    When it comes to headings, if there's only one, it's preferable to use an <h1>, as it represents the main heading of the page. This will help search engines and screen readers better understand the hierarchy of your content.

    For icons that are used purely for decoration and have no informational purpose, it's better to leave the alt attribute empty. This way, screen readers can skip the description of those elements and provide a better accessibility experience.

    For interactive parts of the design, such as buttons or links, it's recommended to use the appropriate tags (<button> or <a>, respectively). This will help users clearly identify interactive areas and improve the usability of your project.

    Finally, I would recommend creating a README file for your project. This file can serve as a guide for other developers and explain the purpose and functionality of each part of the project. This will help effectively share your work and facilitate the understanding of your code by others.

    I hope you find these suggestions helpful. Remember, they are only recommendations to enhance your project. Keep up the great work and continue improving your skills!

    Wishing you much success in your future projects! 🚀✨

    Best regards, Oscar

  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello Joy! 👋

    Congratulations on completing your first challenge on Frontend Mentor! 🎉 It looks fantastic, and you have done a great job on this initial task.

    I'd like to offer you some suggestions to further enhance your work:

    Using semantic elements in HTML is a good practice. For example, instead of using a <div class="container">, you could consider using a <main> element to represent the main content of the page. This will help improve the structure and accessibility of your code.

    It would be great if you could provide a more descriptive alt attribute for the image. For instance, instead of simply "QR code," you could describe it as "QR code to Frontend Mentor website." This will provide a better understanding of the image for users who rely on screen readers.

    I noticed that in your code, you have <html lang="pt-br">, which is fine if the content is in Portuguese. However, in this case, the text is in English, so it would be more appropriate to use <html lang="en"> to indicate that the primary language of the document is English. This will help search engines and translation tools correctly interpret the content.

    Remember that font sizes should never be in pixels. It is better to use relative units such as rem or em. These units allow the font size to adjust more flexibly across different devices and zoom settings, ensuring a better user experience.

    Overall, your work is quite good, and these suggestions will help you further refine your skills. Keep it up, and don't hesitate to explore other challenges on Frontend Mentor to continue growing as a developer! 💪

    If you have any questions or need further assistance, feel free to ask! I'm here to help.

    Wishing you great success in your future projects! 🚀✨

    Best regards, Oscar

    Marked as helpful
  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello Emmanuel! 👋

    I wanted to congratulate you on your first challenge at Frontend Mentor! 🎉 I thought your design was fantastic, you did a great job! 💪 However, I think we can work a little more to make it even more identical to the original.

    One suggestion I have is to separate the style code from the HTML and create a separate CSS file. This can be achieved by linking that CSS file in the HTML. Why am I suggesting this? ✨ Well, separating the style code into a separate file helps keep the code more organized and makes it easier to maintain as the project grows. It also allows for the reuse of styles across multiple pages and improves the readability of the HTML code.

    Another recommendation I have is regarding font sizes. Instead of using pixels, I suggest using relative units like rem or em. This ensures that the font size adjusts proportionally to the screen size or the font size defined in the parent element, resulting in a better viewing experience on different devices.

    Additionally, I noticed that you used height: 100vh in a part of the project. I suggest correcting it to min-height: 100vh. This will ensure that the content has a minimum height on devices with longer content, preventing it from being cropped or appearing messy.

    It's also preferable to use max-width instead of a fixed width (width) for elements. This will allow the design to better adapt to different screen sizes and maintain a consistent appearance on wider or narrower devices.

    Although there wasn't a significant difference between the mobile and desktop designs in this project, I highly recommend adopting the "mobile first" methodology in future projects. Starting by designing and developing the mobile version first will help ensure an optimal experience on mobile devices and make it easier to adapt to larger screens.

    Lastly, I would like you to add a description to the alt attribute of the QR code image, something like "QR code to go to frontendmentor.io". This will improve the accessibility of your project and provide additional information for users who cannot see the image.

    I hope you find these suggestions helpful, and I encourage you to keep practicing and challenging yourself. I'm sure you'll go far in your career as a front-end developer! If you have any questions, feel free to ask. I'm here to help. 💪😊

    Keep up the great work and good luck with your future challenges! 🚀

    Marked as helpful
  • Oscar Bocanegra•235
    @obocanegra-dev

    Hello Joseph! 👋

    I wanted to congratulate you on your excellent desktop design work for the Frontend Mentor project. The design looks fantastic, and you have done a great job on this part.

    However, I would like to give you some recommendations for the mobile design aspect. I suggest adjusting the breakpoint to a higher pixel value to enhance the experience on smaller devices. Additionally, I highly recommend starting your projects with the "mobile first" approach as it is a good practice to ensure an optimal user experience on all devices.

    When it comes to font sizes, it is important to avoid using pixels as the unit. Instead, I would recommend using relative units such as rem or em. This will ensure that the font size adjusts appropriately across different devices and zoom settings.

    Furthermore, remember that this project included two images, one for the mobile design and another for the desktop design. Make sure to include both images in your implementation to maintain visual consistency across all screen sizes.

    Another important suggestion is to add a description in the alt attribute of the perfume image. This will allow screen readers to describe the image to users with visual impairments, thereby improving the accessibility of your site.

    Lastly, it is essential to follow proper heading hierarchies. Ensure that you have at least one h1 in your document and use headings in a logical order. It is not appropriate to have an h4 above an h3. This will help search engines and screen readers better understand the structure of your content.

    I hope you find these tips helpful. Remember, they are just suggestions to further improve your work. Keep going and continue honing your skills!

    Best of luck with your future projects! 🚀✨

    Warm regards, Oscar

    Marked as helpful