São codificados 50 mini projetos para aperfeiçoar as técnicas de html, css e javascript, para um total de 50 projetos realizados.
O objetivo é criar familiaridade com as tecnologias relacionadas. A maioria dos projetos baseia-se na idéia do uso de classes e propriedades css nos elementos html, utilizando o javascript para editar o contexto.
- Dia 01 - Expanding Cards - Um cartão preenchem a tela, enquanto é mostrado o conjunto de cartões.
- Dia 02 - Progress Steps - É criado um widget que mostra o quantos passos de um processo ocorreram.
- Dia 03 - Rotating Navigation - Menu de navegação que aparece ao girar o conteudo da página.
- Dia 04 - Hidden Search Widget - Um botão de lupa que ativa uma caixa de pesquisa.
- Dia 05 - Blurry Loading - Indica que uma página carrega disfocando a imagem de fundo.
- Dia 06 - Scroll Animation - Cards vão aparecendo com animação ao rodar a página.
- Dia 07 - Split Landing Page - Cria uma pãgina responsiva, dividida ao meio.
- Dia 08 - Form Wave Animation - Labels do formulário terão um efeito de transição de onda.
- Dia 09 - Sound Board - Cria uma coletânea de botões que ativarão músicas
- Dia 10 - Dad Jokes - Consome uma API em busca de piadas sem graça na internet para mostrá-las.
- Dia 11 - Event KeyCodes - Mostra qual tecla foi ativada e seus respectivos códigos.
- Dia 12 - FAQ Collapse - Cria um sistema de FAQ baseado em troca de classes.
- Dia 13 - Random Choice Picker - Selecionador aleatório de itens inseridos em uma listagem.
- Dia 14 - Animated Navigation - Cria uma animação ao ativar e desativar o menu de navegação.
- Dia 15 - Incremental Counter - Um contador aumenta rapidamente até o valor alvo.
- Dia 16 - Drink Water - Mini rastreador de quantia de agua ingerida no dia.
- Dia 17 - Movie App - Aplicativo que mostra filmes, notas, e permite pesquisa.
- Dia 18 - Background Slider - Cria um slider de imagens que também altera o a imagem de fundo.
- Dia 19 - Theme Clock - Apresenta um relógio analógico funcional.
- Dia 20 - Button Ripple Effect - Cria uma animação de ondas ao clicar no botão.
- Dia 21 - Drag N Drop - Utiliza animações para um arrastar e soltar visual.
- Dia 22 - Drawing App - Mini aplicativo de desenho na tela.
- Dia 23 - Kinetic Loader - Animação para tocar enquanto carrega algo.
- Dia 24 - Content Placeholder - Um card que toca uma animação enquanto carrega os dados.
- Dia 25 - Sticky Navbar - Uma barra de navegação que sempre permanece no topo da página.
- Dia 26 - Double Vertical Slider - Imagem e descrição deslizam na vertical ao apertar um botão.
- Dia 27 - Toast Notification - Cria uma notificação que aparece na tela por um curto tempo.
- Dia 28 - Github Profiles - Pesquisa usuários no Github e seus repositórios.
- Dia 29 - Double Click Heart - Duplo clique na imagem gera um coração.
- Dia 30 - Auto Text Effect - Um texto aparenta ser digitado ao vivo.
- Dia 31 - Password Generator - Um gerador de senhas.
- Dia 32 - Good Cheap Fast - Seleciona até duas checkboxes ao mesmo tempo.
- Dia 33 - Notes App - Crie e edite notas na tela.
- Dia 34 - Animated Countdown - Contador regressivo animado.
- Dia 35 - Image Carousel - Visualização de imagens em ciclo.
- Dia 36 - Hoverboard - Quadrados se colorem ao passar o mouse encima.
- Dia 37 - Pokedex - Um catálogo de Pokemons.
- Dia 38 - Mobile Tab Navigation - Um menu de navegação de Rodapé para celulares.
- Dia 39 - Password Strenght Background - Imagem borrada fica clara a medida que digita a senha.
- Dia 40 - 3D Background Boxes - Uma animação é espacialmente dividida em caixas 3D.
- Dia 41 - Verify Account UI - Tela para inserção de código de verificação.
- Dia 42 - Live Use Filter - Filtra e atualiza uma UI com lista de usuários.
- Dia 43 - Feedback UI - Um sistema de feedback de múltiplas escolhas.
- Dia 44 - Custom Range Slider - Um slider que é possível de ser customizável.
- Dia 45 - Netflix Navigation - Um menu que ficaria bonito no Netflix.
- Dia 46 - Quiz App - Um aplicativo de Quiz, obviamente.
- Dia 47 - Testimonial Box Switcher - Um Carrousel que alterna testemunhos.
- Dia 48 - Random Image Feed - Página mostra imagens em colunas, similar a um Feed.
- Dia 49 - Todo List - Uma lista de tarefas.
- Dia 50 - Insect Catch Game - Clique nos insetos para pegá-los.