Iniciando os estudos de front-end: onde focar?

Lembrando de tudo pelo qual passei nos primeiros meses como estudante de front-end, venho me questionando sobre como poderia ajudar aqueles que estão na mesma situação no qual estive. Não sendo um especialista, ainda assim me dou o direito de tentar ajudar aqueles que estão dando os primeiros passos na área.

Muito se diz sobre "pegar a base", mas essa pode ser uma tarefa complicada quando não sabemos de que isso se trata. Sabendo disso, espero que eu te ajude com essas dicas abaixo. Focarei no estudo das três principais tecnologias da área: HTML, CSS, e JavaScript.

HTML

Semântica, semântica e semântica: logo nas primeiras aulas de front-end, é bastante simples compreender o funcionamento do HTML, suas tags, classes, etc. Entretanto, a semântica é uma parte nada trivial do estudo de HTML.

Você pode tranquilamente renderizar um website usando milhões de ‹div›, ‹h1› e ‹img›, mas saiba desde agora que o uso das tags de forma desordenada pode (e vai) afetar e muito os mais diversos aspectos do seu trabalho, como a otimização para motores de busca (seo) ou futuras reparações em seu projeto.

Nomeando classes e IDs: uma das coisas que eu queria ter conhecimento desde o início dos meus estudos em front-end é a metodologia BEM. Se trata de uma maneira de padronizar as classes e IDs dos componentes que criamos, a fim de facilitar sua estilização sem confundir classes e nem repeti-las.

Questione-se: como faço para renderizar uma imagem com legenda, um texto completo ou um menu de navegação?

CSS

Propriedades principais: no início, somos tentados a aprender certas ferramentas que agilizam a estilização com CSS. Alguns frameworks como SASS ou Styled-Components podem facilitar bastante a vida do desenvolvedor, mas o iniciante pode não se beneficiar tanto deles se não souber utilizar as principais propriedades no CSS vanilla. Por isso, foque primeiro nas propriedades antes das ferramentas.

Flexbox e grid: essas duas propriedades de posicionamento te acompanharão para sempre nos estudos e trabalhos de front-end. Por isso, estude muito bem qual a maneira correta de usar ambos os modos de posicionamento. Saiba quais propriedades usar nos elementos pais e nos elementos filhos e, combinando com outras propriedades de forma eficiente, você irá para o próximo nível de conhecimento em estilização!

JavaScript

Métodos e laços: uma das coisas que mais uso em meu trabalho atual são métodos de array, principalmente o map. Portanto, considero de extrema importância que isso não fique de lado em seus estudos. Faça muitos projetinhos pessoais com arrays de todos os tipos e tente manipular as informações usando os mais diversos métodos.

Funções e módulos: lidar com módulos em JavaScript será uma constante em sua carreira de front-ender. Por isso, entender como funcionam os imports e exports, usando-os da forma correta, deixará seu código muito mais limpo e organizado. Treine bastante e crie códigos descentralizados, com componentes únicos em arquivos separados, exportando-os da maneira correta e logo estará um passo além em JavaScript.

Algumas dicas finais

Apenas uma etapa: tenha em mente que nesse momento é normal que você não saiba muitas coisas no desenvolvimento web, portando, aproveite o tempo de aprendizado. Aprender melhor não é necessariamente aprender rápido, tenha calma!.

Nada será perdido, mas nada permanecerá: também acho muito importante entender que aquilo que aprendemos nos primeiros meses de estudo é muito diferente daquilo que vemos no mercado de trabalho. Sabendo disso, algumas dúvidas que acabam nos incomodando perdem um pouco de importância, como por exemplo ＂se eu importar muitos arquivos CSS no meu HTML, meu site vai ficar pesado?＂. Não se preocupe com essas coisas, pois todos os códigos de iniciantes são ＂feios＂. Apenas foque em aprender as linguagens de forma otimizada e sua jornada será muito gratificante!

Boa sorte em seus estudos!