Desenvolvimento de um Listicle sobre aquilo que mais gosta.
Os alunos devem definir um tema de interesse e criar uma página do tipo "Listicle". Uma Listicle é um artigo que consiste em uma posts com textos e imagens sobre um tópico. Exemplo: "10 coisas que você não sabia sobre cachorros". A imagem a seguir mostra um snapshot de uma página exemplo com o layout a ser seguido.
- Para que possamos facilmente expandir nossa Listicle com novos itens (posts), cada entrada deve estar definida por um objeto JavaScript/JSON (a escolha do aluno)
- A adição de novos posts ao DOM também deve ser feita de forma automatizada com JavaScript
- Banner tem que conter imagem
- Foto do(a) autor(a) com overlap no banner
- A fonte é Roboto Slab (https://fonts.google.com/specimen/Roboto+Slab) com fallback para serif na cor darkslategray
- Títulos de post têm fonte 24pt e subtítulos de 16pt
- O banner tem altura 200px com preenchimento (padding) de 20px em cada lado
- a imagem tem 100px de altura
- Seção principal centralizada com 66,76% de largura para conteúdo
- Cada post (área retangular) tem 25px de padding no topo, 15px na direita, 10px abaixo e 15px à esquerda
- Cada post tem margem de 20px em cima e embaixo, e 10px à direita e esquerda
- Fazer a página ser responsiva para ficar legível em telas pequenas (<600px)
- Implementar exatamente os mesmos estilos e fontes
- Gerar uma versão 2 com posts na horizontal usando flexbox e 100% de largura para conteúdo
- Crie um repositório com o nome ine5646-tarefa1 para sua conta Github
- Desenvolva a página nesse diretório/repositório, mantendo o Github atualizado
- Ao concluir, tirar um snapshot (dica: extensão Fireshot do Chrome gera snapshots contínuos) e enviar no Moodle
- A página deve ficar na conta Github do aluno, acessível pelo Github Pages
- Entrega até dia 11-setembro
- Instruções para criação de uma conta Git e habilitação do Github Pages: https://pt.wikihow.com/Criar-uma-Conta-no-GitHub
- Instruções para habilitar Github Pages: https://docs.github.com/pt/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
Bom coding! 😄