Cursos grátis para quem tá começando no Front-end · rafaeldiastd

Durante uma conversa de WhatsApp com um grupo de amigos que queriam iniciar como dev em front-end e não sabiam NADA acabei reunindo vários links que usei durante meus estudos e dicas que vi soltas e decidi compartilhar com vocês, assim já facilita com toda a informação em um lugar só.

Não entendi como fazer a listagem com âncora para o índice (sorry)

Vou deixar o pedido aqui para que vocês acrescentem links, canais e cursos gratuitos para quem quer começar como Front-end e com o tempo vou adicionando mais links em cada etapa.

Aviso: Nenhum dos links abaixo são links patrocinados e não ganho nada divulgando, é apenas uma listagem real, de uma trilha real, que fiz durante anos.

Os primeiros cursos que fiz foram do Curso em Vídeo, com o professor Gustavo Guanabara e é gratuito. Vai ter bastante link dele aqui, por que para mim ele tem uma didática impecável pra quem ta começando.

1. Dicas gerais:

Dedique pelo menos 2h por dia para os estudos, se cerque de relacionados a tecnologias (links lá no final) pra manter os estudos frescos na cabeça.
Via de regra, não começe a estudar algo sem ter pelo menos o conhecimento prévio necessário. Isso só vai confundir sua cabeça.
Durante todos os estudos façam imersões, façam desafios, façam aqueles eventos. Eu sei que no final, eles vão querer te vender algo. Mas é importante você por em prática, você criar e errar e ver coisas novas.
Eu acompanho o NLW da Rocketseat (é bom acompanhar eles pra saber quando vai ter) e a Imersão Dev da Alura https://imersao.dev/
Depois de fazer os cursos e entender HTML e CSS, fica a recomendação de aprender Bootstrap 5. Tem bastante conteúdo gratuito no YouTube, vai ajudar muito quem não tem muito tato com design e cores.

2. Algoritmo:

Resumo:

Comece com o básico! Entenda de Algoritmos, isso vai te ajudar a pensar de forma lógica e consequentemente vai te ajudar na hora de programar mais pra frente.

https://www.cursoemvideo.com/curso/curso-de-algoritmo/

3. HTML e CSS:

Resumo:

Aprenda HTML e CSS para conseguir construir páginas básicas e estáticas, entenda sobre como ligar CSS no HTML, importar fonte, mudar cores, criar ID's, criar animações de botão e etc:

Essa parte dos estudos é todo sua base. É partindo daqui, que você vai conseguir construir todo o resto.

https://www.cursoemvideo.com/curso/html5/
https://www.cursoemvideo.com/curso/html5-css3-modulo1/
https://www.cursoemvideo.com/curso/curso-html5-e-css3-modulo-2-de-5-40-horas/
https://www.cursoemvideo.com/curso/curso-html5-e-css3-modulo-3-de-5-40-horas/
https://www.cursoemvideo.com/curso/curso-html5-e-css3-modulo-4-de-5-40-horas/

Vídeo da Rafa Ballerini batendo papo sobre HTML e CSS:
https://www.youtube.com/watch?v=ymOYxge70Mc

Vídeos da Rafa Ballerini ensinando coisinhas mais especificas do CSS:
https://www.youtube.com/watch?v=KbjLtEgmZ_E
https://www.youtube.com/watch?v=hjz6ezV9_uc

Vídeo do Mario Dev Soutinho falando sobre CSS e como aprender:
https://www.youtube.com/watch?v=alqWVx0p3U0

4. Git e Github:

Resumo:

Depois disso, ou até durante isso, aprenda a usar Git e Github, vai ser muito importante para o mercado de trabalho, principalmente home-office. É a forma como você vai trabalhar com outras pessoas de forma organizada e segura.

https://www.cursoemvideo.com/curso/curso-de-git-e-github/

Aprenda o básico, em um dia você já aprende os comando básicos pra ir usando em paralelo aos estudos e não sofrer depois.

5. Javascript:

Resumo:

Com todo essa base construída, ta na hora de ir realmente para uma linguagem de programação. Preste bastante atenção, o JavaScript é a base pra muitas linguagens mais novas e é de extrema importância que você domine conteúdos como Array, Objetos, Funções, Assync e Await.

