Skip to content
OverviewSolutions
5
Comments
4

AlexxxMasonn

@AlexxxMasonn100 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • AlexxxMasonn•100
    @AlexxxMasonn

    Hey, I checked out your code, and overall, it's really well-structured and easy to follow! Just a few suggestions to refine it further:

    HTML Improvements

    You have two <header> elements—one for the page and another inside <article>. While it's technically fine, some screen readers might find it confusing. Consider renaming the second one to <div class="article-header"> or another semantic element.

    You used <hr> tags to separate sections, which works, but relying on CSS for spacing instead might give you more flexibility.

    Accessibility & SEO Adding role="img" to the <img> tag or using an aria-label could enhance accessibility.

    SEO-wise, you might want to include meta descriptions and Open Graph tags to improve visibility when shared online.

    Nice use of <th scope="row"> in the table! You could also add <thead> for a more structured layout.

    Overall, great job! With a few tweaks, this recipe page will be even more polished.

  • AlexxxMasonn•100
    @AlexxxMasonn

    Your structure is solid—you're using clean and semantic HTML, which is great for accessibility and SEO.

    Now, a few things to tweak:

    Spelling Fixes: Quick touch-ups—"Linkedln" should be "LinkedIn," and "Instragram" should be "Instagram."

    Class Naming: Instead of botones, something more descriptive like social-links would make the CSS more intuitive.

    Marked as helpful
  • AlexxxMasonn•100
    @AlexxxMasonn

    Hey! This is looking solid. You’ve structured everything well, and it’s clear you’ve put thought into making it clean and readable. A few tweaks here and there will make it even smoother.

    You’ve got semantic HTML down—your headings, paragraphs, and footer are all well-placed. Google Font preconnect is a nice touch to optimize loading speed. Alt attributes on your images show you’re thinking about accessibility.

    Where you could improve: Right now, you’re loading two separate Google Font URLs for different weights of 'Figtree.' You can merge them into one request to improve performance.

    Button as a heading: The <button> element for “Learning” feels a little unconventional. You might be better off using a <span> or <div> styled as a button instead.

    Container spacing: It wouldn’t hurt to add some padding inside .container to make sure everything breathes a little more.

    Footer accessibility: You could make it more meaningful by using an ARIA role or a more semantic tag like <address>.

    Alt text improvement: Your author image has an alt attribute, which is great, but something more descriptive like "Author Greg Hooper" would be even better for accessibility.

    Marked as helpful
  • AlexxxMasonn•100
    @AlexxxMasonn

    This is a great start! It´s a great solution provided.

    You really nail it on Semantic HTML, Viewport Meta Tag which is a great touch and the Alt Attribute on Images to describe the QR code, and improving accessibility.

    The only thing I can think of is on smaller screens, the QR code might need max-width to avoid overflowing.

    Marked as helpful