Contexto

Muito tempo atrás, quando as linguagens de programação começaram a ser desenvolvidas, o acesso aos recursos eram muito limitadas e o conhecimento era adquirido, basicamente, através de livros. Os programadores interagiram principalmente localmente, na mesma organização ou grupos.

Hoje, o cenário é completamente diferente e “nada acontece em nossa sociedade se não for intermediada por um software. Transações financeiras não acontecem. Leis não são aplicadas. Cirurgias não são feitas. Remédios não são criados. Aviões não voam. Carros não dão a partida. Despertadores e telefones não tocam. Mantimentos não são comprados. Jogos de futebol não são jogados. Luzes não acendem. Sem software nada acontece.” Robert C. Martin a.k.a Uncle Bob (Tio Bob).

Como dito pelo tio Bob, um dos criadores do manifesto ágil, na era da informação, praticamente nada mais acontece na sociedade sem a intervenção de nós, desenvolvedores de software. Somos responsáveis por traduzir as regras do mundo e dos negócios para a linguagem dos computadores. O impacto disso na economia foi tão grande que em 10 anos as 5 maiores empresas do mundo deixaram de ser predominantemente petroleiras e conglomerados para serem empresas de tecnologia. E não apenas causou impacto na economia mundial, como também na vida de cada um de nós, em cada momento.

nada acontece em nossa sociedade se não for intermediada por um software. Transações financeiras não acontecem. Leis não são aplicadas. Cirurgias não são feitas. Remédios não são criados. Aviões não voam. Carros não dão a partida. Despertadores e telefones não tocam. Mantimentos não são comprados. Jogos de futebol não são jogados. Luzes não acendem. Sem software nada acontece

Source: https://milfordasset.com/insights/largest-companies-2008-vs-2018-lot-changed

O que vocêPrecisa saber

Como já dizia Tio Ben “com grandes poderes vem grandes responsabilidades” e os grandes impactos da tecnologia não foram apenas para o bem. Até mesmo quando tudo começou, nos meados da década de 40, Alan Turing já previa que seria necessário a manutenção de uma certa disciplina para lidarmos com tanto controle e poder. Pudera. É certo que linhas de código podem ganhar milhões e salvar vidas. Entretanto, se feitas sem o devido cuidado e disciplina, também podem causar imensos desastres.

Casos como “O bug do millenium”, “Heartbleed”, “Therac-25” e muitos outros (espero que vocês pesquisem esses casos) nos quais erros cometidos por programadores causaram imensas perdas financeiras, invasão de privacidade ou até morte, já não são mais novidade no mundo.

E quais carreiras você pode seguir

Front-end: Desenvolvedor focado em interfaces e interações diretas com os usuários. Back-end: Desenvolvedor focado em criar e manter as regras de negócios, bancos de dados e APIs (Application Programming Interface). DevOps: Desenvolvedor focado em criar e manter processos de infraestrutura, segurança e monitoramento. Você pode encontrar um Roadmapping bem mais detalhado sobre isso neste artigo doGitHub.

Por ondeComeçar?

Aqui, iremos disponibilizar uma série de conteúdos para você consumir e iniciar sua jornada em Desenvolvimento Front-End. Esse conteúdo foi escrito e curado pelo nosso Blackbelt, (ex-gama), transformador e mentor: Vitor Savedra.

Git

O mais popular sistema de controle de versão. Certamente, você não começará sua carreira/estudos em desenvolvimento sem aprender um pouco sobre e, entender como isso tudo funciona, vai evitar muitos problemas e retrabalhos na sua trajetória. - tudo o que você queria saber sobre Git e GitHub, mas tinha vergonha de perguntar - Git - Guia prático

SSH

O protocolo SSH permite aos usuários controlar e modificar seus servidores pela internet, remotamente. Conceito importante e popular que todas as pessoas desenvolvedoras web devem saber. É cada vez menos comum acessarmos diretamente o terminal do servidor, no entanto, o entendimento deste protocolo vai te ajudar quando precisar realizar login no GitHub, Gitlab e/ou demais plataformas.

HTTP/HTTPS

O HTTP/HTTPS é um protocolo de comunicação para transmissão de documentos hipermídia, como o HTML. É aqui que você começará a se habituar com métodos GET, POST, PUT, DELETE e entre outros. Dominar seus conceitos, é de suma importância. - HTTP - REST: Princípios e boas práticas

Uso e noções básicas da linha de comando Linux

Não apenas para pessoas desenvolvedoras web, como para qualquer pessoa programadora, a linha de comando do Linux é muito importante. Gaste algum tempo para aprendê-la. - Comandos importantes Linux

Estrutura de dados e algoritmos

