Latest comments

• 

  Abdulgafar-Riro•100

  @Abdulgafar-RiroSubmitted about 2 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

  00
  

  AlejandroIMP•190

  @AlejandroIMPPosted about 2 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

  0
• 

  jamilgillani•110

  @jamilgillaniSubmitted about 2 months ago

  

  Recipe Page

  #accessibility

  1

  10
  

  AlejandroIMP•190

  @AlejandroIMPPosted about 2 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

  1
• 

  Marcos Travaglini•6,210

  @BlackpachamameSubmitted about 2 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

  50
  

  AlejandroIMP•190

  @AlejandroIMPPosted about 2 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

  0
• 

  P

  markobrien7•60

  @markobrien7Submitted about 2 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

  00
  

  AlejandroIMP•190

  @AlejandroIMPPosted about 2 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

  0
• 

  Donnish233•40

  @Donnish233Submitted about 2 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

  10
  

  AlejandroIMP•190

  @AlejandroIMPPosted about 2 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

  1