Roadmap Frontend - Torne-se um Desenvolvedor (Em Construção)
Comece por aqui!
Não sabe por onde começar a aprender? Que tal vir aqui ver?
Leia de cima para baixo, cada item é um tópico para estudar. você verá com mais detalhes o que pesquisar e links para conteúdos gratuitos produzidos pelos players que irão te auxiliar nessa jornada!
Esse é o básico. Aprendendo esses conceitos você poderá começar a desenvolver um projeto.
HTML
HTML significa HyperText Markup Language. Ele é usado no frontend e fornece a estrutura da página da Web que você pode estilizar usando CSS e tornar interativa usando JavaScript.
1. O Básico
- Marco Bruno Curso de HTML e CSS feliz
- Lucas Lopes HTML Básico Parte 1
- Lucas Lopes HTML Básico Parte 2
- Gustavo Guanabara Curso Completo de HTML e CSS
2. Formulários e Validações
- Edicursos Validação de campos em formulários HTML
- Rafaella BalleriniFormulários com HTML e CSS
3. Convenções e Melhores Práticas
4. Acessibilidade
- Ser Frontend HTML e Acessibilidade. 6 erros comuns que até devs mais experientes podem cometer
- Matheus Castiglioni Acessibilidade em páginas web
CSS
CSS ou Cascading Style Sheets é a linguagem usada para estilizar o frontend de qualquer site. CSS é uma tecnologia fundamental da World Wide Web, juntamente com HTML e JavaScript.
1. O básico
- Marco Bruno Pare de Chutar o CSS
- Lucas Lopes Primeiros Passos CSS
2. Fazendo Layouts
- Udemy Curso completo Flexbox
- Udemy Curso completo CSS Grid
- CFBCursos CSS Flexbox
- Matheus Battisti Tutorial de Flexbox
- Matheus Battisti Aprenda CSS Grid em 30 minutos
- Marco Bruno Pare de chutar e aprenda float e sua trupe
- Marco Bruno Pare de chutar e aprenda display: inline
- Marco Bruno Pare de chutar e aprenda display: block
- Marco Bruno Pare de chutar e aprenda display: inline-block
3. Design Responsivo e Media Queries
- Chief of Design O que é Web Design Responsivo
- Mayk Brito Responsividade na Prática
4. Animações
Javascript
JavaScript permite adicionar interatividade às suas páginas. Exemplos comuns que você pode ter visto nos sites são controles deslizantes, interações de clique, pop-ups e assim por diante.
1. Sintaxe e o Básico
- Fabio Bergmann Desafios Javascript
- Gustavo Guanabara Curso Grátis de JavaScript Moderno
2. Manipulação de DOM
- Dogcode Manipulando o DOM na prática
- CodarMe Manipulando a DOM com Vanilla JS
- Mayk Brito Manipulação de DOM com JavaScript, do zero, na prática
3. Fetch API / Ajax (XHR)
- Huriel Como consumir de uma API usando a Fetch API
- Matheus Battisti (Hora de Codar)Aprenda Fetch Api de Javascript
4. ES6+ e JS Modular
- Flávio Coutinho Um guia para MÓDULOS JavaScript (ES6 Modules)
- Angelo Luz Javascript ES6+ (playlist)
5. Conceitos de Hoisting, Event Bubbling, Escopo, Prototype, Shadow DOM, strict
- Willian Justen Mini-curso JS Moderno (ES6)
Controle de Versão
Os sistemas de controle de versão permitem rastrear alterações em sua base de código/arquivos ao longo do tempo. Eles permitem que você volte para alguma versão anterior da base de código sem problemas. Além disso, eles ajudam na colaboração com pessoas que trabalham no mesmo código – se você já colaborou com outras pessoas em um projeto, você já deve conhecer a frustração de copiar e mesclar as alterações de outra pessoa em sua base de código; sistemas de controle de versão permitem que você se livre desse problema.
1. Conceitos de Git
2. Serviços de Hospedagem de Git
Segurança
A segurança da Web refere-se às medidas de proteção tomadas pelos desenvolvedores para proteger os aplicativos da Web de ameaças que podem afetar os negócios.
1. O básico
2. HTTPS
3. CORS
4. Content Security Policy
5. Helmet
6. OWASP
Gerenciadores de Pacote
Os gerenciadores de pacotes permitem que você gerencie as dependências (código externo escrito por você ou outra pessoa) que seu projeto precisa para funcionar corretamente.
1. npm
2. yarn
Pré Processadores CSS
Os pré-processadores de CSS são linguagens de script que estendem os recursos padrão do CSS. Eles nos permitem usar lógica em nosso código CSS, como variáveis, aninhamento, herança, mixins, funções e operações matemáticas.
1. Sass
2. PostCSS
3. Less
Ainda não esta completo prometo Atualizar esse post e comenta ai oque falta.