Skip to content
OverviewSolutions
20
Comments
138

Alaa Mekibes

@alaa-mekibesOran, Algeria1,540 points

Computer science student

I’m currently learning...

◾️Front-end & Backend : Html & css Javascript OOP Mysql & Java

Latest solutions

View more solutions

Latest comments

  • Alaa Mekibes•1,540
    @alaa-mekibesPosted about 2 months ago

    Well done 🎉

    • Use Only One <h1> Per Page

    Maintain a proper heading structure, using <h1>, <h2>, and <h3> in a hierarchical manner. This improves both organization and SEO.

    • Use semantic HTML elements for better structure and accessibility. For example:
    <body>
    <main>
        <!-- Your code -->
    </main>
</body>
    • Never Leave the alt Attribute Blank

    Always provide a meaningful alt description for images. This improves accessibility and contributes to better SEO.

    • Add min-height: 100vh; inside body to get full-screen.

    Your work is outstanding, stay consistent and keep shining!

    0
  • Alaa Mekibes•1,540
    @alaa-mekibesPosted about 2 months ago

    Great work,

    • Update Your README File

    Start by using the provided README template included in the starter file. Customize it to enhance clarity and professionalism.

    • Never Leave the alt Attribute Blank

    Always provide a meaningful alt description for images. This improves accessibility and contributes to better SEO.

    • Use semantic HTML elements for better structure and accessibility. For example:
    <body>
    <main>
        <!-- Your code -->
    </main>
</body>

    <section aria-labelledby="ingredients-title">
<h2 id="ingredients-title">Ingredients</h2>
</section>

<article>
<h2>Ingredients</h2>
</article>

    More info📚:

    aria-labelledby

    HTML section elements are lie sorta of

    • I noticed you switched the background colors between the Preparation Time card and the body.

    Keep up the incredible work, your dedication is inspiring!

    0
  • Alaa Mekibes•1,540
    @alaa-mekibesPosted about 2 months ago

    Great work, just..

    • Use Only One <h1> Per Page

    Maintain a proper heading structure, using <h1>, <h2>, and <h3> in a hierarchical manner. This improves both organization and SEO.

    Keep up the incredible work, , your dedication is inspiring!

    0
  • zeegu•310
    @zeeguSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Development

    1. Imported image according to Mobile/Desktop, considering responsive layout
    • max-inline-size: 100%;
    • block-size: auto;
    1. Applied responsive padding values which applys to Ltr/Rtl case
    • padding-inline-end: 3rem;
    1. Tried SCSS writing method for the first time

    Design

    1. Added a cancellation line to clearly indicate the discount price
    What challenges did you encounter, and how did you overcome them?

    How to manage git on another computer

    Had to finish what I was doing on the desktop with my laptop. So I studied how to use Git and GitHub. Now I know how to manage repositories remotely :)

    Product Preview Card

    2
    Alaa Mekibes•1,540
    @alaa-mekibesPosted about 2 months ago

    Well done 🎉

    • Use css variables to improved maintainability like this:
    :root {
    --bg-color: hsl(210, 46%, 95%);
    /* Add your other colors here */
}

body {
    background-color: var(--bg-color);
    /* Other properties */
}
    • You can add an image for desktop and how to change it for mobile using the <picture> tag.
    <picture>
<!-- Here Add all the images with small screen -->
         <source
                    media="(max-width: 375px)"
                    srcset="images/image-product-mobile.jpg"
                    >
<!-- Here Add the default image -->
         <img src="images/image-product-desktop.jpg" alt="Product image">
</picture>

    Your work is outstanding, stay consistent and keep shining!

    Marked as helpful
    1
  • P
    Austin L Layman•120
    @EnkiEnki77Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I learned how to style list markers and learned about tables and how to add borders to the rows of them.

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

    The things I learned were the challenges. I overcame them through google and MDN

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

    None

    Recipe page

    2
    Alaa Mekibes•1,540
    @alaa-mekibesPosted about 2 months ago

    Well done 🎉

    • Update Your README File

    Start by using the provided README template included in the starter file. Customize it to enhance clarity and professionalism.

    • Set the padding-top of the card to 0 for the mobile version.

    Great job so far, keep pushing forward, you're doing amazing!

    1
  • Alaa Mekibes•1,540
    @alaa-mekibesPosted about 2 months ago

    Well done 🎉

    • Use min-height: 100vh; inside the body to get full-screen.

    • Use semantic HTML elements for better structure and accessibility. For example:

    <body>
    <main>
        <!-- Your code -->
    </main>
</body>
    • Use css variables to improved maintainability like this:
    :root {
    --bg-color: hsl(210, 46%, 95%);
    /* Add your other colors here */
}

body {
    background-color: var(--bg-color);
    /* Other properties */
}
    • Avoid Using px Unless Necessary

    Use relative units like rem or em for sizing instead of px. This ensures better scalability and responsiveness.

    More Info:

    Rem in CSS: Understanding and Using rem Units

    • Use Only One <h1> Per Page

    Maintain a proper heading structure, using <h1>, <h2>, and <h3> in a hierarchical manner. This improves both organization and SEO.

    • Change the font family. All detail are in guide readme.

    Amazing effort, , continue your great work and stay motivated!

    1
View more comments