Desafio #1: HTML#8
Conversation
| <p>Hoje me desafio a aprender e desenvolver habilidades para ser destaque no mercado. </p> | ||
| <hr> | ||
|
|
||
| <figure> |
There was a problem hiding this comment.
Nayara, cada imagem com sua legenda própria deverá ficar agrupada dentro de um elemento <figure> separadamente. É possível sim agrupar várias imagens dentro do figure, mas somente quando elas compartilharem da mesma legenda. Link de referência.
There was a problem hiding this comment.
| <figure> | |
| <figure> | |
| <img src="images/Service1.png" alt="WebSite" width="50" height="50"/> | |
| <figcaption> | |
| <h4>WebSites</h4> | |
| <p>Blablablá</p> | |
| </figcaption> | |
| </figure> | |
| <figure> | |
| <img src="images/Service2.png" alt="Templates" width="50" height="50"/> | |
| <figcaption> | |
| <h4>Templates</h4> | |
| <p>balabalabalabalabala</p> | |
| </figcaption> | |
| </figure> | |
| <figure> | |
| <img src="images/Service3.png" alt="Temas Wordpress" width="50" height="50"/> | |
| <figcaption> | |
| <h4>Temas Wordpress</h4> | |
| <p>vamos estudar </p> | |
| </figcaption> | |
| </figure> |
| <div id="email">nayaracn@outlook.com</div> | ||
| <p>+55 22 999587526</p> | ||
| <p>Mídias</p> | ||
| <hr> |
There was a problem hiding this comment.
Semanticamente o <hr> tem a função de separar áreas que abordam conteúdos com temas diferentes e não deveria ser usado apenas por questões visuais. Referência: https://www.w3schools.com/tags/tag_hr.asp
|
|
||
| <body><!--aparece na pagina--> | ||
|
|
||
| <main> |
There was a problem hiding this comment.
O <main> deve ser utilizado para colocar literalmente o conteúdo principal, não devendo ele conter <header>, <footer> ou nenhum outro conteúdo que se repete ao longo do site. Referência: https://www.w3schools.com/tags/tag_main.asp
There was a problem hiding this comment.
| <main> | |
| <header> | |
| </header> | |
| <main> | |
| </main> | |
| <footer> | |
| </footer> |
| </ul> | ||
| </nav><!--</div>--> | ||
| </header> | ||
| <div id="home"> |
There was a problem hiding this comment.
Nesse caso aqui você pode usar apenas o <section>, já que o <div id="home"> está sem nenhum valor semântico e apenas exercendo a função que o <section> já está executando.
Obs: isso vale para todos os outros blocos onde você usou a mesma estrutura. O <section> serve exatamente para delimitar essas áreas de conteúdo e ele pode ser estilizado via CSS da mesma forma que o <div>, então você não precisa de ambos.
There was a problem hiding this comment.
Esse <id = "home"> apareceu por conta do css que ia colocar, mas realmente não consegui me desfazer dele. Ele é usado na hora que mesclo as fotos da section home.
Obs.: eu tenho dúvida sobre o que fiz ainda, tem a ver com a semântica, mas deu certo depois de quebrar um pouco a cabeça.
| <p>Teste programador </p> | ||
| </figcaption> | ||
|
|
||
| <figcaption> |
There was a problem hiding this comment.
Como expliquei mais acima, não se deve colocar mais de uma legenda dentro de um elemento <figure> e sim separar cada grupo de foto + legenda dentro de um <figure> individual.
| <a href="images/Portfolio03.png"><img src="images/Portfolio03.png" width="100"/></a> | ||
|
|
||
| <figcaption> | ||
| <h4>Thumbnail label</h4> |
There was a problem hiding this comment.
Semanticamente não faz muito sentido utilizar um elemento de título dentro de uma legenda de imagem. As legendas são itens secundários e complementares às imagens.
Obs: isso vale para todas as outras <figcaption> com a mesma estrutura.
| <figcaption>Joana D'arc</figcaption> | ||
| </figure> | ||
|
|
||
| <figure> |
There was a problem hiding this comment.
Não considero necessário usar o <figure> para imagens que não são fotografias e que não terão legendas. Fica a seu critério, porém eu não usaria. 💃
There was a problem hiding this comment.
Neste ponto, pensei que ficaria a fotografia da "Dona do site", pois é uma apresentação na section ''sobremim''.
| <figure> | ||
| <a href="home.html"><img src="images/icon-facebook.png" alt="facebook" width="50"/></a> | ||
|
|
||
| <a href="home.html"><img src="images/icon-instagram.png" alt="instragram" width="50"/></a> |
There was a problem hiding this comment.
*instagram tá escrito errado no alt 🙈
| <p>Hoje me desafio a aprender e desenvolver habilidades para ser destaque no mercado. </p> | ||
|
|
||
| <h3>Habilidades</h3> | ||
| <!-- a barra de progresso será mostrada no css e/ou javascript --> |
There was a problem hiding this comment.
Dá pra fazer também usando o elemento <progress>, dá uma conferida: https://www.w3schools.com/tags/tag_progress.asp
| <h2>Contato</h2> | ||
| <p>Hoje me desafio a aprender e desenvolver habilidades para ser destaque no mercado. </p> | ||
| <hr> | ||
| <div id="email">nayaracn@outlook.com</div> |
There was a problem hiding this comment.
Você pode facilitar a vida do teu usuário colocando seu email clicável.
| <div id="email">nayaracn@outlook.com</div> | |
| <a href="mailto:nayaracn@outlook.com">nayaracn@outlook.com</a> |
| <p>Hoje me desafio a aprender e desenvolver habilidades para ser destaque no mercado. </p> | ||
| <hr> | ||
| <div id="email">nayaracn@outlook.com</div> | ||
| <p>+55 22 999587526</p> |
There was a problem hiding this comment.
Mesma coisa do email também vale para telefones.
Referência: https://www.w3schools.com/tags/tag_a.asp
| <p>+55 22 999587526</p> | |
| <a href="tel:+5522999587526">+55 22 999587526</a> |
2 participants
No description provided.