Uma boa analogia, é compararmos estrutura de dados e algoritmos com os blocos de uma construção. Eles, são parte fundamental do seu software/aplicação. O bom entendimento sobre esses conceitos, tornarão a qualidade de entrega do seu próximo ou atual trabalho muito melhores. - Estrutura de dados do Javascript

GitHub

É a principal plataforma “social” para compartilhamento de projetos, códigos, snippets, etc. É aqui, onde você poderá colaborar com projetos de código aberto (open-source) e, construirá seu portfólio. Logo, é também aqui que empresas e recrutadores(as) se apoiarão para acompanhar sua evolução em hard-skills de desenvolvimento. Há outras plataformas muito boas e semelhantes ao GitHub, como BitBucket e Gitlab, no entanto, não são tão ativas em questão de comunidade. - Hello World

HTML e CSS

HTML e CSS pode ser encarado como a espinha dorsal de qualquer site. O HTML fornece a estrutura/esqueleto enquanto o CSS fornece o estilo e torna-o melhor visualmente. Se você quer tornar-se uma boa pessoa desenvolvedora, esses, são requisitos obrigatórios. - HTML - CSS

Javascript

Não menos importante do que o item anterior, o JavaScript é responsável pelas interações em sua página. É o que torna os pilares anteriores, “vivos”. Dada a dinamicidade e adaptação do JavaScript, fica difícil até mesmo exemplificar aplicações, que vão de simples modificações baseadas em comportamento, como requisições complexas em APIs e serviços externos. É aqui, que seu software/aplicação começa a ganhar super-poderes! o/ - Javascript - You Don't Know JS (book series) - Eloquent Javascript

Bootstrap

Bootstrap é um framework CSS muito popular e incrivelmente adaptável, o que quer dizer, que você pode-o utilizar junto à demais bibliotecas e frameworks, com simples passos. Sua documentação é bastante sólida e sua comunidade, continua super ativa, mesmo ~8 anos após seu lançamento. Bootstrap cumpre com o papel de tornar o desenvolvimento mais fácil. - Documentação oficial

React

Essa é certamente a parte mais delicada desse roadmap, dado que há uma grande “concorrência” para a escolha da melhor solução entre Vue.js, Angular e o próprio React. Vale destacar que, a melhor solução, sempre será aquela que melhor se adequa ao seu projeto, ao seu time e às suas reais necessidades. Cada biblioteca e framework contará com características e funcionalidades que farão mais ou menos sentido para o que estará desenvolvendo. Dito isso, focaremos no React apoiando-nos em sua popularidade e maturidade. Fique à vontade para trocar esse item pela biblioteca/framework de sua preferência. - Documentação oficial - Tutorial: Intro to React

Outros conteúdos

