Um comovente guia de estudo para desenvolvedores front end

Em agosto escrevi um post com um breve guia para se tornar um profissional front end.

O resultado foi muito bacana e a comunidade recebeu muito bem o conteúdo, gerando inclusive, um post no Tableless escrito pelo Diego Eis (um dos mestres da área) citando o post como referência.

Depois disso recebi muitos feedbacks questionando sobre formas de estudar os conteúdos citados e resolvi fazer um pequeno guia.

O comovente guia de estudo para desenvolvedores front end do Oriente

Sim, isso foi um plágio do título do livro do Why sobre Ruby, o guia não tem nada de comovente!

Assim como no post anterior, vou usar minhas experiências como base, afinal é o quase comovente guia do Oriente, porém ficarei muito feliz em receber sugestões de materiais complementares nos comentários e obviamente irei adicionar no post os mais relevantes.

O foco do post é atender a galera iniciante e encurtar alguns caminhos, porém se você é mais cascudo e quiser colaborar, fique a vontade.

Como estudar para me tornar um Desenvolvedor Front End

Livros

O cara é simplesmente a maior referência nacional quando se trata de HTML e CSS.

Se você começou agora e nunca viu uma linha de HTML e CSS recomendo comprar de cara esse livro:

Construindo Sites com CSS e (X)HTML.

Ele aborda muito bem o básico que você precisa saber sobre HTML e CSS e vai te dar uma base muito boa.

Boa parte do conteúdo dele está no site do Maujor, porém o livro agrupa o conteúdo de uma forma que fica simples de entender.

Vale a pena dar uma olhada nos outros livros também.

Em minha humilde opinião, a melhor editora da área. Todos os livros são fantásticos e é impressionante a gama de assuntos que eles abordam. Os livros geralmente são em inglês, porém já existem alguns em português.

Seguem dois que considero essenciais: Guerreiro SEO e Javascript - O Guia Definitivo, porém pouco comoventes.

Se quiser aprender bem algo, pesquise por “algo” + o’reilly no google e compre o livro.

Organizações

A galera da MDN é extremamente didática e mantém uma documentação abrangente com exemplos de códigos e imagens.

Uma péssima fonte e que ocupa as primeiras posições do google com certa frequência é o W3Schools (não vou desperdiçar meu juice linkando eles).
Podem servir de quebra galho as vezes mas não são muito confiáveis e não tem vínculo algum com a consagrada W3C.

Aliás, a W3C obviamente é uma fonte totalmente segura de conhecimento já que ela regula os padrões web.

Bíblia

Também conhecido como a bíblia do desenvolvedor. Trata-se de um site de Q&A (perguntas e respostas) com uma comunidade muito ativa.

Se você esbarrou em um erro e não conseguiu sair dali de forma alguma, certamente sua dúvida já foi respondida no Stack Overflow. Caso tenha procurado e nenhum dos resultados do google é deles é um claro indicativo que você está procurando pelo termo errado.

Obs: Dica de ouro. Sempre pesquise em inglês.

Cursos

Vou citar algumas referências no RJ e cursos onlines. Infelizmente não tenho conhecimento das demais regiões do Brasil.

Provavelmente a melhor instituição do RJ. Apesar do foco serem coisas relacionadas ao universo Back-End, possuem alguns cursos legais voltados para Front-End. Principalmente para quem está começando na área.

Outra instituição muito sólida no RJ. O conteúdo é bem orientado ao mercado, porém tive problemas com a parte administrativa da empresa e já ouvi outros relatos de pessoas que também tiveram.

Cursos online

Portais/blogs nacionais

Tableless é um portal que me acompanhou desde o início da minha carreira. O conteúdo inicialmente postado pelo Diego Eis e depois colaborativo é excelente.

Melhor referência de SEO no Brasil. O conteúdo free é excelente, porém com um investimento razoável você tem acesso ao Premium, porém se você não pretende seguir carreira na área não é tão necessário assim.

Instrutor, desenvolvedor e coordenador na Caelum. É um dos grandes nomes brasileiros e mantém um blog excelente.

Leitura super recomendada.

