Skip to content
OverviewSolutions
19
Comments
89
Mennatallah Hesham
@Mennatallah-Hisham

All comments

  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted about 1 year ago

    Hi Vijender Kumar,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    SEO

    • you can add meta description for better SEO, it provides a summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    1
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted about 1 year ago

    Hi Shiva,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    IMAGE

    • when the image is set as a background, it wont be accessible for assistive technology users so it is better to use <img src="" alt=""/>
    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi vkomerystyi,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    SEO

    • you can add meta description for better SEO, it provides a summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi nikhil-shanbhag,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    1
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi Creative-Pixel-Studios,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    Spacing

    • you can add margin-bottom:1rem to .container instead of using <br>

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi Xxavier,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi Praveen,

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • you can improve your HTML markup by using semantic HTML, they are meaningful tags that convey the meaning (semantics) of the content within them.

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    IMAGE

    • you can use <picture> element to change the image. the browser will choose the best match and display it.
      <picture>
    <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
    <source media="(min-width:650px)" srcset="./images/image-product-desktop.jpg">
    <img src="./images/image-product-desktop.jpg" alt="Gabrielle Chanel perfume" class="product__img">

  </picture>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="Gabrielle Chanel perfume"

    Accessibility

    • add aria-hidden="true" to the cart icon, it is used to hide decorative content/images/icons from screen readers which improves their experience
    • check how I made the price section more accessible here

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi Bhoomika,

    You did great 👍

    Here are some suggestions to improve your code:

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi Erfan ,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi xwhitedev,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    Image

    • setting the image as a background will make it not accessible for screen reader users. it is better to use the <img src="" alt=""/> tag to make it accessible to all users.

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    1
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi Pedini,

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    INTERNAL CSS

    • it is better to use external css over internal css as your project grows you may suffer from some of internal css disadvantages such as:
    1. Repetition in HTML files.
    2. Increased file size.
    3. Reduced code reusability.
    4. Limited style management across pages.

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi Paweł,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi MrByford,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • you did great in using semantic html but i suggest you read more about the difference between <srticle> & <section>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi Alwin ,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi Gerardo,

    I can see your effort, You did great 👍

    Here are some suggestions to improve your code:

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Victor Crest</h1>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users
    <img src="" alt=" Headshot of Victor Crest"

    Accessibility

    • you can use aria-labelledby to define a name/relation between the number and their titles for screen readers
    <p aria-labelledby="title">80k <p>
<p id="title"> follower </p>

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    hope you find this helpful. Happy Coding

    Marked as helpful
    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi Aman kwafrifa,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    INTERNAL CSS

    • it is better to use external css over internal css as your project grows you may suffer from some of internal css disadvantages such as:
    1. Repetition in HTML files.
    2. Increased file size.
    3. Reduced code reusability.
    4. Limited style management across pages.

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    0
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi Exequiel Arco,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    1
  • Mennatallah Hesham•1,470
    @Mennatallah-HishamPosted over 1 year ago

    Hi prasanth,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:
    Centered Card

    • you can center the card both horizontally and vertically using flexbox
    .parent{

display:flex;
justify-content:center;
align-items:center;

}

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
<div>
</div>
</main>

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    ALT

    • images should have descriptive alt text, which is important for SEO and screen reader users,alt="QR code linking to Frontend Mentor challenges"

    INTERNAL CSS

    • it is better to use external css over internal css as your project grows you may suffer from some of internal css disadvantages such as:
    1. Repetition in HTML files.
    2. Increased file size.
    3. Reduced code reusability.
    4. Limited style management across pages.

    SEO

    • you can add meta description for better SEO, it provides a brief summary of a web page
    <meta name="description" content="..........."/>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    0