Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page using CSS Grid

@ShnawMusty

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


These small icons don't want to show , don't know why :'(

Community feedback

@0xabdul

Posted

**Hello Developer well congrats on successfully completed the results summary component **

  • A Some suggestions for improve your code
  • In Html 📃:
  • I M G 📸
  • whenever using the img tag put the alt attribute
  • Ensure all informative <img> elements have short, descriptive alternate text and all decorative <img> elements have empty alt attributes (e.g. alt="").
  • There are three main ways to add alternate text to an image: Using an alt attribute i.e. <img alt="drawing of a cat" src="..."> Using an aria-label i.e. <img aria-label="drawing of a cat" src="..."> Using an aria-labelledby attribute i.e. <img arialabelledby="someID" src="...">
  • Or
  • Alt Must be included in IMG TAG
<img src="icon.png" alt="icon"></img>
  • HEADING ⚠️
  • The page must contain at least one h1 element identifying and describing the main content of the page. An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
  • So fix them
  • Ex :
<h1> </h1>
<h2> </h2>
<h3> </h3>
  • Note : we use the headings line by line in order way
  • I Hope you find the solution and it's useful comment for you your results summary component project is Awesome Finnally Happy Coding Developer
0

@Daniel-Bilodid

Posted

Hi, my congratulations you did a great job 🎉

𝐒𝐨𝐦𝐞 𝐭𝐢𝐩𝐬 𝐟𝐨𝐫 𝐲𝐨𝐮𝐫 𝐜𝐨𝐝𝐞 🛠

🔹 About icons

Try to change your path like this

<img src="../assets/images/icon-memory.svg"/>

or

<img src="../../assets/images/icon-memory.svg"/>

🔹 And you need to add an alt tag to your images

📚 The alt attribute contains a textual description of the image, which is optional but incredibly useful for accessibility

I hope it was helpful, you are great, keep up the good work 👍

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord