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

All comments

  • San•50
    @capslock11Submitted over 1 year ago

    Coded first in mobile. Using a small size screen so I can't get the perfect size yet for Desktop version.

    Kinda satisficed to the result but needs more practice to perfect it.

    Responsive QR code first Challenge

    1
    Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    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
    1
  • Pabasara Jayawardhana•40
    @Pabz2020Submitted over 1 year ago

    Hello friends, this is my first challenge and I found it difficult in CSS positioning and after some attempts, I was able to do it. However, I'm still unsure about the positioning specially the footer part. I used relative positioning to position the card component and margin to position the footer part. It would be great if you can give me any comments on my positioning and its best practices.

    QR-code challenge using bootstrap

    3
    Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    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
    1
  • Malcome Baggett•20
    @MalcomeBaggettSubmitted over 1 year ago

    On my first iteration, I was not able to style as close to the preview as possible, however, after seeing others' solutions I was able to improve the styling and HTML markup. All in all with more practice I will improve.

    QR Code challenge

    1
    Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    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
    1
  • Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    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

    1
  • Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    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
    1
  • Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    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

    0
  • Ur_dad•10
    @Ur-dad24Submitted over 1 year ago

    Hey friends, I am happy to complete this small challenge as my starting point on frontendmentor.io. While building this project, I kind of freaked out on centering the qr-code container, vertically. But after a few tweaks with css, I was able to freely move it up and down by setting a min-height to the container of the qr-code. Unsure if that was a good solution. Are there better ways I could have done this?

    Your feedback will be highly appreciated.

    Responsive QR-code component using CSS Flexbox

    1
    Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    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
    2
  • Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    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

    0
  • codewithedeepak238•150
    @codewithedeepak238Submitted over 1 year ago

    I was thinking to start the frontend mentor challenge since a long time, now I started my first challenge. I didn't find any difficulty in doing this one. Hope I will stay attach to these challenges, and will learn something new daily.

    Frontend Mentor | QR code component

    1
    Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    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

    0
  • Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    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
    0
  • Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    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

    1
  • Oscar Bocanegra•235
    @obocanegra-devPosted over 1 year ago

    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
    1