Quando falamos de desenvolvimento front-end, não podemos negar que as bases de HTML e CSS são essenciais para qualquer pessoa que desenvolva nessa área. Porém, é comum que pessoas acabem tendo dificuldades em 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 terem utilizado todos os recursos que conheciam dessas tecnologias e não saberem como prosseguir.

Se você começou a aprender HTML e CSS agora, deve ter tido contato com algumas tags HTML e alguns seletores e propriedades CSS, mas existem muito mais tags HTML e muito mais propriedades CSS do que você imagina. E, a verdade é que você só vai descobrir alguns destes recursos quando realmente precisar deles, e se procurar direito.

Um exemplo disso foi o dia que descobri a existência do Flexbox. Eu tinha um projeto onde queria centralizar alguma coisa na tela, então fui procurar por como fazer isso no Google. Logo no primeiro link, caí em uma pergunta no Stackoverflow sobre exatamente a mesma coisa. 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 usado era flex.

Obviamente, eu não sabia o que aquilo significava, então fui novamente para o Google, agora querendo saber “o que significa display flex”. Eventualmente, eu encontrei alguns materiais explicando sobre o assunto – inclusive, um deles é um dos vídeos aqui da Cod3r -, que você pode acessar clicando aqui.

O ponto dessa história é: eu sabia o que eu queria fazer, procurei como e acabei aprendendo várias coisas sobre um conteúdo que eu nem sabia que existia e que hoje uso em praticamente todos os meus projetos.

E como fazer pesquisas no Google vai ser algo muito importante para o seu aprendizado, recomendo a leitura do artigo Dicas para “Googlar” melhor que temos aqui no blog.

Crie cópias de páginas que você acha interessantes

Este tipo de projeto é muito comum entre pessoas que estão iniciando na programação front-end, e sem dúvida permite muito aprendizado. Ao copiar uma interface já existente, você pode focar apenas no aprendizado do HTML e CSS, sem se preocupar com o design da aplicação, já que você precisa apenas fazer algo o mais parecido possível com a sua referência.

Outro ponto muito interessante sobre este tipo de exercício, é que você pode pegar “dicas” de como a sua página de referência foi construída, inspecionando-a pelo devtools. Se você usa um navegador baseado em Chromium, você também pode utilizar o lighthouse, para ter uma ideia de coisas que podem melhorar na sua página.

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 dele. Isso porque o objetivo aqui é clonar visualmente uma única página. Você pode adicionar JavaScript na página também para fazer algumas atividades no site, mas isso é opcional. Se você estiver focando apenas em HTML e CSS, não precisa se preocupar em fazer a página funcionar, preocupe-se apenas com o visual.

Um bom exemplo de página para começar, é a página inicial do Google, que não tem uma interface muito complicada. Depois, você pode fazer clones de páginas que você ache interessante, como a página inicial do YouTube ou o seu perfil no GitHub.

Neste momento, você também não precisa se preocupar com a responsividade da aplicação. Portanto, preocupe-se apenas com a interface em um ambiente, e depois você pode ir evoluindo o projeto com o tempo.

Modifique as interfaces que você copiou

Depois de ter feito alguns clones de interface e estar se sentindo confortável com este tipo de exercício, você pode começar a modificar essas 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. Alterar o tamanho da tela e ver em que ponto sua aplicação começa a ficar com uma interface bugada é uma ótima maneira de começar. Assim, você consegue ver os pontos onde precisa trabalhar para que a visualização fique legal em todos os tipos de dispositivos.

Esse também é um exercício interessante porque você não parte do zero, mas de um projeto que já tinha construído.

Utilize ferramentas para praticar CSS

Existem diversos jogos com o intuito de te ajudar a aprender conceitos de CSS, como é o caso do Grid Garden e do Flexbox Froggy. Eu adoro estes recursos e não é raro que eu refaça alguns desafios para ter certeza de que ainda me lembro dos fundamentos de todos.

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

Depois de copiar as interfaces de alguns sites e evoluí-las, 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. Isso porque, quando você está tentando imitar uma interface, você tem um objetivo mais claro do que quando tem que criar uma do zero. E quando você sabe o que precisa fazer, fica mais fácil aprender como fazê-lo.

Você também pode criar um projeto que atenda uma necessidade sua, ou inventar uma necessidade qualquer e criar uma página que resolva esse problema. Uma ideia de projeto pessoal é um site de links como a página do Linktree da Cod3r que você pode acessar clicando aqui. Este tipo de projeto pode parecer bem simples, mas sempre tem muitos desafios. Além disso, por ser um projeto que só usa HTML e CSS você pode hospedá-lo no GitHub Pages e usá-lo como parte do seu portfólio.

Aprenda HTML semântico

Geralmente, quando estamos começando a desenvolver em HTML, é comum não nos importamos muito com as tags que estamos utilizando. É comum que códigos tenham divs para todos os lados, no entanto, isso não é uma boa prática de programação. Isso é super normal no início e faz parte do processo de aprendizagem, mas em algum momento você vai precisar se aprofundar nas tags HTML e em como usá-las corretamente.

O HTML5 implementa várias tags semânticas que tornam o seu site muito mais acessível e também tem um impacto positivo no ranqueamento do SEO. Com certeza é um tópico que merece a sua atenção.

Considerações finais

As bases de HTML e de CSS são muito importantes para pessoas que desenvolvem front-end e este tipo de conhecimento não pode ser ignorado. Espero que tenham achado esse artigo útil, bons estudos!