O que é desenvolvimento front-end?
Desenvolvimento front-end corresponde a todo desenvolvimento voltado a camada de cliente da aplicação, ou seja a camada de interface que interage diretamente com o usuário.
Para que serve o front-end?
O front-end serve principalmente para facilitar a interação de usuários com aplicações, construindo interfaces que facilitem ao usuário a manipulação das aplicações.
Imagina se ainda hoje usássemos sistemas operacionais comumente o MSDOS que obrigariam os usuários comuns a aprender e decorar comandos para poder utilizar suas aplicações? O windows e sua interface gráfica cheia de janelas intuitivas é um bom exemplo da importância do front-end principalmente para a popularização da informática como conhecemos hoje.
Ok, mas o que preciso saber pra me tornar um desenvolvedor front-end?
Hoje em dia as tecnologias mais utilizadas para desenvolvimento front-end são as tecnologias web(HTML, CSS, Javascript), principalmente por serem utilizadas em desenvolvimento para as mais diversas plataformas, podemos criar sistemas que rodem desde desktop até apps mobile usando essas tecnologias e por isso são hoje as mais buscadas no mercado.
Mas eu nunca fui bom de matemática, será que eu consigo programar?
As pessoas ainda associam programar com um conhecimento muito avançado de matemática, ou acham que são incapazes de aprender pelos mais diversos motivos, isso é uma grande mentira qualquer pessoa disposta pode aprender e se tornar um bom profissional na área.
Isso quer dizer que é fácil? Não! É uma área que exige muito estudo, exige atualização constante, exige muita dedicação e que tem muito conteúdo a se aprender.
Se essas características não são um problema pra você, apesar de não ser um profissão fácil é uma profissão que tem bons salários(principalmente pra padrões de brasil) e atualmente em 2021 cada vez se tornam mais necessários profissionais de tecnologia.
Mas então o que eu preciso estudar? Por onde começo? Aonde eu foco?
Um dos grandes problemas, principalmente pra quem começa a estudar por conta e não saber aonde focar os estudos já que tem muito material, muito conteúdo disperso e fica bem complicado de se guiar sem ter uma noção da área, exatamente por isso a existência desse guia.
1 - Git Github
Git é uma ferramenta de versionamento de código bastamente utilizada na área de TI, Github é um site que abriga codigos git e oferece diversas ferramentas de trabalho pra facilitar a vida principalmente de equipes de desenvolvedores.
Aqui um ponto polêmico, geralmente as pessoas não recomendariam começar pelo git mas se você já tem algum conhecimento de informática e tem uma certa facilidade eu recomendo, pois vai te ajudar muito no desenvolvimento dos seus estudos nas demais tecnologias, você vai poder guardar seus códigos no github utilizando ele como "nuvem" e conforme avança nos seus estudos nas demais tecnologias vai colocando seus conhecimentos no git em prática.(Lembrando que nessa área a prática é muito importante).
Lembrando que entender o git não é tão trivial então se estiver com dificuldade não deixe isso ser um impeditivo no seu desenvolvimento, pule o git e pode partir pra HTML e CSS tranquilamente.
Recomendações cursos gratuitos
-
Guanabara tem uma ótima didática pra iniciantes na área recomendo principalmente para aqueles com menos conhecimento em informática e tecnologia.
Curso gratuito de git do curso em video professor Gustavo guanabara
-
Rafaella Ballerini tem uma abordagem mais prática e direta, recomendo para aquelas pessoas que já tem um pouco mais de familiaridade com a tecnologia.
O QUE É GIT E GITHUB? - definição e conceitos importantes 1/2
COMO USAR GIT E GITHUB NA PRÁTICA! - desde o primeiro commit até o pull request! 2/2
2- HTML & CSS
HTML, CSS e javascript são a base da web, eu gosto da analogia de corpo humano pra explicar os 3, imaginemos que o html é o esqueleto que estrutura o corpo e dá sustentação, o CSS são os musculos e a pele que dão a aparência ao corpo e javascript é o que da vida, controla os comportamentos, faz movimentos... etc.
Nesse caso vamos focar em HTML e CSS pq não são examente linguaguens de programação e são diretamente ligadas em si.
Html é o que chamamos de linguagem de marcação, que consiste em tags para marcar semanticamente um documento através de tags e CSS é uma linguagem de estilo que vai transformar aquele documento em algo mais visual.
Pq iniciar com HTML & CSS e deixar o javascript de lado primeiramente? Pq são paradigmas diferentes e mesmo só com HTML e CSS já conseguimos construir sites estáticos e ver a evolução do nosso trabalho. Inclusive podemos publicar facilmente sites dessa forma no github, só pesquisar no google sobre "GH-PAGES", inclusive nunca tenha medo de pesquisar no google uma das skills importantes de um desenvolvedor e saber pesquisar no google, principalmente em inglês.
Recomendações cursos gratuitos
Um curso bem legal do Chief of Design aborda pontos bem interessantes tem uma boa didática.
Curso gratuito de html & css do Chief of design-
Mais um do Curso em video com o professor Gustavo Guanabara, se não entrar pelo link eu recomendo o novo curso(existe um mais antigo no curso em video), esse do link é mais atualizado.
Curso gratuito de HTML & CSS do curso em video professor Gustavo guanabara
-
Aqui um curso um pouco diferente e em inglês, esse consiste em prática, chama-se FreeCodeCamp, infelizmente só tem em inglês mas eu recomendo muito fazer a trilha de Responsive Web Design deles, além de praticar bastante tem bons desafios no final que podem servir de portfólio no futuro. (Um truque aqui pra quem tem dificuldade no inglês, use o translate do google pra facilitar entendimento dos enunciados, se por acaso traduzir a página, lembre-se de tirar a tradução na hora de escrever e submeter o código)
3- Javascript
Aqui chegamos na linguagem de programação, a principal ferramenta de um desenvolvedor frontend e por isso essa é a parte do nosso programa de estudos que devemos olhar com mais carinho, não ter uma boa base de javascript pode te trazer boas dores de cabeça no futuro, principalmente para aqueles que querem pular essa etapa e ir direto para os frameworks.
A dica aqui é praticar, procure exercícios de lógica e pratique bastante principalmente a manipulação de arrays e objetos.
Recomendações cursos gratuitos
-
Curso curto do canal node studio, tem uma diática bacana e explica muito bem
-
Mais um do Curso em video com o professor Gustavo Guanabara, se não entrar pelo link eu recomendo o novo curso(existe um mais antigo no curso em video), esse do link é mais atualizado.
Curso gratuito de HTML & CSS do curso em video professor Gustavo guanabara
-
Aqui um curso um pouco diferente e em inglês, esse consiste em prática chama-se FreeCodeCamp, infelizmente só tem em inglês mas eu recomendo muito fazer a trilha de Responsive Web Design deles, além de praticar bastante tem bons desafios no final que podem servir de portfólio no futuro. (Um truque aqui pra quem tem dificuldade no inglês, use o translate do google pra facilitar entendimento dos enunciados, se por acaso traduzir a página, lembre-se de tirar a tradução na hora de escrever e submeter o código)
Free code cap trilha "JavaScript Algorithms and Data Structures"
4- Frameworks
O mercado front-end hoje em sua imensa maioria trabalha com frameworks javascript, entendo que aqui o conhecimento sobre as principais ferramentes do trabalho frontend já esteja consolidado e no momento para de fato se inserir no mercado seu objetivo seja aprender a usar uma das ferramentas que facilitam o desenvolvimento, chamadas de framework.
Existem diversas ferramentas pra isso, mas hoje(2021) as mais populares e mais queridinhas do mercado são com certeza Angular, react e vue.
Essa é uma escolha que precisa ser pessoal de cada um, então aconselho que pesquise sobre e escolha a que mais se identifique ou até a que te de melhores chances de ser empregado, lembrando que se sua base de JS for boa você consegue aprender qualquer uma delas com certa facilidade, depois só é nescessário se aprofundar, pra conhecer a fundo as "libs" e ferramentas mais usadas de cada framework.
Recomendações cursos gratuitos
-
Curso de angular da Loiane Gronner, um curso enorme e muito completo e que entra a fundo em diversos aspectos do framework, inclusive começa em uma versão do framework e termina em outra. Recomendo muito, um dos melhores materiais que já vi sobre o framework e gratuito.
-
Para react eu infelizmente não consegui um curso estruturado do inicio ao fim que realmente gostei do framework mas deixo o canal da rocketSeat, que sempre tem bons materiais sobre e sempre solta bootcamps, inclusive bem nivelados para quem quer aprender esse framework. Deixo tambem o link pra trilha de Front end development libraries da freeCodeCamp que abrange react.
-
Um excelente curso e vue3 do Matheus Battisti, tem uma excelente didática e domina bastante o framework.
5- Mãos a Obra
Agora que já tem bastante conhecimento consolidado é hora de por os conhecimentos em prática e criar seu portfólio, criar projetos que te coloquem em uma situação de desenvolvimento real de criar um produto, cometer diversos erros e aprender com eles, pois isso é uma das coisas que vai te fazer um bom desenvolvedor.
Como eu sei que esse é o momento que muita gente trava sem ter ideia do que fazer, vou deixar esse link pro repo do Felipe Fialho com desafios reais de front end, que algumas empresas pedem.
Outro desafio é criar uma página pra listar dados consumidos de uma api, temos diversas apis públicas que podem ser usadas pra esse fim, deixo aqui algumas sugestões.
Pokeapi: Não pode faltar uma api de pokemon
AdvicesSlip: Retorna conselhos geniais...
FunTranslations: Traduz textos para linguas exóticas
rickandmortyapi: pra quem curte rick & morty
chucknorris: Api de piadas do chucknorris
Pesquisando pela internet da pra achar muitos outros exemplos de acordo com o que preferir.
Se você chegou aqui, cumpriu esse plano de estudos com certeza já tem capacidade de andar com as próprias pernas e se desenvolver sozinho a partir daqui, espero ter ajudado de alguma forma e que seus objetivos tenham sido alcançados.
Top comments (0)