Article image
alberto silva
alberto silva05/12/2023 01:03
Compartilhe

Trilhar de Estudo para Desenvolvimento Front End - 2023

  • #JavaScript
  • #CSS
  • #React

RoadMap para Desenvolvedor Front-end em 2023 ūüöÄ

Linkedin: https://www.linkedin.com/in/albertomoiseisdev/

Dica de Cursos e Livros: https://dicas-de-cursos-e-livros.netlify.app/

0. Livros sobre Desenvolvimento Front End:

1. Entendendo o Mundo Digital

  • Pesquisar artigos e v√≠deos sobre o funcionamento da internet.
  • Explorar HTTP:
  • M√©todos e status codes.
  • Browsers:
  • Funcionamento b√°sico e suas ferramentas.
  • DNS:
  • Resolu√ß√£o de dom√≠nios.
  • Hosting:
  • Tipos e escolha adequada.

2. Domine a Arte da Lógica de Programação

  • Estudar Portugol para fortalecer a l√≥gica.
  • Abordar vari√°veis, comandos de entrada e sa√≠da.
  • Operadores:
  • Aritm√©ticos, relacionais e l√≥gicos.
  • Estruturas Condicionais:
  • If, else, switch.
  • Estruturas de Repeti√ß√£o:
  • For, while.
  • Fun√ß√Ķes:
  • Declara√ß√£o, chamada e retorno.
  • Vetores e Matriz:
  • Manipula√ß√£o e utiliza√ß√£o.

3. Roadmap JavaScript: Transformando Lógica em Código Vivo

  • Sintaxe e Vari√°veis em JavaScript.
  • Comandos de entrada e sa√≠da com prompt-sync.
  • Operadores:
  • Matem√°ticos, de compara√ß√£o e l√≥gicos.
  • Estruturas de Condi√ß√£o:
  • if-else, switch-case.
  • Fun√ß√Ķes:
  • Declara√ß√£o, arrow functions.
  • Objetos:
  • Propriedades, m√©todos.
  • Arrays:
  • Manipula√ß√£o, m√©todos.
  • Datas e Promises:
  • Manipula√ß√£o de datas e assincronia.
  • Package Managers:
  • npm e yarn.
  • Instala√ß√£o e utiliza√ß√£o.

4. Git e GitHub: Navegando Pelos Mares do Controle de Vers√£o

  • Inicializar um reposit√≥rio (git init).
  • Checkar o status (git status).
  • Adicionar um arquivo pra stage area (git add).
  • Adicionar a modifica√ß√Ķes ao hist√≥rico (commit).
  • Visualizar hist√≥rico (git log).
  • Verificar modifica√ß√Ķes nos arquivos (git diff).
  • Renomear, remover e mover arquivos (rm, mv).
  • Restaurar arquivos e alterar commits (restore, amend).
  • Navegar para um commit passado (git checkout).
  • Limpar working directory (git clean).
  • Reverter um commit (git revert).
  • Ignorar arquivos (git ignore).
  • Branches (branch).

5. HTML & CSS: Criando a Beleza na Web

  • Sintaxe HTML e tags essenciais.
  • Tags de Blocos:
  • Header, Body, Div, Nav, Footer.
  • Tags de Texto:
  • Heading, Paragraph, Bot√£o, Imagem, Link, Input.
  • Tabelas, Listas, Formul√°rios.
  • CSS:
  • Tamanhos e unidades de medida.
  • Cores, estiliza√ß√Ķes de textos.
  • Espa√ßamentos, background, bordas.
  • Posicionamento absoluto e relativo.
  • Flexbox e Grid.

6. Construindo Aplica√ß√Ķes Web de Alto N√≠vel

  • Formul√°rios: Estrutura e valida√ß√£o.
  • Eventos: Manipula√ß√£o de eventos do usu√°rio.
  • Manipula√ß√£o do DOM: Intera√ß√£o com a √°rvore DOM.
  • Fetch API: Requisi√ß√Ķes HTTP ass√≠ncronas.
  • Media Query: Adapta√ß√£o da interface a diferentes dispositivos.

7. React.js: O Poder da Interface Din√Ęmica

  • JSX: Sintaxe e utiliza√ß√£o.
  • Components: Cria√ß√£o e composi√ß√£o.
  • State: Gerenciamento de estado local.
  • React Hooks: Utiliza√ß√£o e boas pr√°ticas.
  • Navega√ß√£o: react-router-dom.
  • Estado Global: Context API e Redux.
  • Chamadas de API: Axios, React Query, useHttp.
  • CSS moderno: Separa√ß√£o de components com Atomic Design.
  • Styled Components, Tailwind, Emotion, Chakra UI, Material UI.
  • Formul√°rios: Yup, Formik, React Hook Form.
  • Eslint e Prettier: Ferramentas de formata√ß√£o de c√≥digo.

8. Cloud B√°sico

  • Vercel, Netlify: Plataformas de deploy f√°cil.
  • AWS S3: Armazenamento na nuvem.

9. Sugestão de Tópicos Avançados

  • TypeScript: Aplica√ß√£o no React.
  • Next.js: Framework de React.
  • CI/CD, Github Actions: Integra√ß√£o Cont√≠nua e Deploy Cont√≠nuo.
  • PWA: Progressive Web Apps.
  • Testes: Jest, React Testing Library, Cypress.
  • Firebase: Plataforma de desenvolvimento.
  • Sentry: Monitoramento de erros.

Dica de Inform√°tica:

1 - Monitores: https://amzn.to/3RtnO07

2 - Computadores: https://amzn.to/3Nav8Lu

3 - HeadSet: https://amzn.to/3NciT1e

4 - Mouse: https://amzn.to/3TaUzjT

5 - Teclados: https://amzn.to/3NcXXXR

Compartilhe
Coment√°rios (1)
Edson Santana
Edson Santana - 05/12/2023 09:02

Excelente panorama, só achei que poderia sugerir sem ser tendencioso linguagens e frameworks, mas parabéns pelo artigo