Veja online!
💡Veja o exemplo a seguir de como o projeto pode se parecer depois de pronto. Lembre-se que você pode e deve ir além para deixar o projeto com a sua cara e impressionar à todos!
Você deve criar um site que com uma série de informações a respeito do que você aprendeu nos últimos três blocos, estilizado de forma apropriada.
Em outras palavras, uma página de Lessons Learned
;
Lembre-se de verificar sua página no achecker.
- Possuir cor de fundo: rgb(253, 251, 251)
-
A barra deve possuir o ID "cabecalho"
-
O elemento com o id
cabecalho
deve ser fixo no topo da página, com a propriedade top tendo0px
-
O título deve estar dentro da barra e possuir o ID "titulo", além de ser uma tag
h1
- A foto deve ser inserida utilizando uma tag
img
com o ID "minha_foto"
-
A lista deve ser numerada e possuir o ID "licoes_aprendidas"
-
A lista deve possuir 10 itens
-
A lista não deve ser numerada e deve possuir o ID "licoes_a_aprender"
-
A lista deve possuir 10 itens
- O rodapé deve utilizar a tag
footer
e possuir o ID "rodape"
- A configuração desse link deve ser feita para abrir em uma nova aba do navegador
-
A
tag
article
devem ser utilizadas -
O artigo deve ter mais de 300 letras e menos de 600
-
A
tag
aside
deve ser utilizada -
A seção deve ter mais que 100 letras e menos que 300
10 - Torne o seu site mais acessível e melhore seu ranqueamento em mecanismos de busca na Web aplicando os elementos HTML de acordo com o sentido e propósito de cada um deles
-
A página deve possuir um elemento
article
-
A página deve possuir um elemento
header
-
A página deve possuir um elemento
nav
-
A página deve possuir um elemento
section
-
A página deve possuir um elemento
aside
-
A página deve possuir um elemento
footer
- A página deve possuir uma tabela
- Altere
margin
,padding
eborder
dos elementos para ver, na prática, como esses atributos influenciam e melhoram a visualização dos componentes
-
Altere o tamanho da letra
-
Altere a cor da letra
-
Altere o espaçamento entre as linhas
-
Altere o
font-family
-
Utilizar a classe 'lado-esquerdo'
-
Utilizar a classe 'lado-direito'
-
Verificar se os elementos com as classes lado-direito e lado-esquerdo estão posicionados corretamente