No mundo moderno, mais e mais pessoas querem aprender a programar, sem saber por onde começar, mas ao mesmo tempo, a indústria de TI é o que eles sonham porque ser um programador web está na moda. Para muitas pessoas, ele posiciona o primeiro passo neste mundo maravilhoso, como desenvolvedores web ou desenvolvedores front-end juniores, desenvolvimento front-end básico. No entanto, você precisa começar em algum lugar antes de encontrar o emprego dos seus sonhos. Aqui está um livro de conhecimento para iniciantes para você obter algumas respostas: Existe um curso gratuito para desenvolvedores front-end? Como aprender por conta própria online, onde encontrar materiais de aprendizagem para dominar HTML, CSS e JavaScript. Se você conhece HTML e CSS, já pode se candidatar ao cargo de designer de layout da web.
Quais são os fundamentos do desenvolvimento front-end?
Entrar no mundo da programação web pode ser difícil para pessoas novas. Tantos conceitos soam estranhos e se tornam problemáticos na fase de escrita. Como escrever: desenvolvedor de software ou desenvolvedor front-end? Talvez um desenvolvedor front-end, ou melhor, um engenheiro de software front-end? No entanto, o mais comum é a entrada de hífen. Desenvolvedor front-end—a pessoa responsável pela parte visual do aplicativo (o que vemos, nós = usuários do site).
Normalmente, o desenvolvedor front-end trabalha com um designer gráfico (web designer) que fornece o design gráfico. Muitas vezes, os desenvolvedores front-end têm a oportunidade de trabalhar com um designer de UX que propõe e cria um protótipo de interações que ocorrerão nos sites. O papel dos desenvolvedores front-end é juntar tudo. Diz-se popularmente que um desenvolvedor front-end é encarregado de cortar um design gráfico - dividindo o design em partes menores e codificando (HTML e CSS) em sites que os usuários usam.
Em seguida, usando JavaScript, as interações mencionadas anteriormente foram adicionadas. Enquanto o HTML e o CSS3 nos permitem criar transições suaves e animações básicas, o JavaScript apresenta todas as interações avançadas do usuário da página. Usando JavaScript, adicionaremos um menu suspenso, um controle deslizante na página, validação de formulário, transições entre subpáginas ou animações avançadas e jogos 3D (por exemplo, usando Babylon-JavaScript). Dados para lógica em JavaScript do back-end do aplicativo, daí a cooperação de front-end - desenvolvedor de back-end.
As posições do desenvolvedor front-end variam muito. O trabalho de um desenvolvedor front-end em uma agência interativa e criativa, um desenvolvedor front-end em uma empresa de desenvolvimento de software, será diferente, e um trabalho diferente para uma pessoa que trabalha no desenvolvimento front-end de uma start-up .
Um desenvolvedor front-end de projetos gráficos de corte pode desenvolver para Desenvolvedores JavaScript - um programador da Web lidando principalmente com a escrita de lógica de aplicativos e operações avançadas de JavaScript. Além disso, um desenvolvedor front-end geralmente (assim como um desenvolvedor back-end) precisa planejar a arquitetura JavaScript do aplicativo e selecionar conscientemente estruturas e bibliotecas para o projeto.
O desenvolvimento front-end é fácil?
- Você pode ver o efeito rapidamente; Ao contrário de aprender desenvolvimento web/desenvolvimento back-end, criar pedaços de código mesmo em HTML puro imediatamente nos dá efeitos visuais, o que nos motiva a continuar trabalhando.
- Limite de entrada baixo – relativamente poucas habilidades de front-end são necessárias para iniciar uma carreira profissional em um estágio ou posição júnior logo no início.
- Muitas ofertas de emprego para juniores - especialmente quando as férias estão chegando e há muitos estágios de verão.
- Independência - podemos cuidar da criação de sites para nós mesmos e depois receber pedidos como freelancer. Afinal, no escopo básico, devemos ser capazes de configurar sites simples de A a Z.
De qualquer forma, aprender o básico para iniciar sua carreira profissional em um nível satisfatório levará de alguns dias a algumas semanas. Se você não tiver, por exemplo, 5 horas todos os dias e apenas algumas horas nos fins de semana, pelo menos seis meses serão úteis. Você receberá seu curso para um desenvolvedor front-end. E sim, isso é suficiente para entender o tópico corretamente.
O que precisamos para o desenvolvimento front-end?
Aqui está a receita para o sucesso. Para criar um site, você precisa:
HTML + CSS
Estes são os ingredientes básicos para construir um site. O HTML fornece a estrutura dos sites - os elementos descritos, e o CSS informa ao navegador como esses elementos devem ser. Depois de dominar HTML e CSS, você pode recriar qualquer design (gráfico) e transformá-lo em um site.
JavaScript
Uma linguagem de desenvolvimento front-end de programação web para a criação de sites. Graças ao JavaScript, você adiciona interatividade ao seu site, ou seja, desenvolve sites que respondem às ações do usuário. Você pode até construir jogos. Recomendamos dominar pelo menos o código JavaScript básico para entender como a linguagem funciona ou a lógica da linguagem de programação web. Então você pode ir para jQuery.
jQuery
Tecnicamente, não é uma linguagem, mas uma biblioteca JavaScript. Como um intermediário que permite escrever JavaScript de maneira mais fácil e rápida. Você insere o código jQuery; a biblioteca se preocupa com você e brinca com o tradutor para passar o significado do JavaScript um pouco complicado para o navegador. Embora hoje o jQuery seja "um pouco antigo", recomendamos aprendê-lo "a pedido" pois facilita o aprendizado de lógica de programação web e Bootstrap (framework CSS utilizado) e ainda aparece em ofertas de emprego.
Estruturas
Sua tarefa é simplificar o processo de criação de sites e aplicativos, fornecendo soluções prontas para os problemas mais comuns. Além disso, eles fornecem um padrão de como desenvolver seu código de maneira organizada. Para começar, sugerimos escolher uma estrutura CSS, por exemplo, Bootstrap (outras opções são: Foundation, Pure, YAML CSS) e, em seguida, adicionar uma das estruturas JavaScript atualmente populares: Angular 4, ReactJS, Vue.js, Ember.js, Meteor.js.
Git
Isso não está diretamente relacionado à codificação da Web, que entendemos que muitas vezes é adiada até o final. Erroneamente, quanto antes você começar a usar o Git, o sistema de controle de versão, melhor. Essa é a ordem que propusemos. Claro, você pode fazer de forma completamente diferente: pule jQuery e aprenda Bootstrap imediatamente após dominar o básico de HTML e CSS; no entanto, aconselhamos que você não vá muito longe na simplificação e corte da busca de soluções escritas à mão, e não use prefabs de um framework ou aprenda frameworks JavaScript com mal conseguindo obter uma linha em JavaScript puro.
Por onde começo com o desenvolvimento front-end?
Aprenda regularmente e tente aplicar cada nova habilidade na prática, mesmo em pequenos pedaços de código com apenas um propósito – mostrar o que você acabou de dominar. Compartilhe-os na web. Limite seus grupos motivacionais no Facebook. Depois de apenas 3 horas lendo histórias motivacionais, muitas vezes você não fica 3 vezes mais motivado. Você geralmente tem 3 horas a menos para o seu estudo.
Observe o mercado e leia os requisitos nas ofertas de emprego. Eles estão mudando! Estamos escrevendo este post hoje e provavelmente precisaremos atualizá-lo em um ano à medida que a tecnologia muda. Assim que você pegar o jeito do básico: HTML CSS JavaScript, algo novo certamente será tendência – atualize sua lista de "aprender". Procure workshops gratuitos (para aprender com mentores e fazer contatos interessantes simultaneamente) e um estágio na indústria o mais rápido possível. O trabalho vai acabar sendo o melhor professor.
O que é um exemplo de desenvolvimento front-end?
HTML + CSS
Três são provavelmente os sites mais famosos com cursos interativos de desenvolvimento web front-end. Livres, bem organizados, eles transmitem conhecimento para iniciantes com muita facilidade. Eles realizam cursos interativos no navegador. Não precisamos instalar nada em casa, apenas fazemos o curso, e nosso progresso é medido imediatamente.
Khan Academy, Codecademy e Homeschool
A Khan Academy tem materiais totalmente gratuitos e também tem a opção de usar outros idiomas da web. Esta é uma plataforma educacional, não apenas sobre desenvolvimento web. Você pode passar por várias tarefas, desde elementos básicos, incluindo HTML e CSS, até scripts JavaScript mais avançados.
Codecademy tem muito material gratuito e caminhos de desenvolvimento front-end pré-construídos interessantes que estão disponíveis apenas para usuários profissionais.
Code School - em nossa opinião, o curso mais organizado. Eles consistem em vídeos + uma parte interativa com tarefas de desenvolvimento front-end. O primeiro nível de cada curso é gratuito, mas, infelizmente, você tem que pagar pelo resto. No entanto, mesmo as partes gratuitas (geralmente em torno de 1 hora) valem a pena dar uma olhada.
Como escolher um curso para fazer?
Veja todas as três plataformas da web. Os tópicos se sobrepõem, mas vale a pena passar por alguns tópicos duplicados. Primeiro, a repetição consolida o conhecimento e, segundo, cada plataforma de front-end tem uma abordagem de ensino ligeiramente diferente. A escolha é sua. Muitas pessoas querem pagar por um Bootcamp mensal ou curso de desenvolvimento web, pois têm tudo de graça na ponta dos dedos. Nada incomum.
O pior é que temos muitos materiais e queremos aprender tudo o que precisamos rapidamente, sem checar ou selecionar – coloque tudo na bandeja e vá um passo além dos materiais básicos. Portanto, entendemos que se você não tem tempo para todos os cursos front-end e a tomada de decisões não é o seu forte, confira Khan Academy: Introdução ao HTML CSS—Desenvolvimento Web.
JavaScript
O que seria do nosso curso de desenvolvimento front-end sem usar JavaScript? Os sites interativos acima são ótimos. Eles têm cursos de JavaScript para nós – bons, simples, infelizmente não muito abrangentes, mas bons para o aquecimento. Se você já possui o básico de HTML e CSS, não precisa começar com as sugestões anteriores.
Para começar com 9 pequenos exercícios de desenvolvimento na introdução: por JavaScript, você pode construir sobre os mesmos tópicos em Udacity: JavaScript Intro, então (ou imediatamente) passar para um conjunto maior de tarefas: HTML / JavaScript: Criando Web Interativa Páginas.
jQuery
Mais um passo em nosso caminho de front-end, mas extremamente opcional. Atualmente, um curso de desenvolvimento front-end pode prescindir do jQuery. Especialmente porque existem muitas novas opções interessantes para desenvolvedores front-end hoje, analisamos as ofertas de emprego e ainda vale a pena tê-lo em estoque.
Sim, a Khan Academy e a Codecademy têm cursos de jQuery. No entanto, neste caso, eu gostaria de recomendar - um curso de desenvolvimento front-end jQuery Pluralsight (antiga Code School) de uma hora de duração e totalmente gratuito.
Estruturas de aprendizagem
Nesta fase, você mesmo pode escolher os materiais de front-end e avaliar sua adequação ao seu conhecimento. Quando se trata do framework Bootstrap, a construção de um site é baseada em uma grade de 12 colunas, e esse conhecimento é fundamental para entender o restante na prática. O Bootstrap permite que você crie sites responsivos (RWD) rapidamente, ou seja, adaptados para dispositivos móveis. Se você preferir aprender na forma de um tutorial: O curso de bootstrap está disponível na Code academy, e com o Daily Web, você criará seu primeiro slider de bootstrap em 30 minutos.
JavaScript de estruturas
Atualmente, um curso de desenvolvimento front-end decente certamente deve introduzir os frameworks JavaScript atualmente usados e pelo menos ensinar um. Você pode encontrar cursos interativos com frameworks no Pluralsight (antigo Code School), que são gratuitos por 14 dias. Você pode encontrar uma coleção muito rica de materiais gratuitos no scotch.io. Por outro lado, cancelar a inscrição onde você encontrará cursos gratuitos de desenvolvimento front-end para cada framework é um tópico para um post separado.
Existem muitos deles. A escolha é difícil, e conhecer todos é impossível. Seja qual você escolher para começar, apenas atenha-se a ele. Não pule de flor em flor porque depois de uma semana aprendendo desenvolvimento web; alguém lhe dirá que outro é melhor. Aprenda o primeiro e escreva um aplicativo web simples nele. Normalmente, aplicativos como planejadores, listas de tarefas e notícias de classificação são recomendados para iniciantes. Tudo o que você precisa é o nome da estrutura e o nome do aplicativo da Web que deseja criar.
Exemplos de cursos gratuitos:
- AngularJS
- Angular 2+ (atualmente 6—mas 4/5 são apenas outra versão de desenvolvimento front-end)
- ReactJS
- Vue.js
- Ember.js
É o fim? Não! Este é um excelente começo e uma base sólida para o Desenvolvedor Front-End Júnior.
O que vem depois desses cursos?
Comece trabalhando em seus projetos da web. Como escrevemos no início, documente seu trabalho desde as primeiras etapas de desenvolvimento de front-end e coloque o código no GitHub, mesmo que esteja longe de ser o ideal.
Você quer testar a si mesmo?
A melhor maneira de consolidar o que você aprendeu é através da prática. Passar pelo curso de front-end é uma coisa, mas apenas trabalhar em seus projetos da Web ensina você a codificar – a resolver problemas sozinho. Crie um formulário (página de destino) através do qual você pode enviar um e-mail para o autor da página.
Crie seu site de cartão de visita - portfólio - pense em usar JavaScript para preencher a tabela com uma sequência de Fibonacci, seu controle deslizante ou um simples jogo do zero. Acha que já tem habilidades de codificação, mas não tem habilidades gráficas, então o desenvolvimento que você faz é "feio"? Você é bem vindo! Escolha um design gráfico pronto, por exemplo, do Weekly Dev Challenge, e tente criá-lo.
Quanto tempo leva para aprender o básico?
Depende de você. A disciplina é o mais importante. A maioria das pessoas acha mais difícil aprender uma linguagem de programação da web, mas reservar um tempo para fazer cursos que não custam nada. Dominar o básico para configurar seu primeiro site pode levar de 1 a 3 meses, dependendo de quão ambicioso você é no desenvolvimento de front-end.
Para dominar JavaScript, eu acrescentaria mais 3 meses de aprendizado duro. Suponho que você esteja trabalhando, então dedicará cerca de 5 a 10 horas por semana ao aprendizado, ou seja, pelo menos 1 hora por dia. Você não se tornará um especialista em front-end em seis meses, mas é tempo suficiente para criar uma base para aprendizado adicional.
Procure ajuda on-line
Mais de uma vez durante o aprendizado, você terá problemas: Como centralizar um elemento? Por que esse script não está funcionando? HTML e CSS parecem diferentes no Chrome e no Firefox. Como se tornar um profissional no desenvolvimento front-end?
Isso é normal, mas quem pergunta não erra.
- Google — pergunte ao Tio Google, de preferência em inglês.
- Stack Overflow — provavelmente será o primeiro a exibir respostas do Stack Overflow. É um portal de desenvolvedor web onde os usuários postam perguntas relacionadas à linguagem de programação web, e outros (geralmente programadores web mais experientes) tentam lhe dar uma resposta sobre desenvolvimento front-end. As primeiras melhores soluções são pontos, e o autor da pergunta pode marcar um comentário que resolveu seu problema. Às vezes, existem várias ou uma dúzia de soluções, por isso vale a pena ler todas elas e verificá-las em seu lugar. Se alguma das soluções o ajudou, vote – dê uma seta para cima.
- Facebook — grupos de desenvolvimento front-end no FB para iniciantes podem te ajudar muito, principalmente quando você não sabe como perguntar sobre o seu problema. Carregue uma tela e seu código. Não espere que alguém escreva para você, mas os comentários certamente o levarão ao caminho certo. Infelizmente, com perguntas trivialmente simples, as pessoas sempre escreverão algo desagradável — é difícil, seja paciente. Recomendamos o grupo da Web — o suporte inicial é melhor para perguntas relacionadas a startups, e os moderadores garantem que não haja ódio.
- CanIUse — se o seu problema estiver relacionado ao CSS não funcionar em um de seus navegadores, verifique se o que você está usando é compatível com a versão que você está verificando. Dessa forma, você evitará pesquisas longas e tediosas por problemas de front-end fantasma.
Conclusão
Então, neste artigo, você aprendeu mais sobre o mundo de TI e ficaríamos felizes se pudéssemos ajudá-lo com orientação. O mundo do front-end é enorme e pode ser fácil para um iniciante se perder nele, mas nos concentramos em ajudar as pessoas a seguirem o caminho certo. Mas observe também que, além das linguagens tradicionais da Web, existe uma linguagem de programação da Web sem código . Até que as ferramentas sem código se tornassem amplamente disponíveis, o desenvolvimento de aplicativos da Web era feito exclusivamente por programadores da Web.
Felizmente, o tempo está se esgotando e agora qualquer aluno versado no material pode criar seu aplicativo da web ou página de destino. Depois de aprender o básico, mesmo no nível de conhecimento, HTML e CSS, você já pode encontrar o emprego dos seus sonhos. Muitos cientistas notaram que a linguagem de programação web melhora as habilidades humanas e contribui para o desenvolvimento de soft skills. No final, esta é a sua independência financeira. Conhecemos diferentes caras do mundo do front-end que lançaram suas start-ups e fizeram as coisas necessárias para o bem do nosso planeta.
E, é claro, essa abordagem tem vantagens:
- Facilidade de uso e grande potência.
- Ótima biblioteca de modelos.
- Suporte a configuração de vários parâmetros.
A linguagem de programação sem código ou visual é uma abordagem nova em que você não precisa escrever código do zero. Nós encorajamos você a usar ferramentas com interface gráfica, que é o futuro do desenvolvimento web. Aplicativos web front-end tradicionais são coisas legais, mas achamos que você precisa inovar, então nosso produto pode ser útil para você. Desejamos sinceramente encontrar o caminho certo para dominar a profissão de programador. Este caminho é espinhoso, mas se você o dominar, ele o satisfará por toda a sua vida que você passou neste tempo.
