Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
5

AlejandroIMP

@AlejandroIMP190 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

  • Responsive Card Component

    #accessibility#pure-css

    AlejandroIMP•190
    Submitted 3 months ago

    1 comment
  • Responsive social links

    #accessibility

    AlejandroIMP•190
    Submitted 4 months ago

    0 comments
  • Blog card component with shadows!!

    #accessibility#semantic-ui

    AlejandroIMP•190
    Submitted 4 months ago

    1 comment
  • QR code component with semantic HTML

    #semantic-ui

    AlejandroIMP•190
    Submitted 4 months ago

    0 comments
  • Responsive recipe page

    #accessibility

    AlejandroIMP•190
    Submitted 6 months ago

    0 comments
  • Advice generator using React, vite

    #react#vite#sass/scss

    AlejandroIMP•190
    Submitted 9 months ago

    Especially in the react components and how the project is structured, since I don't know if I have really structured it well.


    0 comments
View more solutions

Latest comments

  • Abdulgafar-Riro•150
    @Abdulgafar-Riro
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how the project maintains a clean and responsive design across different screen sizes using a mobile-first approach. Next time, I would optimize the CSS further by utilizing utility classes to reduce repetition and explore CSS Grid for layout structuring.

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

    One challenge was ensuring image scaling worked correctly on different screen sizes. Initially, the images were not adjusting properly, but using the <picture> element and object-fit: cover; helped maintain a consistent look. Another challenge was aligning text properly inside the card while keeping spacing uniform. Flexbox helped in structuring the layout efficiently. And also I'm not convenient in using sass yet.

    What specific areas of your project would you like help with?

    I would appreciate feedback on improving code efficiency, particularly in CSS structuring. Most especially, sass.

    Product Preview Card Component – Responsive Layout with Flexbox

    #accessibility
    1
    AlejandroIMP•190
    @AlejandroIMP
    Posted 3 months ago

    Feedback

    Hello there, I have some comments for you, I hope you find them helpful

    Areas for Improvement

    1. Button Type:

      • The <button> element has type="submit", but there is no <form> element wrapping it. If this button is not part of a form, consider changing its type to type="button" to avoid confusion.
    2. Empty href Attribute:

      • The <a href="#">Your Name Here</a> link in the footer uses a placeholder #. Replace it with an actual URL or remove the href attribute if it's not needed.
    3. SEO Enhancements:

      • Add meta tags for description and keywords to improve search engine visibility:
        <meta name="description" content="A floral, solar, and voluptuous perfume by CHANEL.">
        <meta name="keywords" content="perfume, CHANEL, Gabrielle Essence, Eau De Parfum">
        

    Suggestions for Future Enhancements

    1. Implement Lazy Loading for Images:
      • Add the loading="lazy" attribute to the <img> tag to defer loading of off-screen images, improving page load performance:
        <img class="product-image" src="./images/image-product-mobile.jpg" alt="Image of a product" loading="lazy">
        

    Keep up the great work!

    Marked as helpful
  • jamilgillani•110
    @jamilgillani
    Submitted 4 months ago

    Recipe Page

    #accessibility
    1
    AlejandroIMP•190
    @AlejandroIMP
    Posted 4 months ago

    Phenomenal job!

    I have some feedback, I hope it be useful

    Areas for Improvement:

    Duplicate Google Fonts Links:

    • There are two identical <link> tags for Google Fonts. Remove the duplicate to optimize the code.
    • Example:
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Outfit:wght@100..900&family=Young+Serif&display=swap" rel="stylesheet">
      

    Inconsistent Class Naming:

    • The class names are mostly consistent, but there are inconsistencies like recipe__section_Preparation (uses an underscore) versus recipe__section-title (uses a hyphen). Stick to one naming convention (e.g., kebab-case or BEM).
    • Example:
      <h2 class="recipe__section-preparation">Preparation time</h2>
      

    Accessibility in Tables:

    • The table lacks a <caption> or aria-label for better accessibility. Consider adding a <caption> to describe the table.
    • Example:
      <table class="recipe__table">
        <caption>Nutritional values per serving</caption>
        <tr class="border">
          <th>Calories</th>
          <td>277kcal</td>
        </tr>
        <!-- Other rows -->
      </table>
      

    Use of <b> Tags:

    • The <b> tags are used for bold text, but they are not semantic. Consider using <strong> for semantic importance or handle bold styling with CSS.
    • Example:
      <li><strong class="global_color">Beat the eggs:</strong> In a bowl, beat the eggs...</li>
      

    Overall, the code is well-structured and functional, but with a few tweaks, it can be more semantic, accessible, and optimized. Happy coding!

    Marked as helpful
  • Marcos Travaglini•6,210
    @Blackpachamame
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Modifique los estilos del diseño original, manteniendo la esencia, para personalizarlo un poco.

    My Social links profile

    #accessibility#bem
    2
    AlejandroIMP•190
    @AlejandroIMP
    Posted 4 months ago

    ¡Buen trabajo!

    Te dejo algunos puntos en los que se podría mejorar.

    Áreas de mejora:

    Jerarquía de encabezados:

    • El uso de <h2> para la ubicación (<h2 class="profile__location">) podría no ser semánticamente correcto. Considera usar un <p> en su lugar.
    • Ejemplo:
      <p class="profile__location">Neuquén, Argentina</p>
      

    Atributo lang:

    • El atributo lang en la etiqueta <html> está configurado como "en" (inglés), pero el contenido parece estar en español. Cambia el valor a "es" para reflejar el idioma correcto.
    • Ejemplo:
      <html lang="es">
      

    En general, el código está bien estructurado y sigue buenas prácticas, pero con estos ajustes puede ser más semántico, accesible y optimizado ¡Espero que te sea útil!

    Marked as helpful
  • P
    markobrien7•60
    @markobrien7
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I would probably look at using SASS as the applications in my work use that.

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

    I wanted to make the blog header the most important item on the page for a screen reader so I made it the h1 and reordered the list with flexbox order. But at the end I noticed this was to be an anchor tag, so I wasn't sure how best to handle that. In the end I went with a h1 inside and anchor tag.

    Build a blog page using semantic HTML, CSS, Flexbox and Aria labels

    #accessibility
    2
    AlejandroIMP•190
    @AlejandroIMP
    Posted 4 months ago

    Well done!

    I have some feedback, I hope you find them useful

    Areas for Improvement:

    Heading Hierarchy:

    • The <h2> tag is used for the date, which might not be semantically correct. Consider using a <p> tag or a <time> element instead.
    • Example:
      <p class="blog-article-date">Published <time datetime="2023-12-21">21 Dec 2023</time></p>
      

    Unnecessary <div> for Tag:

    • The <div> used for the tag (<div class="blog-article-tag">Learning</div>) could be replaced with a more semantic element like <span> or <p>.
    • Example:
      <span class="blog-article-tag">Learning</span>
      

    Footer Link:

    • The link in the footer for "Coded by" is missing a proper URL. Consider adding a valid URL or removing the link if it’s not needed.
    • Example:
      <span>Coded by <a href="https://github.com/yourusername" target="_blank">Mark O'Brien</a></span>
      

    Overall, the code is well-structured, Bravo!

    Marked as helpful
  • Donnish233•40
    @Donnish233
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the fact that I was able to successfully completed the project with the meagre skills at my disposal.

    Next time, I would be more efficient with the styling techniques I used because by then I would have improved my skills further.

    QR-Code-component using semantic HTML and Basic CSS

    #semantic-ui
    2
    AlejandroIMP•190
    @AlejandroIMP
    Posted 4 months ago

    Great job!

    I have some suggestion for you:

    Incorrect Heading Usage:

    • The <h1> tag is being used incorrectly. It should not wrap a <p> tag. Instead, the text inside <p id="one"> should be directly inside the <h1> tag.
    • Example:
      <h1>Improve your front-end <br/> skills by building projects</h1>
      

    Unnecessary <br/> Tags:

    • Using <br/> for line breaks is not ideal for responsive design. Consider using CSS (e.g., margin or padding) to control spacing.
    • Example:
      <p id="one">Improve your front-end skills by building projects</p>
      <p id="two">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
      

    Overall, the code is well-structured and functional, but with a few tweaks, it can be more semantically correct and accessible.

    Hope you find this helpful

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub