Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
5
Art0fMind
@art0fmind

All comments

  • Norton-Vinicius•90
    @Norton-Vinicius
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    In fact, I had a lot of difficulty with this challenge. However, what I'm most proud of was the text part and since I've been using flexbox, I believe I'm doing well.

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

    The biggest challenge I encountered was how to place the image next to the text. I managed to leave it without the white margins, however, I would have to remove all the padding I defined (I don't know if I solved it in the best way, but it was the way I found).

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

    I would like you to evaluate my solution, tell me if this was one of the ways to solve the challenge and if so, where I could improve or do something different. I also had some difficulty in changing the desktop image to the mobile image, I used chatGPT to help me clear up doubts, but I still don't understand very well.

    Attempt at resolution Product preview card component

    1
    Art0fMind•90
    @art0fmind
    Posted 3 months ago

    Your code is clean, well-structured, and follows good HTML and CSS practices. 👍 Positive points:

    Semantic elements are used properly (main, picture, h1, etc.)

    Responsive design handled well with @media

    Clean separation of HTML and CSS

    Fonts and colors ensure good readability

    🛠️ Minor improvements:

    The href="*" should be replaced with "#" or a real URL to avoid errors

    Use a <button> instead of <a> for the "Add to Cart" (better for accessibility and semantics)

    In the CSS: html, body { height: 100%; } — make sure the body doesn’t overflow if the content gets taller than the viewport

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

    Je suis contente d'avoir réussi a utiliser CSS grid pour la dernière partie de la recette

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

    CSS GRID car première fois que je l'utilise sur un projet.

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

    #réagir Merci de me donner vos avis ainsi que vos conseils pour pouvoir améliorer ou simplifier mon code

    RECETTE OMELETTE

    1
    Art0fMind•90
    @art0fmind
    Posted 3 months ago

    Tu parle francais n'est ce pas?


    💡 Points positifs

    ✅ Structure HTML claire :
    L’HTML est bien organisé avec des balises sémantiques pertinentes (ul, ol, hr, h1/h2/h3, etc.), ce qui facilite la compréhension et le rendu.

    ✅ Bonne utilisation des polices :
    Tu utilises plusieurs polices de Google Fonts, notamment Outfit et Young Serif, ce qui donne une bonne hiérarchie visuelle.

    ✅ Design propre et espacé :
    Le padding, les margins, et les bordures arrondies apportent une bonne aération visuelle.

    ✅ Cohérence dans les couleurs :
    Les couleurs choisies respectent une palette harmonieuse (tons crème et orangés), parfaite pour une recette.


    🧩 Suggestions d’amélioration

    🔧 HTML

    1. Balise main manquante : Pour l’accessibilité, tout le contenu principal devrait être englobé dans une balise <main> plutôt qu’un simple <div class="entier">.

    2. Structure imbriquée : Trop de div imbriqués (ex : entier > container-white > contenant). Tu peux réduire la profondeur pour simplifier le DOM.

    3. Balise section : Les parties comme preparation, ingredient, instruction, et nutrition gagneraient à être dans des balises <section> sémantiques, avec un aria-label si nécessaire.

    4. Erreurs HTML :

      • Tu ouvres certains <li> avec des <hr> à l’intérieur (dans .nutrition), ce qui n’est pas valide. Les hr doivent être en dehors des ul/li.
      • Le dernier </li> dans .nutrition est manquant (juste avant </div>).

    🎨 CSS

    1. Utilisation des classes vides : .ingredient, .instruction ont des sélecteurs vides. Supprime-les ou ajoute une justification future.

    2. Améliorer la grille nutritionnelle : Tu utilises display: grid avec grid-template-columns: 1fr 0px;, mais ça n'affiche qu'une seule colonne. Tu pourrais faire :

      display: grid;
      grid-template-columns: 1fr auto;
      justify-content: space-between;
      

    Regarde ce que j'ai fait pour les puces de mes listes

    .ingredients {
           list-style: none;
           padding: 0px 0.4em;
    }
    
    .ingredients__items {
            /*line-height: 1.4;*/
           display: grid;
           grid-template-columns: auto 1fr;
           align-items: center;
           margin-bottom: 0.1em;
    }
    
    .ingredients__items::before {
           content: "•";
           color: var(--brown-800);
           font-size: 1.5em;
           justify-self: center;
           align-self: center;
           padding-right: 1.2em;
    }
    
    1. Accessibilité et contrastes : Vérifie le contraste texte/fond pour h2, surtout dans .preparation. Un petit ajustement de teinte ou de luminosité peut améliorer la lisibilité.

    2. Responsive design : Actuellement, ton container-white a une largeur fixe de 720px, ce qui risque de mal s’afficher sur petits écrans. Tu pourrais le rendre responsive :

      max-width: 720px;
      width: 90%;
      
    3. Font-weight étrange : Roboto est importé avec font-weight: 619 dans Google Fonts, ce qui n'est pas standard. Tu peux arrondir à 600 ou 700.


    ✍️ Bonnes pratiques à adopter

    • Ajouter des alt descriptifs pour l’accessibilité, par exemple :
      alt="A freshly cooked omelette on a white plate"
    • Utiliser les balises figure et figcaption autour de l’image si tu veux ajouter une description plus poussée plus tard.
    • Simplifier les sélecteurs CSS :
      body .container-white peut être juste .container-white, sauf si tu anticipes des conflits globaux (c'est a dire que si tu te retrouve dans le cas ou tu as plusieur .container-white et que tu veux preciser par exemple "les .container-white qui sont dans <balise>" donc <balise> .container-white {...}

    Regarde mon code https://github.com/art0fmind/frontend_mentor/blob/main/recipe-page/recipe-page-main/index.html

    et regarde le rendu

    https://art0fmind.github.io/frontend_mentor/recipe-page/recipe-page-main/

    en affichage desktop et mobile.

    Moi meme j'apprend et j'ai eu a regarder d'autre code dont la solution au chalenge qr code de Maadhav

    https://github.com/maadhav-codes/fm-qr-code-component-solution

    qui m'a beaucoup inspire


    Marked as helpful
  • lucigarpe•110
    @lucigarpe
    Submitted 3 months ago

    Social links (HTML + CSS)

    1
    Art0fMind•90
    @art0fmind
    Posted 3 months ago

    the profile picture is not displayed

  • AhmedEhabHM•100
    @AhmedEhabHM
    Submitted 3 months ago

    Blog_preview_card

    1
    Art0fMind•90
    @art0fmind
    Posted 3 months ago

    ✅ What’s Good

    • Well-structured HTML: Semantic tags like <main>, <h1>–<h3>, and <p> are correctly used.
    • Responsive Design Attempt: Usage of @media queries shows intention to support different screen sizes.
    • Nice Font Integration: Use of Google Fonts (Figtree) and font-optical-sizing for better rendering.
    • Visual Hierarchy: Good contrast and element spacing create a readable design.

    ❗️Areas for Improvement

    1. 💥 Broken CSS Link

    <link rel="stylesheet" href="styless.css">
    
    • Typo alert: It should be styles.css instead of styless.css.

    2. 📐 Fixed Width and Height Issues

    .content {
      width: 25%;
      height: 77%;
    }
    
    • Fixed widths/heights like 25%, 77%, and 95% in main and content hurt responsiveness.
    • Better: Use max-width, min-height, or let the content dictate height with height: fit-content;.

    3. 🧱 Improper Heading Usage

    <h1>Learning</h1>
    <h2>Published 21 Dec 2023</h2>
    <h3>HTML & CSS foundations</h3>
    
    • Headings should follow a logical hierarchy: h1 for the main title, h2 for subtitles, and so on.
    • Suggestion: Wrap h1 and h2 in a <header> block or reconsider heading levels.

    4. 🧾 Inline CSS

    <img style="border-radius: 15px; width: 100%;" src="illustration-article.svg">
    
    • Inline styles are not ideal for maintainability.
    • Better: Move this style to the CSS file and assign a class.

    5. 🧩 Media Query Optimization

    @media (min-width: 900px) {
      .content {
        height: fit-content;
      }
    }
    
    • Redundant because .content is already overridden for small screens and doesn’t need to be reset here.
    • Consider merging logic into a mobile-first approach.

    6. 🧪 Color Contrast & Accessibility

    • The yellow #f5d04e background may have low contrast with black or white text.
    • Use a color contrast checker to ensure WCAG compliance.

    🧑‍🏫 Suggestion Summary

    • ✅ Fix CSS file name.
    • ✅ Remove inline styles.
    • ✅ Use mobile-first design.
    • ✅ Replace fixed height/width with fit-content, max-width, or clamp().
    • ✅ Improve semantic structure.
    • ✅ Add alt text to all images for accessibility.
  • Berat521•10
    @Berat521
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Bu projeyi yapmak benim için gurur verici.Bir dahaki sefere animasyon olurdu

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

    CSS 'de zorlandım ama AI sayesinde bişiler yapabildim

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

    Tasarım tarafında kesin alırdım

    CSS Responsive ile mobile uyum

    1
    Art0fMind•90
    @art0fmind
    Posted 3 months ago

    not bad but could do better, also if you use display: flex; in a parent element (eg: body) if this parent contains only one child element then this one is easily centered by doing margin: auto; and also without forgetting to set the height of body to 100vh.

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