Irei postar todos os meus projetos desenvolvidos durante o bootcamp FullStack na Kenzie Academy Brasil, a fim de mostrar meu progresso até aqui. Nesse repositório terão os projetos desenvolvidos no segundo módulo ou M2
M1 | M2
O S significa SPRINT ou seja, S1 significa SPRINT 1, e todas as outras SPRINTS seguem a mesma lógica.
Os números são referentes aos números de cada atividade.
O M significa Módulo ou seja, M2 significa Módulo 2.
S1-13-M2 - 26/01/23 - "PÁGINA DE LOGIN"
Nesse projeto, eu codifiquei um modal de cadastro em uma página de login, bem como criei o código HTML e a estilização CSS seguindo o conceito de variáveis e scaffolding
scaffolding dialog css variables flexbox function variables data type methods +
S1-14-M2 - 27/01/23 - "SITE INSTITUCIONAL GENÉRICO"
Nesse projeto, codifiquei um site genético da Web, seguindo fielmente o layout do Figma, utilizando HTML, CSS e JavaScript. Ambos os botões tinham que abrir o mesmo modal, e o modal possue um botão de fechamento funcional
scaffolding dialog css variables flexbox backdrop function variables data type methods +
S2-05-M2 - 31/01/23 - "CRIANDO FILTRO DE DADOS"
Nesse projeto, resolvi exercícios JavaScript utilizando o método filter
scaffolding console log return function variables operators arithmetics data type string number methods arrays objects +
S2-06-M2 - 01/02/23 - "PESQUISANDO POR DADOS"
Nesse projeto, codifiquei uma função de pesquisa de um site de doces, utilizando JavaScript e os métodos filter e includes
scaffolding return function variables data type methods +
S2-07-M2 - 01/02/23 - "REMOVENDO DADOS"
Nesse projeto, codifiquei os botões de remover itens do carrinho utilizando JavaScript e os métodos findIndex e splice
scaffolding return function variables data type methods +
S2-08-M2 - 01/02/23 - "REDUZINDO DADOS"
Nesse projeto, resolvi exercícios utilizando JavaScript e o método reduce
scaffolding console log return function variables operators arithmetics data type string number methods arrays objects +
S2-12-M2 - 03/02/23 - "RECRIANDO MÉTODOS DE ARRAY"
Nesse projeto, resolvi exercícios em JavaScript recriando métodos de array sem utilizá-los, e os exercícios passaram por um teste unitário utilizando jest
scaffolding return loops function variables data type boolean conditionals arrays node yarn jest +
S3-03-M2 - 06/02/23 - "CRIANDO MENU RESPONSIVO"
Nesse projeto, desenvolvi um menu utilizando os conceitos de responsivdade, que no mobile, expande e esconde o menu da tela do usuário a partir da ação de clique
scaling positioning flexbox media queries menu responsive +
S3-05-M2 - 07/02/23 - "COLUNAS RESPONSIVAS"
Nesse projeto, desenvilvi uma página baseada em um modelo fornecido, utilizando o conceito de mobile first, onde numa tela responsiva, uma tag deveria ocupar uma largura maior que a outra
mobile first scaling positioning flexbox media queries responsive +
S3-06-M2 - 07/02/23 - "APLICANDO CONCEITOS DE MEDIA QUERIES"
Nesse projeto, converti um layout projetado para se enquadrar no modelo mobile first, modificando para que ele funcione em telas maiores
mobile first scaling positioning flexbox media queries +
S3-07-M2 - 08/02/23 - "MEDIA QUERIES E ESTILIZANDO TEXTOS"
Nesse projeto, converti um layout projetado para que se adaptasse aos diferentes tamanhos de dela, aplicando as devidas modificações estabelecidas
mobile first scaling positioning media queries +
S3-11-M2 - 09/02/23 - "ATIVIDADE TRABALHANDO COM MÚLTIPLOS ARQUIVOS JS"
Nesse projeto, desenvovolvi uma página que manipula múltiplos arquivos JavaScript através do import e export, bem como renderiza os componentes dinamicamente na página, e o CSS foi desenvolvido de forma responsiva, utilizando os conceitos de mobile first
mobile first scaling positioning media queries DOM import export +
S3-12-M2 - 10/02/23 - "REDE SOCIAL"
Nesse projeto, desenvolvi o layout similar a uma rede social, seguindo fielmente um modelo proposto no Figma. Foi feito um menu de forma que seu comportamento visual acompanhasse a tela do usuário ao interagir com a página, possuindo um cabeçalho fixo no topo do documento, um form onde é possivel adicionar novos posts dinamicamente à página, uma seção de "Sugestões para você seguir", que no desktop fica ao lado do form, e no mobile fica logo abaixo, com um scroll horizontal. Os posts foram todos renderizados dinamicamente em tela, e todos possuem um botão de "Abrir post" que abre um modal contendo todo o conteúdo do post, esse modal também foi criado dinamicamente. O layout foi todo criado nos conceitos de mobile first e está responsivo para todos os tamanhos de tela
mobile first scaling positioning media queries DOM import export modal dialog +
S4-16-M2 - 17/02/23 - "GITSEARCH"
Nesse projeto, desenvolvi um site para pesquisar usuários no GitHub através de requisição na API do GitHub, onde a pessoa digita o nome do usuário, caso seja encontrado, ele é redirecionado a outra página contendo o nome e foto do usuário, bem como seus repositórios, onde cada card de repositório contém o nome, a descrição e um botão que leva diretamente ao repositório no GitHub, a página possui, também, um botão de "Trocar usuário", redirecionando à página inicial para que possa ser realizada uma nova pesquisa. Caso o usuário pesquisado não seja encontrado, ele é redirecionado à uma página de erro, que contém um botão de "Nova busca" que redireciona à página inicial também.
api request search DOM redirection +
S5-10-M2 - 24/02/23 - "CONSUMINDO API POKÉAPI"
Nesse projeto, desenvolvi uma interface para pesquisar pokemons através da requisição na PokéAPI, onde a página já é inicializada com alguns pokemons listados, e possui um input de pesquisa, onde o usuário pode pesquisar por um pokemon, retornando na página a imagem do pokemon e o seu nome. Toda a estilização da página está responsiva, utilizando os conceitos de mobile first e se adaptando a todos os tamanhos de tela.
api request search redirection mobile first scaling positioning media queries +
S6-10-M2 - 03/03/23 "PET INFO"
Nesse projeto, desenvolvi uma interface de rede social, onde era possível fazer as requições de login e cadastro, e possuía botões para navegação entre páginas. Na dashboard, após logado, é possível visualizar posts de todos os usuários, e exluir e editar posts feitos pelo usuário logado. Após o login, o localstorage é limpo, impedindo que a página dashboard seja acessada caso não logado.
api request search redirection DOM scaling +
S7-01-M2 - 10/03/23 "KENZIE EMPRESAS"
Nesse projeto, desenvolvi a interface de uma rede social corporativa, possuindo uma página de home que renderiza todas as empresas cadastradas, com um select onde é possível selecionar o setor, e ele retorna as empresas que pertencem àquele setor. Uma página de cadastro para criação de novos usuários, onde não é possível criar admin (já vem na API). Uma página de login, onde será feita a validação do usuário ao logar, direcionando para a sua respectiva dashboard (user ou admin). Na página do user, é possível visualizar seu nome, e-mail, nível profissional e modalidade de trabalho, possuindo um botão onde é possível editar essas informações, caso o usuário possua emprego, renderiza também seus colegas de trabalho. A página do admin visualiza todos os departamentos e funcionários registrados na página, onde é possível fazer o select na empresa, e retorna todos os seus departamentos. O admin possui funcionalidades de criar novos departamentos, excluir departamentos, editar departamentos, contratar e demitir funcionários do respectivo departamento, bem como pode excluir e editar informações do usuário.
api request redirection mobile first scaling positioning media queries +
S8-03-M2 - 13/02/23 "DISPLAY GRID"
Nesse projeto, desenvolvi uma interface básica para aplicar os conceitos aprendidos de display grid.
HTML CSS display grid +
S8-13-M2 - 14/03/23 "UTILIZANDO TAILWIND CSS E FONTAWESOME PARA CRIAR LAYOUTS"
Nesse projeto, desenvolvi uma interface básica para praticar os conceitos aprendidos de Tailwind CSS e Font Awesome.
HTML tailwind css FontAwesome +