Submitted over 1 year ago

HTML, CSS, FlexBox

Irvna•10

@Irvna

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Tive dúvidas na questão do posicionamento vertical.

Community feedback

Gabriel Teixeira da Silva•50
@Gabrielbsb21Posted over 1 year ago
Bom momento, Irvna. O projeto ficou bacana, tenho apenas algumas ressalvas

1 - Deixar o html mais semantico, na div com a classe container, voce poderia usar uma tag main;

2 - na div classe informacao poderia usar uma tag section;

3 - Voce fez certo em usar o display flex na div container;

4 - Na div informacoes voce poderia usar tambem para ser mais facil posicionar os elementos e o espacamento, para os itens ficar posicionado na vertical, basta apenas usar o flex-direction: column;

5 - E nos elementos h1 e paragrafo, voce poderia englobar ambos em uma div, e aplicar um display flex para posicionar e aplicar um espacamento;

6 - Acho que nao tem necessidade da tag br tambem.

No mais, o projeto ficou bem bacana. Qualquer coisa estou a disposicao para ajudar.
Marked as helpful
0
C H A R A N 🎯•2,670
@0xabdulPosted over 1 year ago
Hello Irvna Developer well congratulations on successfully completing the QR code component and A Little bit suggestions for improve your I give the solution to solve the Accessibility reports

Solution 📌

IN HTML 📃 :

I M A G E S 📸

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>

LANDMARK 🚀

The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.

To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements

Note This Elements are don't sikp

semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..

non- semantic elements : <div> , <span> ect ...

for easy way to clear the Accessibility reports using non semantic elements Ex :

<body> <div class="container" role="main"> /html code goes here : 📃 </div> </body>

Or

using semantic elements

Ex :

<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>

IN CSS 🎨 :

.informacoes{ Width:350px; }

I Hope you find the solution and it's useful comment for you your QR Code component project is Awesome Finnally Happy Coding Developer 😊
0

Please log in to post a comment

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