Blog tocado pelo Caio Gondim e Almir Filho, ambos da Globo.com. Conteúdo de primeira e geralmente único no Brasil.

Blog tocado pelo Pedro Rogério tem muito conteúdo bacana também.

Blog muito bom sobre UX. Não conheço nenhum outro nacional que toque tão bem no assunto.

Muito conteúdo bacana gratuito. Além disso oferecem um plano bem em conta para ter acesso ao acervo completo.

O conteúdo é razoável e já foi melhor, porém usei muito no meu início de carreira.
Não posso deixar de citar aqui, principalmente pelas vídeo aulas do Felipe Cardozo que foram essenciais nos meus estudos.

Portais/blogs gringos

Imagine um local onde os melhores autores do mundo front end se reunem para postar seus melhores artigos. Ele existe e se chama Smashing Magazine.

O conteúdo é simplesmente fantástico.

  • Família TutsPlus

Quer aprender sobre desenvolvimento Web? net.tutsplus.com

Photoshop? psd.tutsplus.com

Webdesign? webdesign.tutsplus.com

Wordpress? wp.tutsplus.com

Site awards

Awwwards faz parte dos “premiadores”. Basicamente as agências mandam seus melhores cases e um jurí altamente qualificado avalia e seleciona os melhores para exibir no site.

Obviamente você vai encontrar sites sensacionais por lá, o que serve de base para o desenvolvimento dos seus.

Mesma pegada do Awwwards.

Observação desnecessária: O FWA era desenvolvido em Flash porém ao realizar a migração para HTML/CSS mantiveram um comportamento muito semelhante a versão original. Algumas pessoas demoraram a notar a diferença.

Documentações

Sempre que for estudar alguma linguagem/framework/library, procure acompanhar a documentação.

Em tese, todas deveriam ser excelentes formas de aprendizado, mas algumas são bem obscuras (AngularJS) e mal documentadas.

jQuery, PHP, Git e Wordpress são bons exemplos de documentações bem organizadas.

Projeto criado pelo Thibaut que mantém dezenas de documentações diversas num único ambiente.

Bem parecido com o DevDocs, porém não incorpora de fato a documentação.

Performance

O guia de como perder peso no browser (projeto brasileiro) é uma excelente referência para performance.

YSlow é uma extensão usada no browser que aponta os principais erros de performance do site.

Projeto semelhante ao YSlow só que exclusivo do chrome.

Weekly

Novidades semanais direto no seu email.

Twitter

  • @paul_irish
  • @chriscoyier
  • @codepo8
  • @davidwalshblog
  • @brad_frost
  • @cowboy
  • @leaverou
  • @souders
  • @jeresig
  • @smashingmag
  • @elijahmanor
  • @addyosmani
  • @zenorocha
  • @shiota
  • @diegoeis
  • @davitferreira
  • @davidsonFellipe
  • @maujor
  • @danielfilho
  • @bernarddeluna
  • @osuissa
  • @caio_gondim
  • @almirfilho
  • @pinceladasdaweb
  • @millermedeiros
  • @jaydson
  • @elvisdetona
  • @guiiipontes
  • @jcemer
  • @eduagni
  • @leandrooriente

Grupos no Facebook

Outros guias

Por Vitor Britto

Versão brasileira desenvolvida por Oswaldo Cauan

Contribua

O guia está incompleto, porém acredito que já seja um MVP razoável para publicar. Vou fazer algumas atualizações essa semana e gostaria muito de algumas contribuições.

Tenho tido contato com diversas pessoas com dúvidas sobre fontes seguras de estudo e nada melhor que um guia bem detalhado.

Pesquisa sobre o desenvolvimento front end no Brasil. Participe!

Pessoal o Breno Calazans (desenvolvedor na VTEX e aluno na PUC-Rio) está fazendo uma pesquisa bem legal sobre os desenvolvedores front-end brasileiros.

A pesquisa é bem curtinha e faz uma mapeamento amplo da área.
Os dados obviamente vão ser públicos e expostos no final do mês. Provalvemente irei expor aqui no site o resultado também.

Segue o link para a pesquisa: breno.typeform.com/to/DCy9FS.
Não deixem de colaborar.

Comentários