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