O guia de estudos que eu usei e sempre passo pra frente (javascript)
Tags: javascript, webdev, beginners, career
Published: 2020-08-18 19:56:41

# Meu Guia de estudos (javascript)

Sempre que alguém me pergunta como começar a estudar programação me vem uma série de perguntas

_O que tu já sabe?_
_Sabe a área que tu quer seguir?_
_Sabe quais áreas tem dentro de programação?_
_Já criou uma base sólida do básico?_

Todas essas perguntas (e **muitas** outras) são essenciais pra começar a criar uma lista do que estudar

## Maaaas...
Acredito que uma pessoa que se interessou a te fazer essa pergunta e mostra interesse no assunto, pode ser uma oportunidade de tu apresentar a ela a nova carreira e fazer essa de uma forma menos penosa

### Então...
Vou começar me apresentando rápidamente.
Me chamo Guilherme, começei no meu primeiro emprego como dev em 2019 e sou desenvolvedor full-stack pleno, com foco em desenvolvimento front-end (2020). Posso contar mais sobre mim em outro post, o foco aqui é em novos devs.

Acredito que o que vou passar aqui pode servir pra qualquer um em início de carreira (dev JS), então vamos lá
 
### O que eu acho que seria o ideal pra tu estudar

Vou dividir esse post por tema e uns locais que tu pode aprender (pagos e gratuitos). 
Por favor, leiam até o final e não usem isso como a única verdade absoluta, tem um monte de conteúdo na internet e provavelmente muita gente que mandariam outros links
Um abraço e bons estudos
Obs.: Não ouve qualquer patrocínio dos cursos pagos aqui listados os coloquei por gostar bastante da plaaforma e metodos de ensino. Vale procurar por outros reviews antes de tomarem a decisão de compra-los, não me responsabilizo por nada.

### A Base

