Mennatallah Hesham
@Mennatallah-HishamAll comments
- @thakurvijendarSubmitted 10 months ago@Mennatallah-HishamPosted 10 months 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 helpful1 - @ShivaTeja1805Submitted 10 months ago@Mennatallah-HishamPosted 10 months 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 helpful0 - @vkomerystyiSubmitted 10 months ago@Mennatallah-HishamPosted 10 months 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 - @nikhil-shanbhagSubmitted 10 months ago@Mennatallah-HishamPosted 10 months 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 - @Creative-Pixel-StudiosSubmitted 12 months ago@Mennatallah-HishamPosted 12 months 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 helpful0 - @Xxavier14Submitted 12 months ago@Mennatallah-HishamPosted 12 months 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 helpful0 - @PraveenMahraSubmitted 12 months ago@Mennatallah-HishamPosted 12 months 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 helpful0 - @bhoomikahb2001Submitted 12 months ago@Mennatallah-HishamPosted 12 months 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 - @The9ighTSubmitted 12 months ago@Mennatallah-HishamPosted 12 months 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 helpful0 - @xwhitedevSubmitted 12 months ago@Mennatallah-HishamPosted 12 months 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 helpful1 - @pedinistarSubmitted 12 months ago@Mennatallah-HishamPosted 12 months 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:
- Repetition in HTML files.
- Increased file size.
- Reduced code reusability.
- 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 - @Pawel-Swiercz02Submitted 12 months ago@Mennatallah-HishamPosted 12 months 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 helpful0