Skip to content
OverviewSolutions
20
Comments
138
Alaa Mekibes
@alaa-mekibes

All 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
  • Alaa Mekibes•1,540
    @alaa-mekibesPosted about 2 months ago

    Good job, just a few points to fix:

    • Update Your README File

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

    • Use semantic HTML elements for better structure and accessibility. For example:
    <body>
    <main>
        <!-- Your code -->
    </main>
</body>
    • 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 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 */
}
    • Use media query to make your layout responsive.

    Your work is outstanding, stay consistent and keep shining!

    Marked as helpful
    0
  • 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.

    • Never Leave the alt Attribute Blank

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

    • 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 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 */
}

    • Add all your divs under card_container to set background-color and border-radius.

    • Center your layout using Flexbox or Grid:

    body {
display: grid;
place-items: center;
min-height: 100vh;
}

    body {
display: flex; 
justify-content : center; 
align-items : center; 
min-height: 100vh;
}

    I recommend focusing on learning either the grid or flexbox method. Mastering one of them will make you feel much more confident and comfortable moving forward.

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

    Marked as helpful
    0
  • P
    SKszymek•170
    @SKszymekSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    The coding is of course not hard but this is my first time working with figma design files so It's some new experience.

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

    Design files in figma. I need to practice working with that stuff.

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

    Can somebody tell me how to center the component in this case like in the example. Is there any information in figma design file which value of margin I should use?

    QR-CODE-COMPONENT HTML/CSS

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

    Well done 🎉

    • To center your design, use Flexbox or Grid:
    body {
display: grid;
place-items: center;
min-height: 100vh;
}

    body {
display: flex; 
justify-content : center; 
align-items : center; 
min-height: 100vh;
}

    min-height: 100vh;: to get full screen.

    I recommend focusing on learning either the grid or flexbox method. Mastering one of them will make you feel much more confident and comfortable moving forward.

    Marked as helpful
    1
  • P
    rainbowsurfer137•80
    @rainbowsurfer137Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I’m proud of the clean structure of the HTML and how I utilized semantic elements, making the code more readable and accessible. I also focused on accessibility, using ARIA attributes to improve the user experience for people who rely on screen readers.

    I’d make the CSS more modular by breaking it into smaller files for easier maintenance and utilize more flexible units like percentages and vw/vh for width and heigh for a more responsive site.

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

    There were two areas that proved challenging. The nutritional table took a little work to get right and deciding what media queries to add to kept the code simple but also resulted in the correct responsiveness in comparison to the example design.

    I experimented with different layout options until I found the solution that most resembled the table in the example. And for the media queries I kept the layout simple for smaller screens by adjusting widths, font sizes, and image sizes to make sure the design worked well on both mobile and desktop.

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

    Any advice would be much appreciated!

    Responsive Recipe Page using Flexbox

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

    Well done

    • 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 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 */
}

    Amazing effort, continue your great work and stay motivated!

    0
  • 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.

    • 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.

    • 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>
    • Center your layout using Flexbox or Grid:
    body {
display: grid;
place-items: center;
min-height: 100vh;
}

    body {
display: flex; 
justify-content : center; 
align-items : center; 
min-height: 100vh;
}

    I recommend focusing on learning either the grid or flexbox method. Mastering one of them will make you feel much more confident and comfortable moving forward.

    Keep up the incredible work, your dedication is inspiring!

    Marked as helpful
    1
  • basSluiter•50
    @basSluiterSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    the responsiveness , next time i make the button work.

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

    had a overflow issue on a div. turns out it was the grid of 1fr set it to auto and my whitespace issue went away.

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

    how to place the card to the center with grid. now i did it with flexbox

    Product Preview card

    1
    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.

    • Use semantic HTML elements for better structure and accessibility. For example:
    <body>
    <main>
        <!-- Your code -->
    </main>
</body>
    • You can center your card using Flexbox or Grid:
    .card {
display: grid;
place-items: center;
}

    .card {
display: flex; 
justify-content : center; 
align-items : center;
}

    You're doing excellent, keep building on your great progress!

    0
  • 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.

    • Never Leave the alt Attribute Blank

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

    • 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>

    Fantastic progress, keep going, you're doing brilliantly!

    0
  • Zaeem Arshad•100
    @zaeemarshad1122Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that im learning fast and i would try to improve my skills further

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

    I encountered the cahllenge to give padding to the learning box but it wouldnt apply. It would just cover the whole width so i created a seperate box and centered the <p> Learning</p> in it using Display:flex;

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

    I want help that my mistakes should be pointed out so i can imptove them in my future projects

    Blog preview card

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

    Great work

    • 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 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 */
}

    Impressive work, stay focused and keep excelling!

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

    Good job

    • 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

    • 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.

    Fantastic progress, keep going, you're doing brilliantly!

    Marked as helpful
    1
  • PandiyanBT•40
    @PandiyanBTSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?
    • Understood the concept of flex clearly and learned about the usage of flex-grow, flex-shrink, flex-basis
    • Planning to learn about grid and its functionalities in the upcoming challenges
    What challenges did you encounter, and how did you overcome them?
    • Faced dew issues with alignment of the flex box and then fixed those with gap and padding.
    What specific areas of your project would you like help with?
    • Let me know your feedback so that i can improve myself

    Responsive page built with flex-box

    #pure-css
    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.

    • Use semantic HTML elements for better structure and accessibility. For example:
    <body>
    <main>
        <!-- Your code -->
    </main>
</body>
    • You can Add an image for desktop and how to change it for mobile using the <picture> tag, like this:
    <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>

    You're on the right track, keep up the awesome effort!

    0
  • Zaeem Arshad•100
    @zaeemarshad1122Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the psuedo classes i used and the transition i used and i will try to improve my future projects even better.

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

    I encountered hover problem as i am on mobile, i cant check if the hover statement works or not.

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

    I would appretiate any kind of help. Feel free to let me know about any mistake i made.

    Social links profile

    1
    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.

    • Center your layout using Flexbox or Grid:
    body {
display: grid;
place-items: center;
min-height: 100vh;
}

    body {
display: flex; 
justify-content : center; 
align-items : center; 
min-height: 100vh;
}

    min-height: 100vh;: to get full-screen.

    • You can add your photo as profile pic.

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

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

    Well done

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

    Your work is outstanding, stay consistent and keep shining!

    0