Layouts com CSS Grid e minmax()
Crie layouts responsivos inteligentes com CSS Grid e minmax(). Função poderosa para tracks flexíveis com tamanhos dinâmicos. Domine Grid agora!
Ler artigoWeb Design Responsivo
52 posts
CSS Logical Properties
Domine CSS Logical Properties para layouts inclusivos e multilíngues. Crie interfaces que se adaptam automaticamente a diferentes idiomas e preferências.
Ler artigoCSS Style Queries
Style Queries CSS: consultas baseadas em estilos de componentes. Próxima evolução após Container Queries para componentes ainda mais inteligentes. Futuro!
Ler artigoCSS min-content, max-content e fit-content
Entenda min-content, max-content e fit-content em CSS completamente. Guia completo sobre dimensionamento intrínseco para layouts flexíveis e responsivos!
Ler artigoprefers-reduced-data: como funciona a nova media query
Prefers-reduced-data: economize dados do usuário com CSS. Media query nativa para detectar preferência por menor consumo de dados móveis. Respeite!
Ler artigoAs novas viewports: Large, Small e Dynamic
Descubra as novas viewports CSS: Large, Small e Dynamic. Unidades lvh/svh/dvh para resolver problemas com barras móveis flutuantes. Use agora!
Ler artigoO novo web design responsivo
Descubra o novo web design responsivo: além de breakpoints. Container queries, component-driven e abordagens modernas de RWD. Atualize-se agora!
Ler artigoTextos responsivos com CSS clamp()
Crie textos responsivos com CSS clamp(). Tipografia fluida que escala suavemente entre tamanhos mínimos e máximos sem media queries. Aprenda!
Ler artigoBordas personalizadas responsivas com CSS background-repeat
Crie bordas personalizadas e responsivas com CSS puro facilmente. Técnica surpreendente usando background-repeat: space e round para efeitos únicos. Incrível!
Ler artigoComo fazer menu off canvas da maneira mais fácil
Aprenda a criar menu off-canvas da maneira mais fácil. Navegação lateral responsiva que desliza da lateral para mobile. Técnica e código completo!
Ler artigoO básico sobre Media Queries
Media queries CSS: guia completo de responsive web design. Breakpoints inteligentes, sintaxe e estratégias práticas para layouts adaptativos. Domine RWD!
Ler artigoO macete para unidades de viewport em mobile
Descubra o macete para unidades viewport (vh/vw) em mobile. Solução definitiva para problemas com barras de navegação em iOS e Android. Funciona!
Ler artigoVocê deve saber isso sobre unidades de viewport
Você deve saber isso sobre unidades viewport. Comportamentos inesperados, bugs mobile comuns e soluções práticas para vh, vw. Evite problemas!
Ler artigodpw expo #37 - roughViz.js, free-for.dev, Swiper
Explore Roughviz.js, Free-for.dev e Swiper no dpw expo. Gráficos estilo sketch artístico, recursos grátis para devs e slider mobile moderno. Teste!
Ler artigodpw expo #36 - React Bolt, Butter Cake, Browserhacks
Explore React Bolt, Butter Cake e Browserhacks no dpw expo. Componentes React ultra rápidos, CMS headless moderno e hacks de navegadores. Descubra!
Ler artigo9 dicas básicas de web design responsivo
Domine os fundamentos do design responsivo. Aprenda mobile first, viewports, media queries e crie layouts robustos para todos os dispositivos.
Ler artigoiframes responsivos
Aprenda a criar iframes responsivos com aspect ratio CSS. Técnica definitiva para vídeos YouTube, mapas e conteúdo incorporado adaptável. Funciona!
Ler artigohack flex-grow 9999: o hack de Flexbox que você precisa conhecer
Hack Flexbox com flex-grow: 9999 para layouts super inteligentes. Técnica avançada para quebra de linha automática sem media queries. Truque incrível!
Ler artigoComo criar templates com CSS Grid
Crie templates poderosos com CSS Grid facilmente. Guia prático sobre grid-template-areas, linhas nomeadas e layouts profissionais semânticos. Domine Grid!
Ler artigoComo detectar touch com CSS puro
Aprenda a detectar dispositivos touch com CSS puro usando Interaction Media Features. Hover e pointer para suporte a diferentes tipos de entrada. Detecte!
Ler artigoPlanejamento com imagens responsivas
Planejamento de imagens responsivas: estratégias completas e boas práticas. Otimize performance, UX e carregamento ideal para diferentes dispositivos. Planeje!
Ler artigo10 dicas para menus responsivos
Descubra 10 dicas para criar menus de navegação responsivos eficientes. Aprenda a priorizar conteúdo e otimizar experiência mobile dos usuários. Navegue!
Ler artigoRetrospectiva 2018
Relembre 2018 no dpw: breakpoints CSS, CSS Blocks da LinkedIn, otimização de estilos e novo tema do blog. Veja os artigos que marcaram o ano!
Ler artigoDiquinhas marotas de CSS Grid (parte 2)
Continue dominando CSS Grid com dicas avançadas - Parte 2. Mais técnicas profissionais, casos de uso reais e otimizações para layouts perfeitos. Domine Grid!
Ler artigoO poder de flex-grow em Flexbox
Descubra o verdadeiro poder de flex-grow em Flexbox CSS. Entenda distribuição inteligente de espaço e controle preciso de crescimento de elementos. Domine!
Ler artigoDiquinhas marotas de CSS Grid (parte 1)
Domine CSS Grid com dicas essenciais - Parte 1 da série. Aprenda técnicas avançadas, truques profissionais e melhores práticas para layouts modernos. Comece!
Ler artigoA maneira 100% correta de fazer breakpoints em CSS
Descubra a abordagem correta para breakpoints CSS responsivos. Aprenda a definir pontos de quebra baseados em conteúdo, não em dispositivos.
Ler artigoCurso "Flexbox: o guia completo"
Curso completo de Flexbox: guia definitivo e prático. Domine o sistema de layout unidimensional mais poderoso do CSS com exemplos práticos. Aprenda tudo!
Ler artigoPorque CSS Grid é melhor que Bootstrap para criar layouts
Comparativo técnico: CSS Grid vs Bootstrap. Descubra por que Grid oferece código mais limpo, flexibilidade superior e layouts antes impossíveis.
Ler artigoResponsive Components: uma solução para container queries
Responsive Components com Container Queries revolucionárias. Componentes que respondem ao próprio tamanho, não à viewport. Revolução no CSS moderno!
Ler artigoRetrospectiva 2017
Relembre 2017 no dpw: JavaScript this, Motion UI, microinterações e o polêmico DOM. Veja os artigos que marcaram o ano e impactaram a web brasileira!
Ler artigoMitos de interface mobile - Mito 2: sites móveis requerem menos features
Mito desmistificado: sites mobile precisam ter menos features. Descubra por que funcionalidades completas também são importantes em mobile. Repense UX!
Ler artigoCurso "CSS Grid: o sistema definitivo de layouts"
Primeiro curso brasileiro de CSS Grid Layout. Aprenda o sistema definitivo de layouts web com exemplos práticos, técnicas modernas e abordagens reais.
Ler artigoMitos de interface mobile - Mito 1: usuários móveis estão sempre com pressa
Mito desmistificado: usuários mobile estão sempre com pressa. Compreenda diferentes contextos de uso e necessidades variadas em dispositivos móveis. Repense!
Ler artigoCurso "CSS: um passo adiante"
Curso completo de CSS avançado: OOCSS, SMACSS, BEM, Sass e arquitetura CSS profissional. Eleve seu código ao próximo nível com técnicas de experts.
Ler artigoVocê não precisa de um framework CSS Grid
CSS Grid vs Frameworks: análise completa e imparcial. Descubra quando usar Grid nativo e quando frameworks CSS ainda fazem sentido em projetos. Decida!
Ler artigoImagem de largura total em layout com limite de largura
Imagem de largura total em layout com largura limitada. Técnica CSS para breakout de imagens full-width sem quebrar grid ou container. Truque incrível!
Ler artigoRedução Progressiva e Decaimento de Experiência
Entenda redução progressiva e decaimento de experiência. Aplique graceful degradation para garantir funcionalidade em todos os navegadores. Essencial!
Ler artigoA Zona do Polegar: projetando interfaces para polegares
Zona do polegar: design ergonômico para interfaces mobile. Aprenda sobre alcance, usabilidade e áreas de conforto em telas touchscreen. Otimize UX!
Ler artigoUnidades de viewport: controle de tipografia em web design responsivo
Domine unidades viewport para controle tipográfico responsivo. Use vw, vh, vmin/vmax para textos que escalam perfeitamente com a tela. Aprenda!
Ler artigoMenu Cortina (Curtain Menu): novo menu mobile
Menu Cortina (Curtain Menu): navegação mobile inovadora e elegante. Alternativa criativa ao tradicional hamburger menu para interfaces modernas. Inove!
Ler artigoRetrospectiva 2015
Retrospectiva 2015 do desenvolvimento para web. Relembre principais artigos, conquistas e momentos marcantes do ano no blog. Nostalgia pura!
Ler artigoImagens responsivas com srcset e sizes
Srcset e sizes: imagens responsivas baseadas em viewport HTML. Controle inteligente de resolução e densidade de pixels para performance otimizada!
Ler artigoFlexbox
Guia completo de Flexbox: sistema de layout unidimensional do CSS. Domine todas as propriedades, alinhamento e distribuição de elementos flexíveis. Aprenda!
Ler artigoDevice-Agnostic ou Web Design Responsivo Independente de Dispositivo
Entenda Device-Agnostic design: abordagem que considera navegadores, conexões e inputs diversos. Desenvolva sites preparados para qualquer cenário.
Ler artigoUnidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch
Unidades CSS: rem, vh, vw, vmin, vmax, ex, ch explicadas. Guia completo de unidades modernas para layouts flexíveis e tipografia responsiva. Domine!
Ler artigoWeb design responsivo com DevTools Device Mode
Web design responsivo com DevTools Device Mode do Chrome. Teste, debug e desenvolva sites mobile profissionais usando ferramentas nativas. Domine!
Ler artigoGenymotion: emulador de Android
Genymotion: o melhor emulador Android para desenvolvimento profissional. Extremamente rápido, confiável e essencial para testes mobile. Experimente!
Ler artigoTipografia responsiva: melhores artigos e tutoriais
Tipografia responsiva: melhores artigos e tutoriais selecionados. Curadoria completa de recursos essenciais sobre tipografia fluida e adaptativa. Aprenda!
Ler artigoUIkit: framework front-end modular responsivo
UIkit: framework front-end modular e responsivo profissional. Alternativa leve ao Bootstrap com componentes elegantes para desenvolvimento ágil. Use!
Ler artigoImagens em web design responsivo: atributo srcset e elemento picture
Imagens responsivas com srcset e picture HTML. Sirva imagens perfeitamente otimizadas por dispositivo usando HTML nativo e art direction. Otimize!
Ler artigoMedia queries e download de imagens
Media queries e download de imagens: otimização mobile essencial. Evite downloads desnecessários com estratégias de imagens responsivas inteligentes. Economize!
Ler artigo