Podcasts

  • Hipsters.tech
  • Dev na estrada
  • Samurai Cast
  • Canais no YouTube

  • Programador BR
  • BrazilJS
  • CollabCode
  • Rocketseat
  • LINUXtips
  • Código Fonte TV
  • Leituras(além das listadas acima):

  • Roadmap Front-end
  • 100 days of code - Front-end development
  • Agile Manifesto
  • Scrum Guide
  • Listas de certificações

    freecodecamp : aqui, você vai encontrar uma lista com muitas certificações for free para aplicar e organizadas por categoria de aprendizado. Divirta-se!

    Lista deFerramentas

    O/A desenvolvedor/a front-end é a pessoa responsável por implementar as interfaces que a galera de design UI/UX desenvolve, sempre focando para que tudo seja responsivo e visto da melhor maneira pelo/a usuário/a. Antes listar as ferramentas, lembram no tópico anterior onde falamos sobre o desenvolvimento de soft skills? Temos algumas dicas extras essenciais para te ajudar nessa jornada. São life hacks que irão te ajudar não só com o desenvolvimento das habilidades técnicas necessárias para a profissão, mas também no desenvolvimento de seu mindset.

    Dica #1 - Encontre mentores

    Essa é a primeira dica pois serão essas as pessoas que irão influenciar diretamente na sua jornada de crescimento profissional (e até pessoal!). É uma pessoa sênior, geralmente na área de atuação, que lhe dará encorajamento e suporte na sua construção através de feedbacks, conselhos, perspectivas diferentes, experiência e assim por diante. Se existe alguém que você admira e se inspira, não hesite em lhe enviar um email. As mentorias podem ser pontuais ou recorrentes, dependendo do seu relacionamento com esse/as profissionais.

    Dica #2 - Faça cursos

    Mantenha-se sempre em progresso com seu aprendizado. E digo isso não somente para o foco da sua área, mas em áreas correlatas também. Tenha em mente que, hoje, é essencial entender não somente sobre seu processo de trabalho, mas também sobre aspectos que podem impactar diretamente no resultado de suas entregas. Então: UX design, outras linguagens, negócios, mercado, etc… Fica de olho!

    Dica #3 - Frequente eventos e grupos no Facebook

    Essa é uma dica básica, mas que precisa ser lembrada sempre: networking é tudo! É muito provável, por exemplo, que seu/ua mentor/a surja da sua rede de contatos e relacionamentos. Essa “rede” é importante não só para seu crescimento pessoal, mas profissionalmente falando, mantém em aberto novas possibilidades de negócios e aprendizados. Além disso, frequentar eventos, meetups, conferências e etc, é uma boa forma de absorver e compartilhar conhecimento e experiência.

    Dica #4 - Frequente eventos e grupos no Facebook

    Essa é uma dica básica, mas que precisa ser lembrada sempre: networking é tudo! É muito provável, por exemplo, que seu/ua mentor/a surja da sua rede de contatos e relacionamentos. Essa “rede” é importante não só para seu crescimento pessoal, mas profissionalmente falando, mantém em aberto novas possibilidades de negócios e aprendizados. Além disso, frequentar eventos, meetups, conferências e etc, é uma boa forma de absorver e compartilhar conhecimento e experiência.

    Dica #5 - Desenvolva suas soft skills

    É claro que habilidades técnicas são importantes para pôr em prática tudo que precisa ser realizado, para entregar melhores resultados e ter um bom desempenho. No entanto, aqui, costumamos dizer que “as empresas contratam pelas hard skills (habilidade técnicas) e demitem pelas softs (comportamental)”. E isso acontece pois as soft skills dificilmente são metrificadas, elas precisam ser desenvolvidas através de vivências e relacionamentos com as pessoas ao nosso redor. São aptidões mentais, emocionais e sociais. Capacidade de trabalhar em equipe, escuta ativa, comunicação não-violenta, inteligência emocional, produtividade, foco e por aí vai. É claro que não dá para ser um super humano, super desenvolvido/a em todas essas e outras características. Mas acompanhar o próprio processo, ter escuta ativa em relação aos feedbacks de líderes e equipe e tentar desenvolver esses pontos, já é um ótimo exercício. Copiou? Então beleza. Vamos às listas:

    EDITORES DE CÓDIGO:

    VSCODE

    O Visual Studio Code é um editor de código-fonte desenvolvido pela Microsoft para Windows, Linux e macOS. O diferencial dele são os plugins que, no geral, auxiliam bastante.

    SUBLIME

    O Sublime Text é um software multiplataforma de edição de texto, no entanto, utilizado por muitos desenvolvedores para editar código-fonte, escrito em linguagem Python. Ainda é bastante usado - apesar de estar perdendo espaço para o VSCODE - super leve, um ótimo editor.

    BRACKETS

    Brackets é um editor de código-fonte com foco principal no desenvolvimento web. Criado pela Adobe Systems, é um software livre e de código aberto, sob a licença MIT e, atualmente, é mantido no GitHub pela Adobe e por outros desenvolvedores de código aberto.

    FRAMEWORKS FRONT-END(CSS):

    BOOTSTRAP

    O Bootstrap é uma ferramenta gratuita para desenvolvimento HTML, CSS e JS. Serve para criar protótipos rapidamente ou aplicações completas com nossas variáveis e mixins Sass, sistemas de grid responsivo, componentes pré-construídos e poderosos plugins com jQuery.

    MATERIALIZE

    Criado e projetado pelo Google, o Material Design é uma linguagem de design que combina os princípios clássicos do design bem-sucedido com a inovação e a tecnologia. O objetivo do Google é desenvolver um sistema de design que permita uma experiência de usuário unificada em todos os seus produtos em qualquer plataforma.

    COLABORAÇÃO E METODOLOGIAS:

    TRELLO

    O Trello é utilizada para o controle e gerenciamento de projetos, foi desenvolvida utilizando a metodologia Kanban como base. Ela reforça a participação da equipe como um todo, definição de tarefas, seu andamento e as responsabilidades de cada um. É uma ferramenta básica e de fácil utilização para organização e gerenciamento.

    Scrum e Kanban

    Como dev, é comum fazer parte de times multidisciplinares em diferentes projetos. O Scrum e Kanban são as metodologias de gestão de projetos mais utilizadas de hoje em dia.

    CONTROLE DE VERSÃO

    GIT

    O Git, já citado anteriormente, é um sistema de controle de versão distribuído gratuitamente e de código aberto projetado para lidar com tudo: de projetos pequenos a muito grandes, com velocidade e eficiência.

    VALIDADORES DE ACESSIBILIDADE

    Além desses listado, vale dar uma conferida neste artigo, do iMasters, sobre “O que é Acessibilidade Web e como tornar seu site mais acessível”.

    OUTRAS DICAS

    No repositório do Felipe Fialho no GitHub, você pode encontrar a lista “🚒 Useful tools to frontenders” com muitas outras ferramentas úteis para utilizar.

    🤘

    Profissionaisem destaque

    Alexandre Paez

    CTO na Gama Academy

    Diego Pinho

    Professor Especialista de Programação e Jogos na Escola Móbile

    Leonardo Bucceroni

    Desenvolvedor full-stack sênior na TIVIT

    Inajá Azevedo

    CTO at M4U

    Camila Achutti

    CEO and Founder at Mastertech

    Alda Rocha

    Creator and Founder at Codamos

    Fernanda Coelho

    Head of Technology e Co-fundadora na Diversifix

    Yara Mascarenhas

    Founder at The Developer's Conference

    Parceria deconteúdo

    Podcast School of Net: o futuro da profissão front-end

    Neste episódio conversamos sobre o mundo front-end, ferramentas, um pouco da história do tableless.com.br e o futuro da profissão, que a cada dia está ganhando cada vez mais relevância.

    Participantes

    Wesley WilliansDiego Eis

    Links

    Tableless.com.brSites convertidos pelo TablelessPlanos de estudo de frontendSketchAdobe XD

    Acesse o blog e matéria aqui:

    Você pode continuar a leitura desse conteúdo através desse link

    Próximospassos

    Conhecer os Cursos da Gama Academy

    Somos uma startup de educação que trabalha com recrutamento, seleção e treinamento para o mercado digital.

    Temos um programa chamado Gama Experience que é voltado para o desenvolvimento de 4 principais áreas desse mercado: Marketing (Growth Hacking), Vendas (Inside Sales), Design (UX/UI) e Desenvolvimento (Front-end).

    É um programa intensivo de 5 semanas com metodologia própria que desenvolve habilidades técnicas e comportamentais, com aulas online e encontros presenciais e que conectam o/as participantes com profissionais das mais diversas empresas de tecnologia e startups.

    Nossa missão é impactar a vida de 1 milhão de pessoas através da educação.

    O curso de Desenvolvimento (Front-End) possui mais de 14 horas de conteúdo técnico e conta com transformadores como: Diego Pinho - Professor Especialista de Programação e Jogos na Escola Móbile.

    Além disso, são mais de 10 horas de conteúdo específico para o desenvolvimento de soft skills e atividades presenciais que estimulam a resolução de problemas reais do mercado.

    Depoimentos de alumnis 💚

    Hurá Bittencourt
    Desenvolvedor full-stack na Gama Academy

    "Sempre sonhei muito grande e com muito foco nos meus objetivos. Quando terminei a faculdade, no meio de 2018, sabia que precisava de algo que me preparasse e me fizesse entrar no mercado. Sem dúvida a Gama Academy foi o maior checkpoint da minha vida!"


    Gregory Lima
    Desenvolvedor front-end na 99jobs

    "De: Coordenador de Logística + Preocupado + Frustrado em uma empresa tradicional; Para: Desenvolvedor Front-end + feliz + satisfeito + horário flexível em uma empresa incrível, cheia de propósito, fazendo aquilo que realmente gosto.

    A diferença do "De" para o "Para" tem 1 ano e 4 meses e no meio disso tudo tive o desafio de fazer Gama XP13. Terminei o processo com muita certeza do meu propósito e a segurança de que tenho o que preciso para alcançar meus objetivos. Sou grato a essas 5 semanas e o que elas me ajudaram a me tornar como profissional."


    Rafael Pazini
    Software Engineer no Mercado Livre

    "Minha paixão por computadores começou quando ganhei meu primeiro - com uns 9 anos - eu não sabia mexer em nada e por isso acabava quebrando ele quase uma vez por mês. E uma vez que minha mãe não quis pagar para arrumar. Então eu comecei a fuçar e conseguir arrumá-lo, foi aí que decidi que queria trabalhar com isso.

    Quando terminei a faculdade resolvi me mudar para são paulo, arrumei trabalho como Engenheiro de Sofware Júnior em uma startup através do Gama. Trabalhei 7 meses nela e troquei de startup para conseguir mais desafios, fui para a Escale onde trabalhei com pessoas muito boas que me deram uma base de conhecimento incrível sobre testes, lógica e qualidade de código e projetos, tudo acontecia muito rápido e se fosse mal feito isso quem se ferrava pra arrumar éramos nós mesmo. Hoje sou Engenheiro de software no maior e-commerce da América Latina (Mercado Livre)."

    Baixar conteúdoem PDF

    Faça o download desse material para ler de onde você estiver! Sugiro que você também salve essa página no seus favoritos, pois nós sempre a atualizamos e você pode voltar aqui quando quiser!

    Maisartigos

    React Native: lições aprendidas durante o desenvolvimento de um app mobile

    Saiba mais

    10 projetos de desenvolvimento para melhorar seu portifólio e aprender a programar

    Saiba mais

    React: 22 ferramentas milagrosas para devs em 2019

    Saiba mais
    Ir para o menu