Skip to content
OverviewSolutions
7
Comments
3
Syed Umair
@SYEDUMAIR007

All comments

  • Syed Umair•180
    @SYEDUMAIR007Posted over 1 year ago

    Hey friend, Add a h1 to remove the warning

    0
  • Richard Orido•10
    @richie-omondiSubmitted over 1 year ago

    As much as I enjoyed working on this project, I still have a few challenges in implementing Bootstrap.

    • First of all, is there any way I could improve my use of sematic HTML to improve code readability and accessibility? I decided to use the <section> and <footer> tags to demarcate the different sections of the page.
    • How can I make the edges of the card and image more rounded?
    • How can I make the card longer?
    • Is the responsiveness good enough or how could I improve on it?

    Thank you!

    Responsive QR code component using Bootstrap

    3
    Syed Umair•180
    @SYEDUMAIR007Posted over 1 year ago

    Hey friend, Its Syed Umair, first of all I would like to congratulate you for the completion of your project. You can remove the warnings in the validation report by following these steps:

    1. U cant have directly h4 after h1 so use h2 because u always have to come in hierarchy.
    2. Always u should have a main section in your project, so nest the code which is in body tag into main tag and then keep main inside body.
    3. And for having more rounded corners give the div an id and select that div inside css style sheet and give it a border radius of 1.875 rem.

    Hope you like my suggestions helpful.

    Marked as helpful
    1
  • Syed Umair•180
    @SYEDUMAIR007Posted almost 2 years ago

    Hi Ibrahim, I have a couple of suggestions for you to improve your code:

    1. Always have a main section in your HTML file. (You could replace your section tag with the main tag)
    2. Try using rems or ems to set font size instead of pixels.
    3. Use min-width instead of max-width, and always use percentages as units to set the size of the containers as well as elements.
    4. The best practice concerning google fonts is always to add the HTML link given in google forms eg: ( <link rel="preconnect" href="https://fonts.googleapis.com">)into your head of the HTML file and the CSS link in the CSS file eg:(@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap');). Hope you like my feedback, thank you for reading!!!
    Marked as helpful
    1