Screencasts de vídeo 2025, Janeiro

Temos essas oito guias de navegação de nível superior, mas a Página inicial é a única que "funciona". Para termos algumas páginas para trabalhar, criamos algumas páginas para "

Pelo que me lembro, usei o Google Code Prettify para aplicar o destaque de sintaxe no bloco de código em CSS-Tricks. Você sabe, em uma linha como "

Acabamos de instalar o Prism.js e colocá-lo em funcionamento. Neste screencast encontramos um tema chamado Tomorrow Theme e incorporamos suas cores na sintaxe "

Fizemos um pouco de trabalho nos cabeçalhos, mas vamos nos aprofundar mais neles neste screencast. Os cabeçalhos são um aspecto muito importante de qualquer site. Bem feito,"

Agora que temos uma área de postagem de blog para trabalhar, podemos realmente entrar na tipografia de postagem de blog. Provavelmente a tipografia mais importante do site, pois é "

Acho muito bom ter um arquivo individual (.scss) que serve para a grande maioria das tipografias do site. Normalize tem bastante tipografia "

Typecast (em beta no momento desta filmagem) é um aplicativo da web muito legal para brincar com tipografia da web. Oferece uma ótima interface para brincar "

Continuando com o conceito de "Don't Overthink It Grids", obtemos sarjetas na grade usando apenas um preenchimento simples. Mantemos o número de preenchimento "

Antes de fazermos algum trabalho de tipografia, pensei que poderíamos consertar a coisa chata onde as imagens estão explodindo fora da área do artigo e da grade. Usando"

Agora que estamos executando um domínio local personalizado, podemos usar o PHP. O "P" no MAMP é para "PHP" =). Usar PHP significa que podemos usar includes. Por exemplo: Nosso "

Poderíamos escrever nosso próprio Sass @mixins para ajudar com coisas CSS3 (como gradientes), mas existe um framework Sass que já existe chamado Compass que "

O design do site está se transformando em uma grade. Nossos módulos serão dispostos de forma muito limpa em uma grade. Mas as grades não são complexas e estranhas? E talvez nós "

Neste screencast super rápido, usamos o MAMP para configurar uma URL que podemos usar para o desenvolvimento local. Isso é útil por vários motivos: Podemos criar um link para "

Apresentamos o conceito de consultas @media em CSS. Muito do que usar o Sass neste projeto nos permite fazer é permanecer DRY (não se repita). Nós fizemos"

Começamos ajustando um pouco o tipo do logotipo, mas depois adicionamos ícones ao painel de navegação principal. Quando estávamos projetando a navegação no Photoshop (Vídeo "

Configuramos um novo Kit no Typekit para v10. Para a marca, usaremos Proxima Nova Soft por enquanto e algumas outras fontes que se parecem com as fontes HF&J em nosso "

Até agora, o site real não se parece muito com o design do Photoshop. Neste screencast, vamos fazer exatamente isso, começando do topo com "

Estamos usando alguns truques de posicionamento para alinhar a borda esquerda do logotipo e a área de conteúdo principal, enquanto ainda temos o cabeçalho tocando a borda esquerda do "

Remover o agente do usuário (padrão) CSS da maioria dos elementos é geralmente uma boa ideia. Isso tem sido feito por redefinições "universais" ou coisas como o Eric "

Enquanto olhamos nossa maquete do Photoshop, começamos a escrever HTML para descrever o que estamos vendo. Obviamente, estamos usando HTML5 sempre que faz "

Começamos soltando o texto na navegação principal, apenas para ver como ele vai caber, trabalhar no dimensionamento, cores, etc. Parte do texto está se encaixando bem "

Certamente não estamos "prontos" no Photoshop para sempre para este design, mas temos o suficiente para trabalhar para começar a criar este design no navegador. Depois de"

Começamos a projetar a navegação de nível superior (principal) do site. Estamos começando com a tela do tamanho da área de trabalho (com uma largura reconhecidamente arbitrária), mas estamos "

Adicionamos algumas camadas extras abaixo do cabeçalho principal / caixa da marca para dar a aparência de "pilha de papéis". Nenhuma grande metáfora nem nada, apenas adiciona um pouco de visual "

Todo o site vai se basear em "módulos". Cada pequena coisa vai estar literalmente em uma caixa (tanto visualmente quanto no código, em última análise). Nós"

Esta é uma gravação de áudio de uma chamada no Skype entre Erin Kissane e eu. Erin escreveu o livro sobre estratégia de conteúdo, então tive sorte de conseguir a ajuda dela e "

Desenhar no navegador é legal e tudo, mas começar no Photoshop me mantém no meu estado mais criativo quando eu mais preciso: quando enfrento a tela em branco. "

Receber! Essa vai ser uma jornada e tanto e, como todas as jornadas, esta começa com uma única etapa. Nossa primeira etapa é fazer um inventário de um pouco de "

Este redesenho não é um redesenho apenas por causa do redesenho. Quero melhorar o site de todas as maneiras imagináveis ​​de como você pode melhorar um site. Um dos"

Já falamos sobre como otimizar o SVG manualmente. Fazer escolhas manualmente sobre os detalhes e quais tipos de coisas podem ser combinados ou removidos. Nisso"