Desafio1-WomakersCode-Grupo5 #10
Conversation
| <!----------------------------------MENU TOPO---------------------------------------------> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <header> |
There was a problem hiding this comment.
@tamiresguesdri, use a tag <header> dentro da tag <body>. O <head> usamos para definir as meta tags e importação de arquivos CSS, incluir o título da nossa página.
| <header> | |
| <body> | |
| <header> | |
| <figure> | |
| <img src="" alt="ImagemBorboletaWomakersCode"/> | |
| </figure> | |
| <nav class="menu-topo"> | |
| <ul> | |
| <li> Home </li> | |
| <li> Serviços </li> | |
| <li> Portfólio </li> | |
| <li> Sobre mim </li> | |
| <li> Contato </li> | |
| </ul> | |
| </nav> | |
| </header> | |
| </body> |
| </head> | ||
|
|
||
| <body> | ||
| <title>Bem Vind@</title> |
There was a problem hiding this comment.
| <title>Bem Vind@</title> | |
| <h1>Bem Vind@</h1> |
A tag <title> a gente usa apenas no <head> para representar o título da nossa página (que aparece bem lá no topo do nosso browser) :) Aqui te dou a sugestão em usar a tag <h1> para definição de título.
| <h2>Curabitur Iaculis</h2> | ||
| <h3>texto 3 linhas</h3> | ||
| <!-------------------------------------MENU PRINCIPAL-----------------------------------------> | ||
| <br> |
There was a problem hiding this comment.
| <br> | |
| <br> <!-- Evite o uso de <br /> --> |
Evite ao máximo o uso da tag <br /> para quebra de linha ou aumento de espaço entre os elementos. Caso o seu objetivo seja quebra de texto use a tag <p> que é específica para parágrafos. Se deseja obter um espaçamento entre uma seção ou outra use a propriedade CSS margin.
| <!--------------------------------------INÍCIO MENU MEUS TRABALHOS----------------------------------> | ||
| <nav class="meus-trabalhos"> | ||
| <h1>Meus Trabalhos</h1> | ||
| <ul id="menu-meus-trabalhos"> |
There was a problem hiding this comment.
| <ul id="menu-meus-trabalhos"> | |
| <ul class="menu-meus-trabalhos"> |
Dica: em vez de usar id's, use classes. Id é recomendável usar para 1x para referenciar algum bloco de elemento, por exemplo. Classes você pode repetí-las em diversos momentos.
ID - Uma única por página. Identificador: #
CLASS - Múltiplas por elemento/página. Identificador: .
|
|
||
|
|
||
| <!--------------------------------INÍCIO HABILIDADES--------------------------------------> | ||
| <section class="habilidades"></section> |
There was a problem hiding this comment.
| <section class="habilidades"></section> | |
| <section class="habilidades"> | |
| <h4>Habilidades</h4> | |
| <ul> | |
| <li>Javascript</li> | |
| <li>HTML e CSS</li> | |
| <li>CSS</li> | |
| <li>WordPress</li> | |
| </ul> | |
| </section> |
Coloque o conteúdo que você desenvolveu dentro da section Habilidades. A tag <title> não usamos para definir título de algum texto em html, apenas dentro da tag <head> como título da nossa página (que aparece lá em cima do nosso browser). Se você quer usar alguma tag que permita configurar título na sua página você pode usar o h1, h2, h3, h4, h5. Como no layout o título aparece em um tamanho menor usei o <h4> como exemplo.
Em vez de você usar o <p> para definir uma lista use as tags <ul> e <li> específicas para criação de listas.
| <br> | ||
| <li> | ||
| <a href="#"> | ||
| <figure> |
There was a problem hiding this comment.
| <figure> | |
| <img src="facebook.png" alt="Facebook" title="Facebook" /> |
A tag <figure> a gente usa para fazer marcação nas imagens. Então ele especifica que quando você usa o <figure> está informando que dentro dela terá uma imagem. E a tag <figcaption> serve para indicar uma legenda para ela.
Nesse caso de listar os ícones das redes sociais não há necessidade de usar a tag <figure>. A gente usa mais para destacar fotos e inserir legendas.
Referência: https://www.w3schools.com/tags/tag_figure.asp
Tá tudo bem, Tamires :) O importante é tentar, sempre! Parabéns pelo seu esforço e dedicação!
| <br> | ||
|
|
||
| <li> | ||
| <a href="#"> |
There was a problem hiding this comment.
| <a href="#"> | |
| <a href="#"> | |
| <img src="google.png" alt="Google +" title="Google +" /> | |
| </a> |
| </nav> | ||
| <br> | ||
| <h1>Quem sou eu</h1> | ||
| <img src="" alt="foto-tamires"/> |
There was a problem hiding this comment.
| <img src="" alt="foto-tamires"/> | |
| <figure><img src="" alt="foto-tamires"/></figure> | |
| <figcaption>Tamires Rodrigues</figcaption> |
Se aqui você pretende usar o <figcaption> a sua imagem precisa usar o <figure> para manter a semântica.
| <figure> | ||
| <img src="" alt="templates"> | ||
| </figure> | ||
| <h2><a href="#">Templates</a></h2> |
There was a problem hiding this comment.
| <h2><a href="#">Templates</a></h2> | |
| <a href="#">Templates</a> |
Não é necessário incluir uma tag de hipertexto e link juntos. Neste caso você pode manter a tag <a> depois manipular via CSS o tamanho dela ( usando a propriedade font-size).
No description provided.