Skip to content
OverviewSolutions
2
Comments
4
Mcbattle
@MarioBatalha

All comments

  • Matt Pahuta•580
    @MattPahutaSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    A straightforward component that required minimal markup and styles. I've enjoyed working on these smaller projects to focus on fundamentals and be reminded that there's value in keeping solutions simple and easy to understand.

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

    Even with this simple component I initially added more markup than was necessary. It felt good tearing things down to the studs.

    QR code component using flexbox

    3
    Mcbattle•40
    @MarioBatalhaPosted 4 months ago

    You should reduce the line of comments in css file because its not a good practise to have comments for block of code or line code that is auto explanatory.

    0
  • Matt Pahuta•580
    @MattPahutaSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    A straightforward component that required minimal markup and styles. I've enjoyed working on these smaller projects to focus on fundamentals and be reminded that there's value in keeping solutions simple and easy to understand.

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

    Even with this simple component I initially added more markup than was necessary. It felt good tearing things down to the studs.

    QR code component using flexbox

    3
    Mcbattle•40
    @MarioBatalhaPosted 4 months ago

    Auto-close tags that isn't mandatory to have a close tag to improve the acessibility e.g: <Link rel="icon" href="" />

    Headings should follow a logical order without skipping levels (e.g., don’t jump from <h1> to <h4>). Proper nesting helps screen readers and search engines understand the structure of the content.

    You don't have any h1 and you skipped to h2.

    0
  • Mcbattle•40
    @MarioBatalhaPosted 4 months ago

    Some tips you should consider:

    • Try to keep the indentation in entire code.
    • Dispite of some tag are auto closed (Link, img and so on) you should close in openning tag in order to appilication with focus on accessibility like screen reader can index your app properly and improve your app semantic. Eg: <link rel="preconnect" href="https://fonts.googleapis.com" />
    • Add alternative text with alt attribute in img tag Eg: <img src="./user.webp" alt="user image profile" />
    • If a tag doesn't have a child element you should close in the openning tag. Eg: <i class="fa-brands fa-facebook-f p-3 rounded-full cursor-pointer text-Blue hover:bg-Blue hover:text-white transition-all duration-300" />
    • Add the script tag in the begnning of your code so this way you guarantee that it will run when your application is loaded and not only when it called.
    Marked as helpful
    1
  • Mcbattle•40
    @MarioBatalhaPosted 4 months ago

    Good job, but you should consider remove the unnecessary comments. There no need the add comment for a block of instructions or a line of code if it explain for itself e.g:

    <!-- Form to subscribe--!> <form> <label>Add your email to subscribe</label> <input type="email" placeholder="Your email" /> <button type="submit">Subscribe</button> </form> Write a comment for complex block of code that it isn't auto explanatory, is a good practise and help to leave de code more readble and clean, instead of write a commento of every block of code.
    2