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 (๑˃ᴗ˂)ﻭ
EU AMEI! Quando comecei o blog em 2015/2016 peguei um layout gratuito e vivia modificando aos poucos com tutoriais da internet. Passei muito tempo sem praticar, mas lembro um pouco a lógica das coisas. CSS nunca foi meu forte, e voltando para cá fiquei com vontade de ter mais liberdade criativa com relação ao layout, mas meus conhecimentos escassos têm me feito flopar na missão. Atualmente tô focada em arrumar os bugs do bloguinho e arrumando o rastreamento das páginas, sitemap e afins... e tá me dando dor de cabeça Ç-Ç
ResponderExcluirGarota do 330
Ótimo ter listinha assim de coisas onde pesquisar! A internet não é mais a mesma, não se acha mais nada........... Comecei a fuçar em códigos de tudo em 2010 pra personalizar o tumblr depois o blogspot. Acho uma graça os sites no neocities mas ainda não me aventurei, confesso que perdi um pouco o fôlego @.@
ResponderExcluirMuito massa, Vaneza. Estou fazendo um curso na Udemy sobre HTML, CSS e JavaScript. Apesar de hoje em dia a gente conseguir criar sites sem precisar mexer em códigos, o blog aqui no Blogger ainda é necessário saber desenvolver para criar algo bonito. Estou começando meu blog agora e ele está muito feio hahaha, já desenhei um layout novo no Figma mas não tenho ideia de como fazer ele funcionar no Blogger. Estou considerando até contratar um dev freelancer para desenvolver pra mim.
ResponderExcluir