Alaa Mekibes
@alaa-mekibesAll comments
- @Kaleab-TarikuSubmitted about 2 months ago@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;
insidebody
to get full-screen.
Your work is outstanding, stay consistent and keep shining!
0 - @Bahaae1Submitted about 2 months ago@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📚:
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 - P@JGeddSubmitted about 2 months ago@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 - @zeeguSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
Development
- Imported image according to Mobile/Desktop, considering responsive layout
max-inline-size: 100%;
block-size: auto;
- Applied responsive padding values which applys to Ltr/Rtl case
padding-inline-end: 3rem;
- Tried SCSS writing method for the first time
Design
- Added a cancellation line to clearly indicate the discount price
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 :)
@alaa-mekibesPosted about 2 months agoWell 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 helpful1 - P@EnkiEnki77Submitted about 2 months agoWhat 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
@alaa-mekibesPosted about 2 months agoWell 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 - @muhamed453Submitted about 2 months ago@alaa-mekibesPosted about 2 months ago
Well done 🎉
-
Use
min-height: 100vh;
inside thebody
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 -
- @hitriy-dmitriySubmitted about 2 months ago@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 helpful0 - @luissrsanSubmitted about 2 months ago@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 helpful0 - P@SKszymekSubmitted about 2 months agoWhat 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?
@alaa-mekibesPosted about 2 months agoWell 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 helpful1 - P@rainbowsurfer137Submitted about 2 months agoWhat 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!
@alaa-mekibesPosted about 2 months agoWell 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 - @shagunsingh222Submitted about 2 months ago@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 helpful1 - @basSluiterSubmitted about 2 months agoWhat 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
@alaa-mekibesPosted about 2 months agoWell 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 - P@matt-l-82Submitted about 2 months ago@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 - @zaeemarshad1122Submitted about 2 months agoWhat 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
@alaa-mekibesPosted about 2 months agoGreat 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 helpful0 - @raymondkembsSubmitted about 2 months ago@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📚:
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 helpful1 - @PandiyanBTSubmitted about 2 months agoWhat 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
- Faced dew issues with alignment of the flex box and then fixed those with gap and padding.
- Let me know your feedback so that i can improve myself
@alaa-mekibesPosted about 2 months agoWell 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 - @zaeemarshad1122Submitted about 2 months agoWhat 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.
@alaa-mekibesPosted about 2 months agoWell 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 helpful0 - @aleks540Submitted about 2 months ago@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