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

Landing page com html5, css3 e flexbox.

@Duquewdev

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Olá, pessoal!

Comecei a realizar desafios há pouco tempo e não tenho certeza se estou indo bem.

Com base no desafio enviado...

O que preciso melhorar? Em que preciso focar?

Agradeço qualquer feedback construtivo!

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Fala Thais, tudo bem? Parabéns pelo desafio!

Sua solução ficou mto boa, a única coisa que eu mudaria é a estrutura do HTML, limpando um pouco o código tirando algumas divs. Por exemplo, você pode segurar todo conteúdo em um bloco só usando (<main> ou <div>) nesse caso vamos usar <main> por que é uma tag semantica. Se você notar, nem precisa adicionar nenhum div além da principal pra segurar o conteúdo (img, h1 e p). A estrutura ideal e mais limpa possível pra esse desafio é essa aqui:

<body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>

Depois me diz se foi útil 😎

👋 Espero ter ajudado e continue no foco!

0

@Duquewdev

Posted

@correlucas Oii, Lucas. Tudo ótimo e você?

Obrigada!

Excelente. Olhando pro meu código... rs Excesso de div. Agradeço mesmo pela dica!

1
Lucas 👾 104,420

@correlucas

Posted

@Duquewdev que bom que ajudou! Espero ver mais projetos seus 👏

0

@Duquewdev

Posted

@correlucas Com certeza. Já alterei o código no github e vou iniciar agora o desafio de criar uma "Clipboard landing page".

Agradeço a força!!

1
Lucas 👾 104,420

@correlucas

Posted

@Duquewdev Eu vi que vc arrumou essa solução aqui e ficou faltando só o background principal, pra pegar as cores ou vc usa o arquivo style-guide.md ou entao pode usar a extensao do Chrome chamanda Colorzilla pra copiar as cores com um conta gotas copiando o codigo hex ou hsl.

0

@jlmunozfdev

Posted

Creo que tienes un exceso de div's, al principio cuesta no utilizarlos, pero te vendría bien utilizar HTML semántico para engoblar ciertas cosas, por ejemplo quedaría más o menos así:

 <section class="container">
   <div class="div__card">
        
        <img src=".assets/image/image-qr-code.png" alt="qr">

         <h1 class="card__title"> Improve your front-end skills by building projects</h1>

          <p class="card__paragraph">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level.</p>
        
   </div>
</section>

Puedes ayudarte de este artículo que te dejo aquí sobre HTML semántico. Que estés bien.

0

@Duquewdev

Posted

@jlmunozfdev Muito obrigada pela dica. Vou estudar e praticar bastante para trazer desafios mais semânticos.

1

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