Como estudar frontend?

Como definir sua trilha de estudos com frontend?

Ainda não pude escrever sobre, mas comecei a fazer lives na twitch.tv/allangarcez falando sobre desenvolvimento Backend/Frontend, com foco em NodeJS, React e Typescript.

Que a área de TI tem sido o hype do momento, todo mundo sabe. Mas o que nem todo mundo sabe é como realmente começar a estudar. Nem eu sei, mas posso tentar ajudar você que está tentando começar a trilhar seus estudos e falar um pouco sobre carreira. Esse vai ser meu primeiro post não técnico do blog, então é tão novidade para você quanto para mim.

E só lembrando, esse post irá dar foco a carreira de frontend. Se você gosta muito da parte de backend, fica tranquilo que eu ainda vou escrever sobre 😄.

Por onde começar?

O primeiro passo importante para definir seus estudos é conhecer um pouco mais da área como um todo. Busque entender o que faz um frontend, um devops, um backend ou até mesmo um engenheiro de dados. Mesmo que superficialmente você conheça, já é uma boa dica para direcionar o que você busca, de acordo com seus gostos e aptidões.

Como dito anteriormente, aqui falarei de frontend, então iremos explorar toda a trilha do desenvolvedor web, voltado para o navegador. Aqui você entenderá o que é necessário estudar para começar a criar seus sites, landing pages (páginas iniciais de sites super bonitos) e sistemas web que podem ou não se comunicar com serviços externos.

Não é o foco do post ensinar cada uma das tecnologias, mas te dar um direcionamento para começar com cada uma das tecnologias, abordando os conceitos, práticas e ferramentas mais utilizadas de cada um.

HTML, onde tudo começa

HTML ou Hyper Text Markup Language é uma linguagem de marcação para sinalizar ao navegador a estrutura da sua página. Pense no HTML como o esqueleto e músculos do corpo humano, sendo a base que sustenta tudo no corpo, mas não se engane, você ainda precisa ter a aparência (CSS) e o sistema nervoso (Javascript) para tudo funcionar como deveria. O HTML permite você marcar suas páginas com títulos, textos, blocos, links para acessar outros sites, parágrafos ou até mesmo referências para outros sites (você irá conhecer esse cara como iframe).

O HTML é essencial para você começar a desenvolver seus sites, sem saber a semântica do HTML, você não irá evoluir nos seus estudos, então é bom fundamentar a base nessa tecnologia e principalmente nos conceitos ao redor dela.

Referências para HTML

Conceitos

Aqui vou deixar uma lista de conceitos que são aconselhados a serem estudados, lembre-se que você não precisa ser um mestre no assunto, seu estudo deve ser gradual. Comece estudando um pouco para saber do que se trata, conforme você evoluir mais com tecnologia num geral, você pode ir aperfeiçoando a profundidade de conhecimento.

  • O que é o DOM?
  • Acessibilidade: Por uma web sem barreiras, não importa como você usa o browser.
  • ValidityState: Se você já preencheu um formulário e quer fazer o seu próprio, esse cara vai te ajudar com isso

Você pode precisar de ferramentas

  • Can I use?: Será que você pode usar um recurso em todos os browsers?
  • Icon Monster: Você pode precisar de ícones customizados para seus sites.
  • W3c Validator: Use esse cara para saber se o seu trabalho está correto

CSS

Se o HTML é a estrutura do corpo, o CSS é a aparência, definindo a cor dos cabelos, olhos, pele e tudo mais o que for relacionado a aparência. CSS é uma tecnologia bem divertida, mas não se deixe enganar pois também é traiçoeira. Digo isso porque CSS significa Cascading Style Sheets, ou folha de estilos em cascata. Se você sabe o que é uma cascata, sabe que a água cai de cima para baixo, assim como os estilos do CSS. São definidos de cima para baixo, assim como você escreve numa folha.

Basta dizer o nome do que deseja estilizar, as propriedades que quer estilizar e você terá um elemento bonito na tela, simples assim. Mas nunca se esqueça das regras de cascata, pois o estilo definido abaixo pode sobrescrever o estilo de cima.

Referências para CSS

  • W3c Schools: Aqui sempre é um ótimo ponto de partida para tecnologias da web
  • MDN: Você sempre vai ver o MDN, seu novo melhor amigo para estudos de tecnologias web
  • Orgamid: Vou deixar esse curso aqui que foi um curso que sempre me ajudou muito a entender sobre CSS, e com certeza vai ajudar você também

Conceitos

  • Flexbox: Uma forma simples de estruturar visualmente os seus blocos nos sites
  • Grid: Alternativa ao flex, sendo mais voltado para layouts fixos
  • CSS Animations: Se você gosta do seu lado criativo, as animações vão trazer vida aos seus sites

Frameworks

Com CSS você será capaz de trazer toda a identidade visual de uma marca, as animações e elementos estilizados para o seu frontend. E para isso, você pode usar várias técnicas e frameworks (ferramentas que funcionam como um pacote de c√≥digo pronto) para te auxiliar

  • FCSS: Uma solução para o problema de cascata do CSS
  • Bem Syntax: Monte os seus estilos através de blocos
  • RSCSS: Uma solução voltada para componentes e escopos de estilo

Ferramentas

  • Bootstrap: Se você não sabe como deixar algo bonito, use esse framework. Bootstrap é um dos mais famosos no mundo CSS. Você já deve ter visto estilos bem parecidos ou até iguais a esse cara.
  • Tailwindcss:

Javascript

A parte final do corpo humano, o sistema nervoso. E o Javascript é quem vai fazer o trabalho de ser a central e o cérebro do nosso site, controlando as ações, eventos e interagindo com o usuário através de código. Importante lembrar que Javascript é uma linguagem de programação, diferente de HTML e CSS. Isso significa que você precisará ter conceitos de lógica de programação e estrutura de dados para poder se aventurar com Javascript de forma mais fluída.

Por ser uma linguagem de programação, Javascript tem um poder absurdo de fazer literalmente qualquer coisa no browser, basta você saber as APIs (Application Programming Interface ou Interface de programação para aplicações, uma forma de abstrair códigos complexos em um código mais simples) e será possível você realizar.

Referências para Javascript

Typescript

Durante seu aprendizado de Javascript, você pode se deparar com problemas do tipo Cannot read properties of undefined. E isso ocorre devido ao tipo da sua variável ser undefined. Geralmente, esse tipo de problema pode ser evitado caso você utilize linguagens tipadas, como Typescript, Java, C#...E por falar em Typescript, essa com certeza deve ser uma linguagem para adicionar no seu mapa de estudos.

Typescript é um superset de Javascript, adicionando tipos a linguagem e tornando sua vida muito mais simples. Por aqui no blog você pode achar vários tópicos sobre Typescript.

Referências para Typescript

Frameworks

Para otimizar sua produtividade com código, você vai precisar conhecer e estudar alguns frameworks mais utilizados do mercado. Sem extender muito, deixarei uma lista dos mais utilizados de cada tópico.

Javascript/Typescript - Frontend

CSS

Bibliotecas

Esses daqui são tópicos interessantes a se estudarem, mas que não se englobam como frameworks

  • Lodash: Funções utilitárias para você evitar repetição de código
  • DateFNS: Utilitários para trabalhar com datas
  • D3js: A mais famosa biblioteca para se trabalhar com gráficos
  • Axios: Biblioteca para requests HTTP
  • Ant Design: Uma biblioteca de componentes visuais para ReactJS