#### HTML5/CSS3, semântica e acessibilidade
[Curso em vídeo - HTML5](https://www.cursoemvideo.com/course/html5/) - gratuito
[Alura](https://cursos.alura.com.br/category/front-end#html-css) - pago
 

#### Metodologias CSS (BEM, RSCSS, ITCSS) 
[Post Maujor - Metodologia BEM](https://www.maujor.com/tutorial/metodologia-bem-para-criar-codigo-legivel.php) - gratuito
[Post William Justen - Falando sobre RSCSS] (https://willianjusten.com.br/falando-sobre-rscss) - gratuito
[Post William Justen - Organizando seu CSS com ITCSS] (https://willianjusten.com.br/organizando-seu-css-com-itcss)- gratuito

#### Lógica de programação/Algoritmos
[Curso em vídeo - Algoritmo](https://www.cursoemvideo.com/course/curso-de-algoritmo/) - gratuito
[Alura - Lógica de programação] (https://www.alura.com.br/cursos-online-programacao/logica) - pago
 

#### JavaScript
[Alura - Javascript](https://www.alura.com.br/cursos-online-front-end/javascript) - pago
[Curso em vídeo - Javascript](https://www.cursoemvideo.com/course/javascript/) - gratuito
[Programador a bordo - playlist JS conceitos básicos] (https://www.youtube.com/watch?v=vrSEt5J4q2Y&list=PLbA-jMwv0cuWbas947cygrzfzHIc7esmp) - gratuito
[Canal Roger Melo - focado em JS puro] (https://www.youtube.com/channel/UCmjDevp9Y8r-qi-xueD3Izg) - gratuito
[Documentação oficial da Mozilla] (https://developer.mozilla.org/pt-BR/) - gratuito

 
#### Git/GitHub
[Curso em vídeo - Git/Github] (https://www.cursoemvideo.com/course/curso-de-git-e-github/) - gratuito
[Rocketseat - Git/Github] (https://www.youtube.com/watch?v=2alg7MQ6_sI) - gratuito
[Professor José de Assis - Curso GIT e GITHUB] (https://www.youtube.com/watch?v=FF1f4bKYhoo&list=PLbEOwbQR9lqzK14I7OOeREEIE4k6rjgIj) - gratuito
[Alura - controle de versão](https://cursos.alura.com.br/course/git-github-controle-de-versao) - pago
[Alura - Estratégias de ramificação, Conflitos e Pull Requests](https://cursos.alura.com.br/course/git-github-branching-conflitos-pull-requests) - pago
 
### Frameworks e ferramentas
 
Agora vamos partir pros frameworks, mas **atenção** não é porque tem esse monte de conteúdo aí em cima que tu só pode iniciar um framework quando finalizar eles, programação é um estudo constante e nunca deixe de estudar a base.

Vamos lá!
Existem muitos frameworks e libs no mercado e eu vou apresentar alguns
- Front-end: ReactJS, VueJS, Angular
- Back-end: ExpressJS, AdonisJS

Esse é um assunto bem vasto e eu quero aprofundar em alguns posts específicos daqui pra frente, por isso eu vou deixar alguns conteúdos de consulta e início da sua busca por mais conhecimento (até alguma libs úteis de React no final)

### Pra começar... documentações oficiais

Sério, **nunca** subestime a doc oficial de uma lib/framework
Afinal de contas, ela é a oficial e foi criada pela galera que criou a parada. Você verá que apenas linkando a documentação oficial já terá uma enorme quantidade de conteúdo para estudo.
Irei listar as docs oficiais e logo abaixo uma série de criadores de conteúdo que falam sobre eles e outros assuntos.


#### JavaScript
[NodeJS](https://nodejs.org/en/)
- É runtime que permite executar JS fora de um navegador web. (a grosso modo)

[Typescript](https://www.typescriptlang.org/)
- Um superset que adiciona tipagem ao JavaScript, é extremamente poderoso e torna suas aplicações ainda mais escaláveis, merece estar no seu radar.

#### Gerenciadores de pacotes
 - Gerenciadores de pacotes nos permitem adicionar novas dependencias ao nosso projeto que já foram criadas por outros devs e nos poupam muito tempo, além disso, elas _gerenciam_ as versões dos pacotes para que atendam as mais diversas libs que utilizem diversas versões

[NPM](https://www.npmjs.com/)
[YARN](https://classic.yarnpkg.com/lang/en/)

#### Front-end
[ReactJS](https://reactjs.org/)
- Uma das maiores(se não a maior) bibliotecas para criação de SPA(single page aplication[en]/aplicação de página única[ptBR]) e desenvolvimento front-end.
 
[VueJS](https://vuejs.org/)
- Framework JavaScript mais recente a ganhar fama e ser amplamente utilizado pelo mercado de desenvolvimento front-end.

[Angular](https://angular.io/)
- Um dos maiores e mais completos Frameworks para desenvolvimento front-end do mercado, já está a muitos anos sendo usado e está bem consolidado na sua proposta.

[SASS](https://sass-lang.com/)
- Lib para adicionar superpoderes ao CSS (sloghan deles mesmos haha), resolve alguns problemas antigos do CSS puro e melhora a sintaxe.

[Styled-components](https://styled-components.com/)
- Lib pra te ajudar a unir os poderes de CSS e JS, conhecido por CSS-in-JS.


#### Back-end
[ExpressJS](https://expressjs.com/)
- Framework back-end em Node leve e simples de ser usado.

[AdonisJS](https://adonisjs.com/)
- Framework back-end com mais 'opinião' e que lhe tras mais ferramentas e confiabilidade em seus projetos.

[Sequelize](https://sequelize.org/)
- ORM são ferramentas que auxiliam noi tratamento e gerenciamento de SQL aos bancos de dados

[Docker](https://www.docker.com/)
- É uma plataforma open-source cuja finalidade é criar ambientes isolados para aplicações e serviços

[Bcrypt](https://www.npmjs.com/package/bcryptjs)

[JWT](https://jwt.io/)

#### Patterns ou princípios

Padrões e princípios são muito antigos em programação e são as coisas que menos mudam. Existem muitos padrões na área de programação (muitos mesmo)
Vou adicionar aqui alguns que eu gosto bastante e que me ajudam muito a resolver problemas e escolher soluções no dia-a-dia

S.O.L.I.D - [wikipedia](https://en.wikipedia.org/wiki/SOLID)
- [Princípios S.O.L.I.D, por Mariana Azevedo](https://medium.com/@mari_azevedo/princ%C3%ADpios-s-o-l-i-d-o-que-s%C3%A3o-e-porque-projetos-devem-utiliz%C3%A1-los-bf496b82b299)

Factory - [wikipedia](https://en.wikipedia.org/wiki/Factory_method_pattern)
- [Factory Method](https://refactoring.guru/pt-br/design-patterns/factory-method}

KISS - [wikipedia](https://en.wikipedia.org/wiki/KISS_principle)
- [Simplificar Não é Estupidez, é Engenhosidade, por Rafael Souza](https://medium.com/@rafaelsouzaim/simplificar-n%C3%A3o-%C3%A9-estupidez-%C3%A9-engenhosidade-princ%C3%ADpio-kiss-keep-it-simple-stupid-ffa4a0b1943)

DRY - [wikipedia](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
- [DRY - Don't Repeat Yourself - Não se repita](http://www.macoratti.net/16/04/net_dry1.htm)

#### Teste! Teste tudo, TU-DO!
Existem vááárias libs de testes, mas vou deixar duas muito difundidas e uma delas com um canal focado e completíssimo

[Jest] (https://jestjs.io/)
[Cypress](https://www.cypress.io/)
- [Semana Agilizei](https://www.youtube.com/c/Agilizei?sub_confirmation=1)


### Dicas:
#### Seguir alguns blogs
[william Justen](https://willianjusten.com.br/), [William Oliveira](https://woliveiras.com.br/), [Felipe Fialho](https://www.felipefialho.com/), [Gabs Ferreira](http://gabsferreira.com)

 
#### Acompanhar devs pela Twitch 
Quem sabe eu não serei o próximo rsrs
[Marco Bruno](https://www.twitch.tv/marcobrunobr), [Código Falado](https://www.twitch.tv/codigofalado), [Glaucia Lemos](https://www.twitch.tv/glaucia_lemos86), [Toramaru08](https://www.twitch.tv/toramaru08)

#### Acompanhar devs pelo YouTube
[Alura](https://www.youtube.com/user/aluracursosonline/), [BrazilJS](https://www.youtube.com/user/BrazilJS), [CollabCode](https://www.youtube.com/c/CollabCode/), [Codigo Fonte TV](https://www.youtube.com/user/codigofontetv), [Dev Ed (en)](https://www.youtube.com/c/DevEd/), [DevPleno](https://www.youtube.com/c/Devplenocom), [AkitaOnRails](https://www.youtube.com/user/AkitaOnRails), [FilipeDeschamps](https://www.youtube.com/c/FilipeDeschamps), [Glaucia Lemos](https://www.youtube.com/c/GlauciaLemos/), [Google Webmasters (en)](https://www.youtube.com/channel/UCWrqsnPLl6aRX0ECUmPaZEw), [Programador a Bordo](https://www.youtube.com/c/ProgramadoraBordo), [ProgramadorBR](https://www.youtube.com/c/Programadorbr), [Rocketseat](https://www.youtube.com/c/RocketSeat), [Training Center](https://www.youtube.com/c/TrainingCenterChannel)

 
Github! Nele tu pode ver os projetos opensource das pessoas e controlar as versões dos seus próprios, também serve como uma rede social
- [GitHub - Home](https://github.com/)
- [Vagas Front-end](https://github.com/frontendbr/vagas)
- [Training Center] (https://github.com/training-center)
 

Nesse link tu já consegue ver muitos livros gratuitos: [Free programming books pt_BR](https://github.com/EbookFoundation/free-programming-books/blob/master/free-programming-books-pt_BR.md#javascript)

Nesse link tem guia de outra pessoa que ta bem legal e é gratuito: [Carreira front-end o guia](https://medium.com/opensanca/carreira-front-end-o-guia-7f7fac303382)

Esse também é legal: [Guia de estudos desenvolvedor front-end iniciante](https://woliveiras.com.br/posts/guia-de-estudos-desenvolvedor-front-end-iniciante)

E esse: [Do zero a heroi do front-end parte 1](https://www.felipefialho.com/blog/do-zero-a-heroi-do-front-end-parte-1/)

E esse: [Do zero a heroi do front-end parte 2](https://www.felipefialho.com/blog/do-zero-a-heroi-do-front-end-parte-2)

Esse também: [Guia front-end](https://jlcarvalho.github.io/guia-frontend)

Esse roadmap também é bem daora: [front-end](https://roadmap.sh/frontend)


Pra finalizar, tem uns livros que eu comprei e gostei bastante, tu pode achar eles aqui
https://www.casadocodigo.com.br

[O universo da programação: Um guia de carreira em desenvolvimento de software](https://www.amazon.com.br/universo-programa%C3%A7%C3%A3o-carreira-desenvolvimento-software-ebook/dp/B07JZHXX4J/ref=sr_1_2?qid=1571231432&refinements=p_27%3AWilliam+Oliveira&s=digital-text&sr=1-2&text=William+Oliveira)

[Conselhos que eu gostaria de ter recebido no início da carreira](https://www.amazon.com.br/Conselhos-gostaria-recebido-in%C3%ADcio-carreira-ebook/dp/B07PGWQ56S)

## Finalizando

Muitos dos conteúdos que eu reuní durante o passar dos tempos foi de front-end, pois esse é meu foco, mas acredito que tenha deixado bons conceitos e bases para qualquer um que queria iniciar no desenvolvimento web
Um abraço
Críticas construtivas são muitíssimo bem vindas e adições serão mais ainda
I'm sorry about my Portuguese
Flws!