Compartilhando o básico que sei sobre CSS e HTML

Pra Vaneza, ou qualquer um que queira aprender.

Falando sobre a minha experiência, comecei a mexer com código de um jeito bem tímido no Tumblr. Eu pegava os temas que gostava e aprendia a alterar uma coisa ou outra, como cor de link, tamanho da área de posts, ajeitar o menu de navegação…

Aí, aos 10 anos, criei um blog aqui no Blogger mesmo e foi onde aprendi a maior parte das coisas que sei. Na época, era possível encontrar milhares de tutorais pra todo tipo de personalização. Infelizmente, hoje em dia a realidade não é mais a mesma (μ_μ) Mas então, por onde começar?

Primeiro, é importante lembrar que você pode codificar usando vários tipos de linguagem, mas pra criar uma página simples na internet o essencial é HTML e CSS. Pra entender como funciona, vamos imaginar que você está montando uma casa:

• O HTML seria a estrutura da casa, como os tijolos, paredes e o telhado. Com ele você escolhe o que vai ter nessa casa: quantas portas, janelas, cômodos. Em um site, isso seria os títulos, textos, imagens e links, por exemplo.
• O CSS é a decoração da sua casa. É pintar as paredes, escolher os móveis, pendurar os quadros. No site, o CSS define as cores, tamanhos de fonte, se um texto é azul ou vermelho, se um menu é grande ou pequeno.
• E aí temos o adicional: JavaScript. Ele não é extremamente necessário pra construção da sua casa (ou site), mas usar ele traz umas funções legais. Na nossa fic, seria como instalar uma campainha. É necessário? Nem tanto, as pessoas ainda podem bater palma no portão, mas ter uma é bem funcional. Voltando pro site, é quando você consegue filtrar um conteúdo ou quando um formulário avisa que falta preencher algo.

Minha recomendação: de início, foque somente nos dois primeiros.

Caso o seu interesse seja personalizar o seu blog, é um processo mais simples. Não faço ideia como é o código do Wordpress, mas aqui no Blogger você acessa o código do seu blog indo em Tema > abrindo o menu escrito Personalizar > Editar HTML. Apesar do nome, recomendo você alterar somente partes do código CSS, até porque o HTML propriamente dito é o conteúdo que você adiciona em Layout, Páginas e Postagens.

No Neocities é diferente. Basicamente, cada página é um documento no formato .html e lá não tem um menu como no Blogger pra você escolher o que quer e como quer. É TUDO código! Então, infelizmente, o básico de HTML e CSS é necessário.

Até existe templates pro Neocities, como é no Tumblr, mas não é tão comum e acho que é bem mais legal você ter um site com sua cara e personalizado do seu jeitinho.

Aqui tem um guia pra iniciantes: Absolute beginner's guide to Neocities.

Links úteis

Na minha opinião, o W3Schools é o melhor site pra aprender o básico. Eles têm uma página pra HTML e outra pra CSS. Na barra lateral esquerda é onde ficam os tópicos e cada “lição”. É interessante dar uma checada.

Já o CodePen é ótimo pra testar os seus códigos, e é gratuito. Ele dá uma pré-visualização de como sua página tá ficando e atualiza a cada mudança que você faz. Usava muito no começo pra fazer as páginas do meu Neocities.

• Sadgrl's Layout Builder: Muito bom pra você fazer uma base pro seu site se você não sabe como criar um código do zero. É um jeito bem fácil de determinar coisas como barra lateral, tamanho do cabeçalho e o menu de navegação. No final, gera um código pra você usar.
• petrapixel's layout generator: Tem o mesmo princípio do de cima, porém mais detalhado e com mais opções de personalização.
• ChatGPT - Code Copilot: Não sei qual é a sua opinião sobre IA, mas esse bot dentro do ChatGPT é muito útil. Tem coisa que ainda dá pra achar tutorial sobrevivente na internet, mas às vezes temos uma dúvida muito específica e aí você pode usar o Code Copilot pra isso: “Como faço…” ou “Por que tal coisa não funciona?”.
• Neocities no Reddit: São mais de 10 mil membros pra te ajudar. Mesmo que o seu objetivo seja personalizar o seu blog, você pode fazer fazer perguntas sobre código lá.
• Word to HTML: Do lado esquerdo, você escreve seu texto normalmente e do lado direito ele é convertido em HTML. É uma boa pra ver o código na prática.

O básico é isso aí. Uma dica que dou: Pra você dar uma olhadinha no código de uma página específica, basta abrir o site e apertar Ctrl + U (funciona muito bem no Neocities). Lembrando que algumas pessoas não gostam de ter o seu código copiado, então aconselho só dar uma olhadinha mesmo e fazer o seu.

Caso você queira uma ajuda no código do seu blog ou do seu Neocities, pode me chamar no Discord, o meu user por lá é arbokie, ou me mandar uma mensagem pelo formulário de Contato aqui no blog.

Boa sorte (๑˃ᴗ˂)ﻭ