Faça com calma, refaça, pare e crie projetos pararelos para treinar e testar o que você fez. Não tenha vergonha de criar calculadoras, timers, sistemas de cadastro. É parte do processo, é importante para fixar.

https://www.cursoemvideo.com/curso/javascript/

Vídeo da Rafa Ballerini explicando sobre o JavaScript:
https://www.youtube.com/watch?v=QnLSBuykGxI

6. Conhecimento extra:

Resumo:

Recomendo aprender o básico de Banco de dados e PHP, mas o básico mesmo. Como todo conhecimento nunca é perdido, é bom você saber como funciona.

https://www.cursoemvideo.com/curso/mysql/
https://www.cursoemvideo.com/curso/php-basico/

7. Revisar:

Resumo:

Depois de todo esse conhecimento, você pode revisar tudo e ainda aprender mais, fazendo a trilha Discover da Rocketseat, que também é gratuita e vai te ensinar sobre HTTP, API e outras coisinhas mais que vão ser úteis caso você vá trabalhar com React.JS ou Vue.JS

https://www.rocketseat.com.br/discover

8. Se aprofundar:

Resumo:

Depois disso, vocês já tem uma base muito boa e pode começar a aprender mais afundo cada uma das coisas aqui, comprando cursos em sites como Udemy. Cursos baratos, que custam menos de R$ 100 e que vão te aprofundar em HTML, CSS, JS, Bootstrap, React.JS, Vue.JS:

https://www.udemy.com/course/bootstrap-5-do-basico-ao-avancado-com-4-projetos/
https://www.udemy.com/course/html5-e-css3-crie-seu-primeiro-site-inclui-flexbox/
https://www.udemy.com/course/curso-de-javascript-moderno-do-basico-ao-avancado/

9. Escolha um Framework inicial:

Resumo:

Já vi outros conteúdos aqui no TabNews sobre qual seria o melhor framework e nunca vai existir um melhor, é sempre o que você entende como bom.

Vale dar uma lida nesses:
https://www.tabnews.com.br/guxtavodev/react-js-e-vue-js-qual-o-melhor
https://www.tabnews.com.br/Centaurus/comecando-a-aprender-com-react-js

Cerque-se de conteúdo:

Resumo:

E lá em cima, eu comentei sobre você se cercar de conteúdo e assistir videos e podcasts. Lembre-se, muitas vezes você não vai entender o que ta acontecendo ou o que estão falando, mas é bom pra manter esse mundo vivo na cabeça, conhecer novas tecnologias, conhecer jargões e até desenvolver mais o raciocínio lógico, vendo como outros devs fazem.

Então tem o canal de podcasts da Alura, que tem muito papo e convidados.
https://www.alura.com.br/podcasts/hipsterstech

Tem o nosso querido Filipe Deschamps, que muitas vezes trazia conteúdos que eu não fazia ideia do que ele tava falando e mesmo assim, me ajudava a pensar e ver o mundo como um DEV. Afinal, TUDO hoje em dia tem algum nível de programação.
https://www.youtube.com/@FilipeDeschamps

Já larguei alguns vídeos dela aqui em cima, mas fica a recomendação de acompanhar ela no Insta e no Youtube, por lá vocês conseguem saber sobre esses eventos de imersão, dicas rápidas e dia a dia de uma dev front-end
https://www.youtube.com/@rafaellaballerini

Gabriel Pato é um analista de "falhas" em sistemas de empresas grandes, mesmo papo do Filipe Deschamps, eu não entendo como ele fez, mas ele fez e explica a lógica, é bom pra acompanhar também e entender mais sobre onde as falhas podem estar. Ajuda você a pensar como alguém poderia hackear o seu sistema.
https://www.youtube.com/@GabrielPato

Papo mais avançado sobre APIs, Node, React e etc, muitos vídeos explicando o que falei lá de Javascript com Await, Assync e Protocolos
https://www.youtube.com/@DevSoutinho

Lembrando gente, todos os conteúdos aqui, são o que eu uso para estudo, não leve isso como regra, mas tentei reunir os conteúdos básicos gratuitos e coloca-los em uma listagem clara.