Texto de: Letícia Garcez
Introdução
Quando falamos de desenvolvimento frontend, é inevitável que o assunto de como as bases de HTML e CSS são essenciais nessa área venha a tona. Porém, é comum que pessoas acabem tendo dificuldades de saber como estudar estas tecnologias e se aperfeiçoar nelas, por isso, neste artigo trago algumas dicas que podem te ajudar a estudar estas duas tecnologias.
Saiba o que você quer fazer e procure recursos para isso
Não é comum que pessoas “travem” seus estudos de HTML e CSS por se depararem com um problema para o qual elas ainda não conhecem uma solução, e aqui entra um dos principais pontos para um bom aprendizado de HTML e CSS: saber procurar por alternativas para solucionar um problema.
Um exemplo disso, foi o dia que descobri a existência do flexbox. Eu tinha um projeto onde queria centralizar alguma coisa na tela, e então fui procurar por como fazer isso no Google. O primeiro resultado foi uma pergunta no Stack Overflow perguntando o mesmo, e a primeira resposta solucionava o meu problema, porém ao invés de display:inline, ou display:block, que eram as formas que eu conhecia até o momento, o display colocado era flex.
Isso me fez pesquisar sobre o que era o display flex, e fez consequentemente com que eu aprendesse os conceitos do flexbox, porque eu sabia que eu queria centralizar algo na tela e sabia que entender esse conceito me proporcionaria isso.
Crie cópias de páginas que você acha interessantes
Pode ser que pensar no design de uma aplicação seja algo muito difícil para você. Então te trago uma boa notícia: você não precisa criar o design de todos os seus projetos. Você pode pegar o design já pronto de páginas que você acessa a internet, e tentar replicá-lo.
Este tipo de projeto é muito comum entre pessoas que estão iniciando, e sem dúvida permite muito aprendizado, já que você precisa apenas fazer algo o mais parecido com a sua referência possível, e como a sua página de referência está online, você pode sempre pegar “dicas” de como ela foi construída inspecionando-a pelo devtools.
Pessoas que estão mais avançadas na programação, costumam fazer clones mais completos de sites, mas você não precisa se preocupar com o funcionamento do site. O objetivo aqui, é clonar visualmente uma única página. Às vezes, se uma página for um projeto muito complexo, você pode focar em replicar apenas um pedaço dela que julgue interessante. Neste momento, não se preocupe com aspectos mais elaborados como a responsividade da aplicação, preocupe-se apenas com o básico e evolua isso com o tempo.
Modifique as interfaces que você copiou
Após ter feito alguns clones de interfaces e estar se sentindo confortável com este tipo de exercício, você pode começar a modificar coisas nessas páginas. Você pode mudar recursos visuais como a posição de elementos, cores e efeitos, ou adicionar novos elementos, como aquele típico rodapé onde se lê “feito com ❤️ por <seu nome>”.
Aqui, você pode começar a se preocupar mais com a responsividade da aplicação também, alterando o tamanho da tela e vendo em que ponto a sua aplicação começa a ficar com uma interface bugada e melhorar isso para que a visualização fique legal em todos os tipos de dispositivos.
Esse também é um exercício interessante, pois ao invés de desenvolver tudo do zero, você já tem um ponto de partida inicial, que é uma página “pronta” que pode ser modificada conforme a sua vontade.
Modifique interfaces pelo devtools
Uma das melhores formas de praticar HTML e CSS é utilizando o devtools do navegador. Através dessa ferramenta, você pode não só ver aspectos estruturais e de estilo da página, mas também pode editar o HTML e o CSS da página que o seu navegador está exibindo. Esse tipo de alteração só acontece no lado do cliente, então se você atualizar a página, ela “voltará ao normal”.
Você pode explorar páginas de sites que você gosta pelo devtools, e fazer modificações no HTML ou CSS dessas páginas. É importante dizer, porém, que esses sites são normalmente desenvolvidos usando algum framework e, portanto, o HTML e o CSS gerados que você acessa no navegador podem não ser de fácil entendimento, mas você também pode utilizar o devtools para fazer testes nas aplicações de você está desenvolvendo.
Sem dúvidas, o devtools é um recurso muito interessante e saber como utilizá-lo pode fazer muita diferença para você no futuro.
Utilize ferramentas para praticar CSS
Existem diversos jogos online com o intuito de te ajudar a aprender conceitos de CSS. Os tópicos mais abordados nesses jogos acabam sendo Flexbox e Grid, mas é possível encontrar jogos que envolvam outros conceitos também. Deixo uma lista com alguns deles aqui:
Crie seus próprios projetos
Após copiar as interfaces de alguns sites e evoluir essas cópias, você pode começar a criar seus próprios projetos. Na verdade, você não precisa ter feito um único clone de página para começar os seus próprios projetos, mas eu recomendo que você o faça para entender como as coisas funcionam e adquirir mais segurança no desenvolvimento de projetos.
Você pode criar um projeto que atenda uma necessidade sua, ou então inventar uma necessidade qualquer e criar uma página que resolva esse problema. Um ótimo projeto pessoal para você começar é criar a sua versão de um site de links, como o linktree.
Considerações finais
As bases de HTML e de CSS são muito importantes para pessoas que desenvolvem frontend e este tipo de conhecimento precisa ser exercitado regularmente assim como as bases de programação. Embora estudar HTML e CSS não seja tão direto quanto estudar programação, ainda assim precisamos nos dedicar para desenvolver as nossas habilidades nessas tecnologias tão fundamentais, e nesse artigo, apresentei algumas formas de como fazer isso.
