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:

• Lógica de Programação e Algoritmos com JavaScript: uma Introdução à Programação de Computadores com Exemplos e Exercícios Para Iniciantes: https://amzn.to/41bQSN8
• Fundamentos de HTML5 e CSS3: https://amzn.to/3R75NUa
• Bootstrap 4: Conheça a biblioteca front-end mais utilizada no mundo: https://amzn.to/3t3Tik8
• Guia Front-End: O caminho das pedras para ser um dev Front-End: https://amzn.to/3Nc9jvl
• Padrões JavaScript: https://amzn.to/3RsSI8W
• Primeiros passos com React: Construindo aplicações web https://amzn.to/3GviNhe

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