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

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ó.

  1. Dicas gerais
  2. Algoritmo
  3. HTML
  4. Git e Github
  5. Javascript
  6. Conhecimento Extra
  7. Como revisar
  8. Como se aprofundar
  9. E o framework?

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.