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

Order-summary-card

WioletaMen 130

@WioletaMen

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


All feedbacks are welcome, thank you.

Community feedback

@0xabdul

Posted

Hello Developer well Congrats on Successfully finished the Order summary component

  • A 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>
  • I Hope you find the solution and it's useful for you your Order summary component project is Awesome . Finally Happy Coding Developer
0
Adriano 310

@adriano-wb

Posted

Este código parece estar bem escrito e organizado. No entanto, aqui estão algumas práticas recomendadas que você pode seguir para tornar o seu código ainda melhor:

  • Adicione comentários para fins de documentação: é sempre uma boa prática adicionar comentários em seu código para descrever o que cada parte faz. Isso ajuda outros desenvolvedores a entender seu código e facilita a manutenção futura.

  • Use classes e IDs significativos: as classes e IDs usados em seu HTML devem ser descritivos e significativos, para que outros desenvolvedores possam entender facilmente a função de cada elemento.

  • Use imagens com tamanhos otimizados: imagens pesadas podem retardar a velocidade de carregamento da página, portanto, é uma boa prática usar imagens com tamanhos otimizados para garantir que sua página carregue rapidamente.

  • Use a tag <header> para o cabeçalho do seu documento: você pode envolver o título da sua página em uma tag <header> para indicar que é o cabeçalho da página.

  • Adicione uma descrição ao ícone da aba: você pode adicionar uma descrição ao ícone da aba usando a tag <title> para tornar sua página mais acessível.

Espero que essas práticas recomendadas ajudem a tornar seu código ainda melhor.

0

@Daniel-Bilodid

Posted

Hi, my congratulations you did a great job 🎉

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

🔹 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