O bootcamp completo de desenvolvimento web
Recursos
https://www.appbrewery.co/p/web-development-course-resources
Projetos
Projeto 1: Usando o site pessoal criado por HTML - https://sdkdeepa.github.io/resume/
Projeto 2: Introdução ao CSS - https://sdkdeepa.github.io/profile/
Projeto 2 final: html, css e bootstrap - https://sdkdeepa.github.io/udemy-bootstrap/
Projeto 3: jogo de dados - Métodos JS e DOM - https://sdkdeepa.github.io/dice
Projeto 4: Kit de tambor - Eventos de teclado JS - https://sdkdeepa.github.io/drumming/
Projeto 5: Simon Game - JS e JQuery - https://sdkdeepa.github.io/simon-game-jquery/
Projeto 6: Calculadora de IMC - Node.js e Express.js. Este projeto usando métodos de API como get e post para calcular o IMC
- Projeto 7: App Weather - Node.js e Express.js. Este projeto usa a API climática externa para fazer chamadas para obter os dados climáticos após a solicitação de postagem ser enviada.
Projeto 8: Newsletter Setir-se-HTML, CSS, Bootstrap, JS, Nodejs, Express, API, NPM, Nodemon, Body-Parser etc-https://shrouded-river-17694.herokuapp.com/
Projeto 9 e 10: TODO List App - Continuação do TODO List App V2. Adicionado rotas Get, Post e Excluir. Agora você pode criar e excluir a lista de tarefas para hoje e para a lista personalizada. A lista personalizada pode ser adicionada à rota doméstica (Ex: /Work). Usando o banco de dados do MongoDB Altas Cloud, os dados são coletados. Aplicação hospedada através da Heroku. Confira: https://tranquil-earth-77166.herokuapp.com/
Projeto 11: Site de blog pessoal multipage - criou um aplicativo de blog pessoal de várias páginas usando HTML, CSS, Bootstrap, JS, Node.js, Express.js, Body -Parser, API, EJS, Heroku, Mongoose, Mogodb Altas Cloud Cluster. Checkout: https://morning-rook-32061.herokuapp.com/
Exemplo de Wireframing um projeto
- Projeto 2. Wireframing tindog.png
Tópicos cobertos
HTML, CSS, JavaScript, Bootstrap 4, DOM & DOM Manipulation, jQuery, Node.js, Express, React EJS, body-parser, nodemon, lodash, MongoDB, MongoDB Atlas, mongoose, mongoose-encryption, dotenv, md5, bcrypt, passport, passport-local, passport-local-mongoose, Passport-Google-Path20, Mongoose-Findcreate, Express-Session, API, JSON, Autenticação, API do MailChimp, construir API Rest a partir do zero, Heroku.
Seção 9: Introdução ao JavaScript ES6
- 116-117: Desafio: Mudança de invólucro no texto
- 118: Operador aritmético básico e módulo em JavaScript
- 121-122: Funções Parte 1: Desafio - The Karel Robot
- 124: Funções Parte 2: Parâmetros e argumentos
Seção 10: JavaScript intermediário
- 131: Geração de números aleatórios em JavaScript: Construindo uma calculadora de amor
- 132: Declarações de controle: usando condicionais if-else e lógica
- Exercício de codificação 5: calculadora de IMC avançada (se/else)
- Exercício de codificação 6: ano bisselado
- 138: Adicionando elementos e técnicas de matriz intermediária
Seção 12: Desafio de nível de chefe 1 - O jogo Dicee
- Crie um arquivo JS externo
- Adicione imagens de dados
- Crie um número aleatório
- Altere os dois para um dado aleatório
- Mude os dois elementos img
- Altere o título para exibir um vencedor
Seção 13: Javascript avançado e manipulação de DOM
- 172: Desafio da função de ordem superior
Seção 14: kit de tambor
- 171: Adicionando listadores de eventos a um botão
- 174: Como jogar sons em um site
- 176: Como usar as declarações do Switch em JavaScript
- 179: Usando os ouvintes de eventos do teclado para verificar as prensas de teclas
- 181: Adicionando animação aos sites
Seção 15: Desafio de nível de chefe 2 - O jogo Simon
- Adicione JS e JQuery
- Crie um novo padrão
- Mostre a sequência para o usuário com animações e sons
- Verifique qual botão é pressionado
- Adicionar sons aos cliques de botão
- Adicionar animações aos cliques do usuário
- Comece o jogo
- Verifique a resposta do usuário na sequência do jogo
- Game Over
- Reinicie o jogo
Seção 19: Express.js com Node.js
- 241: Criando nosso primeiro servidor com expresso
- 242: Manipulação de solicitações e respostas: a solicitação GET
- 244: Entendendo e trabalhando com rotas
- 246: configuração do desafio da calculadora
- 248: Respondendo a solicitações com arquivos HTML
- 249: Processando solicitações de postagem com analisador corporal
- 250: desafio de roteamento de IMC
Seção 20: APIs - Interfaces de programação de aplicativos
- 258: fazer solicitações de get com o módulo HTTPS do nó
- 259: Como analisar JSON
- 260: Usando o Express para renderizar um site com dados da API ao vivo
- 261: Usando o analisador corporal para analisar solicitações de postagem para o projeto do servidor: projeto meteorológico
Seção 21: inscrição no boletim informativo
- 263: Configurando a página de inscrição
- 264: Publicação de dados nos servidores do MailChimp por meio de sua API
- 265: Adicionando páginas de sucesso e falha
- 266: implantando seu servidor com Heroku
Projeto: https://shrouded-river-17694.herokuapp.com/
Seção 22: EJS
- 282: modelos? Por que precisamos de modelos?
- 283: Criando seu primeiro modelo EJS
- 284: Código de execução dentro do modelo EJS
- 285: Passando dados da sua página da web para o seu servidor
- 287: Adicionando folhas de estilo CSS pré-fabricadas ao seu site
- 288: Compreendendo o modelo vs layouts
- 289: Entendendo as exportações do módulo do nó: como passar funções e dados entre arquivos
Seção 23: Desafio de nível de chefe 3 - site do blog
- Vá em casa e adicione conteúdo à casa.ejs
- Passe dados do HomeStartingContent para Home.ejs
- Adicione o cabeçalho e o rodapé parciais ao home.ejs
- Cabeçalho movido e rodapé para a pasta parcial
- Adicionar sobre rotas e contatos, passe conteúdo para sobre e contactar.ejs
- Adicione Nav Href ao cabeçalho
- Adicionar formulário de composição e pós -rota
- Adicione campos de texto para compor formulário e usar o bootstrap
- Crie objeto JS para POST
- Empurrar postagem para postagens matriz
- Adicionar postagens para renderizar a matriz
- Faça um loop através de todas as postagens
- Refattor for loop usar foreach
- Renderizar cada post em casa
- Adicionar parâmetros de roteamento expresso /postagens /: blogpost
- Faça um loop através da matriz de postagens para verificar se ela corresponde ao título em URL
- Adicione Lodash e use _.lowercase em títulos
- Página separada para cada post do blog
- Truncate Post Body na página inicial para 100 caracteres
- Adicione Leia mais às postagens
Seção 27: Mongoose
- 357: Introdução ao Mongoose
- 358: Lendo em seu banco de dados com mangusto
- 359: Validação de dados com Mongoose
- 360: Atualizando e excluindo dados usando o Mongoose
- 361: estabelecendo relacionamentos e incorporando documentos usando o Mongoose
Seção 28: juntando tudo
- 364: Leve o projeto Todolist para o próximo nível e conecte -o com o Mongoose
- 365: Renderizando itens de banco de dados no aplicativo Todolist
- 366: Adicionando novos itens ao nosso banco de dados Todolist
- 367: Excluindo itens do nosso banco de dados Todolist
- 368: Criando listas personalizadas usando parâmetros de rota expressos
- 369: Adicionando novos itens aos Todolistas personalizados
- 370: revisitando o Lodash e excluindo itens de listas personalizadas
Seção 29 - implantando seu aplicativo da web
- 374: Como implantar aplicativos da Web com um banco de dados
- 374: Como configurar o MongoDB Atlas
- 375: implantando um aplicativo com um banco de dados para Heroku
Pasta: Projeto 9 e 10: TODO List https://tranquil-earth-77166.herokuapp.com/
Seção 30 - Desafio de nível de chefe 4 - Atualização do site do blog
- 381: salvar postagens compostas com MongoDB
- 382: Vá Home Page para renderizar as postagens
- 383: redirecionar para a página inicial após o salvamento () é concluído sem erros
- 384: Renderizar postagem correta do blog com base no post _id
Pasta: Projeto 11: Site do blog concluído https://morning-brook-32061.herokuapp.com/
Seção 31 - Construa sua própria API RESTful do zero
- 389: Confafio do servidor configurado
- 391: Obtenha todos os artigos
- 392: Publique um novo artigo
- 393: Exclua todos os artigos
- 394: Manipuladores de rotas acorrentadas usando o Express
- 395: Obtenha um artigo específico
- 396: Coloque um artigo específico
- 397: patch um artigo específico
- 398: Exclua um artigo específico
Pasta: Wiki-api
Seção 32 - Autenticação e segurança
- 403: sendo configurado
- 404: Nível 1 - Registre usuários com nome de usuário e senha
- 406: Nível 2 - Criptografia de banco de dados
- 407: Usando variáveis de ambiente para manter os segredos seguros
- 408: Nível 3 - senhas de hash
- 410: Nível 4 - Senhas de salga e hash com BCRYPT
- 412: Nível 5 - usando o passaporte.js para adicionar cookies e sessões
- 413A: Nível 6 - OAuth 2.0 e como implementar a entrada no Google
- 413b: Nível 6 - OAuth 2.0 com o Facebook
- 414: Permitir que os usuários enviem segredos
Pasta: segredos
Seção 33 - React.js
- 422: Prática de código JSX
- 423: Expressões JavaScript em literais de modelo JSX e ES6
- 424: Expressões JavaScript na prática JSX
- 425: Atributos e elementos de reação de estilo
- 426: estilo em linha para elementos de reação
- 427: Prática de estilo reagir
- 428: componentes do React
- 429: Prática dos componentes do React
- 431: JavaScript ES6 Importação, exportação e prática de módulos
- 434: Projeto App Keeper - Parte 1
- 436: React adereços
- 437: React Props Practice
- 438: React Devtools - https://990sq.csb.app/
- 439: Mapeamento de dados para componentes - https://0lrqy.csb.app/
- 440: Mapping Data to Components Practice - https://1kzup.csb.app/
- 441: JavaScript ES6 mapa/filtro/redução
- 442: Javascript ES6 Funções de seta
- 443: Projeto App Keeper - Parte 2
- 444: react renderização condicional com o operador ternário e e operador
- 445: Prática de renderização condicional - https://pr7ow.csb.app/
- 447: React Hooks - Usestate
- 448: Usestate Hook Practice
- 449: JavaScript ES6 Objeto e Destruição de Array
- 450: Javascript ES6 Destruturing Challenge
- 451: Manuseio de eventos em React
- 452: Formulários de reação
- 454: Mudança de estado complexo
- 455: Mudança de prática complexa do estado
- 456: JavaScript ES6 Spread Operator
- 457: JavaScript ES6 Spread Operator Practice
- 458: Gerenciando uma árvore de componentes
- 459: Gerenciando uma prática de árvore componente
- 460: Projeto de aplicativo para Keeper - Parte 3
- 461: React Dependências e modelagem do aplicativo Keeper - https://pbt9b.csb.app/
Ferramentas usadas
- codepen
- Átomo
- Carteiro
- Hiper terminal
- Código do Visual Studio
- https://codesandbox.io/
