Esse é o projeto de introdução aos fundamentos do desenvolvimento Web. Aqui, vamos praticar a estrutura do que faremos pelo curso todo. O objetivo é construir uma página estilizada, e com lista e busca utilizando manipulação de DOM, praticando o conteúdo do módulo com JS:
- Variáveis
- Operadores
- Strings
- Arrays
- Objetos
- Condicionais
- Laços
- Funções
- Funções de Array
- HTML e CSS
- Flex e Grid
- DOM e responsividade
A página consiste em um HTML, ligado a um ou mais arquivos CSS, e um ou mais arquivos JS (recomendamos apenas um de cada, no entanto). O objetivo é conseguir criar uma página estática, depois estilizada, e por fim, dinâmica. A página vai catalogar (ou listar) itens que você escolher, e deve possuir um sistema simples de busca, que recebe um texto, e procura por nomes/títulos que correspondam a este texto.
exemplo.mov
- Tela de listagem com título
- Cabeçalho na página
- Área principal com barra de pesquisa e botão
- Espaço para lista dos itens
- ao menos três itens listados
- Itens listados utilizando manipulação do DOM
- Rodapé na página com identificação
- Barra de pesquisa com alerta se tentar pesquisar com campo em branco
- Clique do botão executa busca entre os itens
- Relatório impresso no console com as informações de cada item
- Nome/título dos itens em letras maiúsculas
- Média numérica calculada e impressa no console
- Verificação de valores booleanos true impressa no console
- Utilização de Grid ou Flex para estilizar
- Atenção ao padrão de estilização enviado
- Faça o fork desse repositório e realize o clone da sua cópia
seu-nome-de-usuario/projeto-intro-web.Quer uma dica?
- Crie os arquivos do projeto dentro deste repo;
- Execute o fluxo de entrega do git. Lembre-se de abrir os PRs para seu próprio repositório.
- Para isso, você precisará fazer o projeto utilizando branches. Evite fazer as alterações direto na branch
mainDúvidas sobre o Git & Github?
Adiciomos um vídeo explicando o processo de entrega [do fork ao pull request] no Material Assincrono da Aula de Git e Github. Esse vídeo também exemplifica situações que podem acontecer durante o fluxo de utilização do Git.
- Entregue o link do repo no Formulário de entrega.
Opcional: Tente utilizar o Github pages para fazer o deploy do seu projeto.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent