Screencasts de vídeo 2025, Janeiro

O design dos comentários pode parecer muito simples. E isso é! Mas acho que simples é eficaz neste caso. Os comentários são uma parte importante dos truques de CSS "

Começamos a cavar no Photoshop aqui e projetar a área de comentários. Começamos pelo topo, ou seja, os próprios comentários individuais (em oposição ao "

Começamos examinando alguns dos trabalhos pesados ​​que fiz nos bastidores, detalhando algumas coisas que precisavam ser feitas. Como adicionar o resto de "

Estamos quase terminando a construção da página inicial da área de Snippets do site. Imediatamente, começamos a ajustar as coisas e colocar mais coisas em "

Com o design da área de snippets "pronto" - podemos agora avançar para alguma interatividade (leia: JavaScript). Adicionamos um rollover superlame para os links em "

Agora temos um design do Photoshop para trabalhar para a página inicial da área de Snippets. É muito mais fácil de navegar do que antes, mas mantém o arco-íris "

É hora de mergulhar na área dos Snippets! Ou seja, a área de conteúdo real dele. Já temos o cabeçalho no lugar. A área de trechos é bastante popular. "

Neste screencast, encerramos a seção do Almanaque. Existe uma hierarquia bastante clara no Almanaque. Ele vai: Home> Almanac Home> Property or Selector> "

Nós avançamos um pouquinho aqui. Esta é uma série de screencast bastante abrangente, mas tem apenas 40 horas ou mais e, claro, este projeto real "

Já trabalhamos localmente em um domínio local (v10.whatup). Agora é hora de começar a migrar para o WordPress. Vamos continuar trabalhando localmente "

Temos todo o conteúdo de que precisamos na saída desta página e temos o cabeçalho no lugar. Agora podemos começar a usar CSS do conteúdo no design que temos "

À medida que começamos a trabalhar no WordPress, será melhor se conseguirmos uma cópia exata do banco de dados ativo para trabalhar localmente. Alguns sites têm coisas como "

Agora que lutamos para obter o conteúdo adequado na página inicial do Almanac, podemos nos aprofundar em alguns estilos reais com CSS. Decidimos ir "

Neste screencast lidamos amplamente com a "Photostar" laranja que domina o rodapé. Fazemos a estrela em um arquivo separado no Photoshop, para que possamos fazer "

Chegou a hora de cabecear para o Alamanc, desta vez de Giovanni Difeterici. Usamos muitas técnicas que já estabelecemos para começar "

A ilustração do cabeçalho personalizado para a seção de vídeos chegou, desta vez de Alyssa Nassner. Passamos um pouco de tempo organizando o arquivo do Photoshop e "

Neste screencast final da construção do rodapé, trabalhamos no rodapé inferior, onde estão as áreas CodePen e ShopTalk. Temos que mudar o HTML a "

Neste screencast, focamos nas linhas abaixo dos links na parte superior do rodapé. Nós meio que tropeçamos tentando descobrir quais coisas deveriam "

A cabeça de fragmentos chegou, desta vez por Reagan Ray. Passamos um pouco de tempo no Photoshop, desta vez mudando as coisas um pouco para ter certeza de

Com a estrutura HTML para o rodapé no lugar, temos o que precisamos para começar a estilizar e fazer com que o rodapé se pareça com o que desenhamos no Photoshop. "

Este é o último trabalho do Photoshop que faremos especificamente sobre o rodapé antes de começarmos a criá-lo. Neste screencast nós "

Estamos trabalhando na criação de um design para o rodapé no Photoshop. Lembrete rápido: trabalho no Photoshop porque me sinto mais criativo lá antes de pular "

Neste screencast, vamos abordar mais assuntos do Photoshoppin, exibindo o rodapé inferior com links para meus dois maiores projetos, CodePen "

Embarcamos na grande jornada que é o rodapé! CSS-Tricks sempre teve um grande rodapé extravagante e este design não será exceção. Não é puramente "

Com o nosso design para o rodapé pronto para uso no Photoshop, podemos começar a construí-lo em nosso modelo estático de HTML e CSS. O primeiro passo é dar "

Temos outra zona BSA para nos integrar ao site. Este deve ser um pouco mais fácil, porque já temos o JavaScript instalado e é apenas "

Temos um modelo de como queremos que nossas zonas BuySellAds se pareçam, então vamos começar a construí-lo de verdade. O site BuySellAds fornece o código de que precisamos "

A única coisa que falta agora no cabeçalho dos Fóruns alfandegários é a parte que realmente diz "Fóruns"! Nick ilustrou uma mão segurando um sinal que significava "

Agora que sabemos exatamente com quais zonas estamos trabalhando, voltamos ao Photoshop e simulamos a aparência dessas zonas de anúncios. Temos um precedente para "

Como você sabe, alguns dos anúncios no CSS-Tricks são meio que "autogerenciados", como o patrocinador principal da Treehouse. Aceitei porque é apenas um "