Get best of the week

Se eu ensinasse Frontend hoje. Dicas para iniciantes

Meu caminho no desenvolvimento web começou há 5 anos. Durante esse período, consegui experimentar muitas tecnologias e, nos últimos 3 anos, desenvolvi-me na direção do frontend.

Neste artigo, gostaria de indicar claramente quais tecnologias um iniciante precisa aprender, além de compartilhar métodos para seu desenvolvimento. O guia é destinado a pessoas que estão dando seus primeiros passos no desenvolvimento da Web, e nele tentarei explicar em detalhes a essência de cada tecnologia. Também no final, vou lhe dizer para onde ir a seguir.

Então você quer se tornar um desenvolvedor Frontend. O que é necessário para isso?

Aprendendo HTML, CSS, Javascript

HTML e CSS


Essas duas tecnologias são necessárias para o layout do site. Layout é um arranjo de texto, imagens, botões e outros elementos da interface em uma página.

Usando HTML, podemos adicionar e descrever esses elementos. Inicialmente, eles serão brutos, com uma aparência padrão. Para mudar o estilo, CSS é usado. Permite especificar a cor, tamanho, localização e dezenas de outros parâmetros para a aparência do elemento.

Site sem CSS e com ele

Como dominar


Antes de tudo, você deve ler o artigo de revisão ou o vídeo sobre essas tecnologias. Então você entende a essência deles.

Então o layout é mais conveniente para aprender e melhorar na prática. Experimente layouts de layout para páginas ou elementos individuais. Você também pode tentar olhar para o processo de layout da página no Youtube e repetir depois do autor.

No começo, será difícil, e muitas vezes você precisará ir ao Google para resolver outro problema. Mas com o tempo, você aprenderá a encontrar rapidamente em sua cabeça a estrutura HTML correta e as propriedades CSS necessárias para o layout do elemento.

Onde obter idéias e layouts para o layout?


Usei o Dribbble e o CollectUI , mas também posso ser pesquisado no Behance e no One Page Love .

Você também pode fazer layouts reais no UI Store Design . Eu recomendo fazer layouts da Figma, como Ele é usado por muitos designers e, no futuro, você provavelmente estará trabalhando com ele. Também é gratuito e funciona no navegador.

imagem

Javascript


Esse idioma inicia a programação na web. Permite gerenciar elementos na página, descrever e controlar a interação com a interface.

Se estávamos criando uma página com HTML e CSS, o JavaScript é responsável pela parte dinâmica da página: animações, exibição de dados, processamento de ações e muito mais.

Por que eu preciso disso?


Um exemplo simples. Suponha que exista uma página na qual, com o clique de um botão, você precise exibir uma janela modal. HTML e CSS nos permitirão fazer o layout da própria página e da janela modal. No entanto, essas tecnologias não podem capturar e processar o clique de um botão.
É aqui que precisamos de JavaScript. Usando-o, descrevemos o comportamento na página. No código, queremos dizer: se o usuário clicou no botão, é necessário mostrar a janela modal.

Aqui está um exemplo dessa implementação usando jQuery :



Usando JavaScript, você pode executar praticamente qualquer operação na página. No entanto, seus recursos não se limitam à janela do navegador. Usando a plataforma Node.js. , esse idioma pode ser usado para desenvolvimento de servidores, criação de projetos e muito mais. No futuro, você precisará disso para trabalhar com grandes projetos criados a partir do Webpack . No entanto, aconselho você a aprender como usar o idioma dentro do navegador.

Como dominar


Sua melhor aposta é começar a aprender em learn.javascript.ru . Esse é um ótimo recurso, que é uma base de conhecimento para desenvolvedores iniciantes e avançados.

Aqui é importante entender os conceitos básicos do próprio JavaScript, bem como os recursos de sua operação no navegador. Se alguns tópicos parecerem muito complicados para você (por exemplo, protótipos ), você poderá ignorá-los e voltar mais tarde.

Não se empolgue apenas com a teoria do JavaScript. Eu recomendo que você tente sua mão ao mesmo tempo em que estuda e escreve scripts simples. Você também pode tentar analisar outras partes do código no Codepen .

imagem

Aprenda gradualmente novos plugins e bibliotecas. Um dos mais populares e mais fáceis de entender é o jQuery.. É muito mais fácil interagir com o conteúdo da página e pode ser rapidamente dominado em um nível básico.

Em geral, você geralmente recorre ao uso de bibliotecas de terceiros em seus projetos. Para entender melhor como isso é feito, recomendo tentar formatar as datas usando Luxon ou fazer um carrossel através do Owl Carousel .

Qual é o próximo?


Com habilidades básicas em HTML, CSS e JavaScript, você pode criar uma bela página de destino, organizar as páginas de uma loja ou blog online. É isso que eu aconselho a fazer para consolidar seu conhecimento em desenvolvimento web.

Em geral, quase qualquer interface pode ser escrita nessas tecnologias. A única pergunta é quais são as especificidades do aplicativo que você está desenvolvendo. Quanto maior e mais complexo, mais bibliotecas, plug-ins e tecnologias serão necessários para lidar com a tarefa.

imagem

Eu recomendo que você se familiarize com o Frontend Roadmap . Aqui estão as tecnologias de desenvolvimento de interface que você precisará no futuro.

No futuro, você provavelmente estará interessado em estruturas reativas como React ou Vue.. Para criar aplicativos neles, você aprenderá o Webpack e, para acelerar o processo de layout, aprenderá os pré-processadores PUG e SASS . Ou talvez você queira se aprofundar nos gráficos e aprender a trabalhar com D3 ou WebGL .

Como você já entendeu, o frontend em desenvolvimento web é muito versátil e rico em várias tecnologias para tarefas completamente diferentes. Aprenda, tente, experimente e aproveite a criação de interfaces bonitas e convenientes para qualquer finalidade. Por isso, amamos o frontend.


PS Acompanhei cada tecnologia deste artigo com um link para documentação ou exemplos de uso. Você pode se familiarizar com eles para obter uma compreensão mais ampla do desenvolvimento da web.

More articles:


All Articles