Канал: dpw

Modificadores BEM com CSS Nesting Nativo

Modificadores BEM com CSS Nesting Nativo

CSS light-dark() - Dark Mode a Partir de Agora é ASSIM!

CSS light-dark() - Dark Mode a Partir de Agora é ASSIM!

Dominando Mixins e Functions em Sass

Dominando Mixins e Functions em Sass

CSS @scope: o Fim dos Conflitos em CSS!

CSS @scope: o Fim dos Conflitos em CSS!

Aprenda TUDO Sobre CSS Layers (CSS Cascade Layers)

Aprenda TUDO Sobre CSS Layers (CSS Cascade Layers)

Animações de scroll com CSS puro (Scroll-driven Animations)

Animações de scroll com CSS puro (Scroll-driven Animations)

Análise do Estado Atual de CSS (State of CSS 2023)

Análise do Estado Atual de CSS (State of CSS 2023)

CSS Nesting: Minha Opinião Sincera

CSS Nesting: Minha Opinião Sincera

Google I/O CSS & UI: As Melhores Features CSS 2023

Google I/O CSS & UI: As Melhores Features CSS 2023

Seu filho usa Tailwind?

Seu filho usa Tailwind?

Nova propriedade CSS: margin-trim

Nova propriedade CSS: margin-trim

Nova Tag HTML: search

Nova Tag HTML: search

6 Jogos para Aprender CSS Brincando!

6 Jogos para Aprender CSS Brincando!

CSS Grid com Animações e Transições com CSS puro!

CSS Grid com Animações e Transições com CSS puro!

CSS Logical Properties: O Segredo para Layouts Multilíngue

CSS Logical Properties: O Segredo para Layouts Multilíngue

Controle da Especificidade com Seletores CSS Modernos e BEM

Controle da Especificidade com Seletores CSS Modernos e BEM

Áreas de Grid - Curso CSS Grid - Aula 11

Áreas de Grid - Curso CSS Grid - Aula 11

Alinhamento de Conteúdo - Curso CSS Grid - Aula 6

Alinhamento de Conteúdo - Curso CSS Grid - Aula 6

A Nova Unidade CSS "fr" - Curso CSS Grid - Aula 5

A Nova Unidade CSS "fr" - Curso CSS Grid - Aula 5

Ocupando Espaços com CSS Grid (parte 2) - Curso CSS Grid - Aula 8

Ocupando Espaços com CSS Grid (parte 2) - Curso CSS Grid - Aula 8

Ocupando Espaços com CSS Grid (parte 1) - Curso CSS Grid - Aula 7

Ocupando Espaços com CSS Grid (parte 1) - Curso CSS Grid - Aula 7

CSS Grid na Prática - Layout 2 - Curso CSS Grid - Aula 16

CSS Grid na Prática - Layout 2 - Curso CSS Grid - Aula 16

auto-fill e auto-fit - Curso CSS Grid - Aula 12

auto-fill e auto-fit - Curso CSS Grid - Aula 12

CSS Grid na Prática - Layout 3 - Curso CSS Grid - Aula 17

CSS Grid na Prática - Layout 3 - Curso CSS Grid - Aula 17

Sua Primeira Grid - Curso CSS Grid - Aula 3

Sua Primeira Grid - Curso CSS Grid - Aula 3

CSS Grid na Prática - Layout 1 - Curso CSS Grid - Aula 15

CSS Grid na Prática - Layout 1 - Curso CSS Grid - Aula 15

Sobreposição de Conteúdo com CSS Grid - Curso CSS Grid - Aula 10

Sobreposição de Conteúdo com CSS Grid - Curso CSS Grid - Aula 10

Nomes de Linha em CSS Grid (parte 1) - Curso CSS Grid - Aula 13

Nomes de Linha em CSS Grid (parte 1) - Curso CSS Grid - Aula 13

Ocupando Espaços com CSS Grid (parte 3) - Curso CSS Grid - Aula 9

Ocupando Espaços com CSS Grid (parte 3) - Curso CSS Grid - Aula 9

Nomes de Linha em CSS Grid (parte 2) - Curso CSS Grid - Aula 14

Nomes de Linha em CSS Grid (parte 2) - Curso CSS Grid - Aula 14

repeat() e minmax() - Curso CSS Grid - Aula 4

repeat() e minmax() - Curso CSS Grid - Aula 4

Terminologia CSS Grid - Curso CSS Grid - Aula 1

Terminologia CSS Grid - Curso CSS Grid - Aula 1

CSS Grid substitui Flexbox? - Curso CSS Grid - Aula 2

CSS Grid substitui Flexbox? - Curso CSS Grid - Aula 2

Como Fazer um Menu Responsivo - Curso Flexbox - Aula 20

Como Fazer um Menu Responsivo - Curso Flexbox - Aula 20

flex-direction - Curso Flexbox - Aula 5

flex-direction - Curso Flexbox - Aula 5

order - Curso Flexbox - Aula 11

order - Curso Flexbox - Aula 11

O Que Nunca Te Contaram Sobre flex-grow - Curso Flexbox - Aula 13

O Que Nunca Te Contaram Sobre flex-grow - Curso Flexbox - Aula 13

justify-content - Curso Flexbox - Aula 8

justify-content - Curso Flexbox - Aula 8

Centralização Vertical - Curso Flexbox - Aula 16

Centralização Vertical - Curso Flexbox - Aula 16

flex-shrink - Curso Flexbox - Aula 14

flex-shrink - Curso Flexbox - Aula 14

CSS Grid substitui Flexbox? - Curso Flexbox - Aula 3

CSS Grid substitui Flexbox? - Curso Flexbox - Aula 3

flex-flow - Curso Flexbox - Aula 7

flex-flow - Curso Flexbox - Aula 7

Seu Primeiro Flex Container - Curso Flexbox - Aula 4

Seu Primeiro Flex Container - Curso Flexbox - Aula 4

Terminologia Flexbox - Curso Flexbox - Aula 2

Terminologia Flexbox - Curso Flexbox - Aula 2

Multicolunas de Altura Igual - Curso Flexbox - Aula 17

Multicolunas de Altura Igual - Curso Flexbox - Aula 17

O que é Flexbox - Curso Flexbox - Aula 1

O que é Flexbox - Curso Flexbox - Aula 1

Como Fazer um Accordion de Imagens - Curso Flexbox - Aula 22

Como Fazer um Accordion de Imagens - Curso Flexbox - Aula 22

Como Fazer um Widget de Previsão do Tempo com Flexbox - Curso Flexbox - Aula 21

Como Fazer um Widget de Previsão do Tempo com Flexbox - Curso Flexbox - Aula 21

flex-basis & flex - Curso Flexbox - Aula 15

flex-basis & flex - Curso Flexbox - Aula 15

flex-wrap - Curso Flexbox - Aula 6

flex-wrap - Curso Flexbox - Aula 6

align-items - Curso Flexbox - Aula 9

align-items - Curso Flexbox - Aula 9

Rodapé Fixo - Curso Flexbox - Aula 18

Rodapé Fixo - Curso Flexbox - Aula 18

Como Fazer o Layout Santo Graal com Flexbox - Curso Flexbox - Aula 19

Como Fazer o Layout Santo Graal com Flexbox - Curso Flexbox - Aula 19

align-self - Curso Flexbox - Aula 12

align-self - Curso Flexbox - Aula 12

align-content - Curso Flexbox - Aula 10

align-content - Curso Flexbox - Aula 10

Variáveis CSS: O Jeito Certo

Variáveis CSS: O Jeito Certo

:has() Vai Mudar o CSS para SEMPRE!

:has() Vai Mudar o CSS para SEMPRE!

Um Dev Júnior tem que Saber Isso de CSS Box Model

Um Dev Júnior tem que Saber Isso de CSS Box Model

Priority Hints

Priority Hints

BFB 2: Boilerplate Front End para a Web Moderna

BFB 2: Boilerplate Front End para a Web Moderna

Astro: A Primeira Meia Hora

Astro: A Primeira Meia Hora

DevTools CSS: Descubra os Segredos da Produtividade Front-End

DevTools CSS: Descubra os Segredos da Produtividade Front-End

A Grande Divisão do Front End em 60 segundos

A Grande Divisão do Front End em 60 segundos

O Front End Nunca Mais Será o Mesmo...

O Front End Nunca Mais Será o Mesmo...

CSS Shorthands: a Maneira Certa para Não Bugar

CSS Shorthands: a Maneira Certa para Não Bugar

Como Nomear Variáveis LIKE A PRO

Como Nomear Variáveis LIKE A PRO

Sistema de Cores Acessíveis com Radix Colors

Sistema de Cores Acessíveis com Radix Colors

Qual a Largura Ideal da Coluna do Meio em Layouts?

Qual a Largura Ideal da Coluna do Meio em Layouts?

State of CSS 2021: Análise Completa (português pt-br)

State of CSS 2021: Análise Completa (português pt-br)

Como DESENHAR Layouts com CSS Grid

Como DESENHAR Layouts com CSS Grid

Maneira Certa de Recortar Layout para CSS?

Maneira Certa de Recortar Layout para CSS?

A Mentalidade de Tokens em Design Systems

A Mentalidade de Tokens em Design Systems

Largura Mínima "Mobile" em Web Design Responsivo

Largura Mínima "Mobile" em Web Design Responsivo

É ISSO Que Faz Flexbox TÃO PODEROSO!

É ISSO Que Faz Flexbox TÃO PODEROSO!

Configurando Elementos com CSS Grid em Web Design Responsivo

Configurando Elementos com CSS Grid em Web Design Responsivo

A Diferença Entre Usar CSS Puro e Stitches

A Diferença Entre Usar CSS Puro e Stitches

O que é Design System? Para o quê serve um Design System?

O que é Design System? Para o quê serve um Design System?

4 Técnicas para Estilização por Contexto em CSS

4 Técnicas para Estilização por Contexto em CSS

Design Systems e Componentes Acessíveis com Stitches e Radix

Design Systems e Componentes Acessíveis com Stitches e Radix

O Novo Web Design Responsivo

O Novo Web Design Responsivo

Text Morphing (Metamorfose de Texto) com CSS puro

Text Morphing (Metamorfose de Texto) com CSS puro

Como Fazer Text Portrait (Retrato de Texto) com CSS puro

Como Fazer Text Portrait (Retrato de Texto) com CSS puro

Container Queries para Web Design Responsivo de Verdade!

Container Queries para Web Design Responsivo de Verdade!

CSS :is() & :where(): As Novas Funções Para Escrever CSS Melhor

CSS :is() & :where(): As Novas Funções Para Escrever CSS Melhor

Como inspecionar elementos nas Chrome DevTools

Como inspecionar elementos nas Chrome DevTools

Debug CSS Remoto com Dispositivo Real (DevTools + Android)

Debug CSS Remoto com Dispositivo Real (DevTools + Android)

Front End e Jogatina: NVIDIA Toast com CSS Puro

Front End e Jogatina: NVIDIA Toast com CSS Puro

SMACSS: A Arquitetura CSS Mais Conhecida

SMACSS: A Arquitetura CSS Mais Conhecida

Ferramentas de Especificidade CSS

Ferramentas de Especificidade CSS

OOCSS: Entenda os Princípios do CSS Moderno

OOCSS: Entenda os Princípios do CSS Moderno

State of CSS 2020: Análise da Melhor Pesquisa CSS

State of CSS 2020: Análise da Melhor Pesquisa CSS

Namespaces CSS para Front End mais Semântico e Profissional

Namespaces CSS para Front End mais Semântico e Profissional

Como Identificar Componentes: Web Dev Séc. XXI

Como Identificar Componentes: Web Dev Séc. XXI

Tira-Dúvidas BEM: Esclarecendo Tudo e Mais um Pouco

Tira-Dúvidas BEM: Esclarecendo Tudo e Mais um Pouco

3 Melhores Extensões de VS Code para CSS em 2021

3 Melhores Extensões de VS Code para CSS em 2021

Como Fazer Lazy Loading de Imagens com progressive-image

Como Fazer Lazy Loading de Imagens com progressive-image

Layout com Largura Máxima sem max-width [CSS Grid]

Layout com Largura Máxima sem max-width [CSS Grid]

Front End 5x Mais Rápido com essa ferramenta

Front End 5x Mais Rápido com essa ferramenta

Como fazer SVG animado e animar SVG com Vivus

Como fazer SVG animado e animar SVG com Vivus

Arrow Functions vs. Functions em JavaScript

Arrow Functions vs. Functions em JavaScript

Marcação de Texto Animado com JavaScript (Rough Notation)

Marcação de Texto Animado com JavaScript (Rough Notation)

Eventos JavaScript: entenda Capturing e Bubbling

Eventos JavaScript: entenda Capturing e Bubbling

CSS box-shadow

CSS box-shadow

⭐ Minicurso Animações CSS

⭐ Minicurso Animações CSS

Classes JavaScript: o Tutorial que Você Precisa

Classes JavaScript: o Tutorial que Você Precisa

Dark Mode com CSS: Simples, Rápido e Fácil

Dark Mode com CSS: Simples, Rápido e Fácil

Halfmoon: Framework Front End para Dashboards

Halfmoon: Framework Front End para Dashboards

[Projeto dpw] Layouts Com 1 Linha de CSS

[Projeto dpw] Layouts Com 1 Linha de CSS

Cookies em JavaScript de Maneira Simples (JS Cookie)

Cookies em JavaScript de Maneira Simples (JS Cookie)

HTML 10x Mais Rápido com Emmet

HTML 10x Mais Rápido com Emmet

Slider (Carousel) JavaScript Responsivo e Fácil de Usar

Slider (Carousel) JavaScript Responsivo e Fácil de Usar

7 Alternativas à DIV para Melhorar a Semântica HTML

7 Alternativas à DIV para Melhorar a Semântica HTML

BEM: A Convenção CSS Para Um Front End Muito Melhor

BEM: A Convenção CSS Para Um Front End Muito Melhor

Barra de Progresso Circular com CSS Puro [Técnica Muito Diferente!]

Barra de Progresso Circular com CSS Puro [Técnica Muito Diferente!]

Menu Dropdown com CSS Puro [o jeito MAIS FÁCIL]

Menu Dropdown com CSS Puro [o jeito MAIS FÁCIL]

Texto Responsivo com 1 Linha de Código: CSS clamp()

Texto Responsivo com 1 Linha de Código: CSS clamp()

EditorConfig: Estilos de Código Padronizados [Tutorial Completo]

EditorConfig: Estilos de Código Padronizados [Tutorial Completo]

CSS Grid e Flexbox: Layouts e Exemplos do Mundo Real

CSS Grid e Flexbox: Layouts e Exemplos do Mundo Real

Melhor Forma para Listas com Caption?

Melhor Forma para Listas com Caption?

Pequeno Upgrade no BFB: WebDev Moderno Ainda Melhor

Pequeno Upgrade no BFB: WebDev Moderno Ainda Melhor

Material Social Card (parte 3): JS

Material Social Card (parte 3): JS

Material Social Card (parte 2): CSS

Material Social Card (parte 2): CSS

Material Social Card (parte 1): HTML

Material Social Card (parte 1): HTML

Placeholder Loadings com CSS Puro

Placeholder Loadings com CSS Puro

Bordas Personalizadas Responsivas com background-repeat?!

Bordas Personalizadas Responsivas com background-repeat?!

Menu Off Canvas Muito Fácil de Fazer!

Menu Off Canvas Muito Fácil de Fazer!

Filtros CSS: são incríveis e fáceis de usar!

Filtros CSS: são incríveis e fáceis de usar!

Cards Layout com CSS Grid (Sem Media Queries) em 2min

Cards Layout com CSS Grid (Sem Media Queries) em 2min

CSS clip-path: o tutorial que você precisava

CSS clip-path: o tutorial que você precisava

Botão Neon Tuntz Tuntz em 2min

Botão Neon Tuntz Tuntz em 2min

Media Queries e Breakpoints: o Básico e Fundamental

Media Queries e Breakpoints: o Básico e Fundamental

Animação de Loading com CSS Puro em 2min

Animação de Loading com CSS Puro em 2min

O Básico de Sass para se Virar nas Webs

O Básico de Sass para se Virar nas Webs

Introdução a Animações CSS

Introdução a Animações CSS

Botão 3D com CSS Puro em 2min

Botão 3D com CSS Puro em 2min

CSS @supports (ou CSS Feature Queries)

CSS @supports (ou CSS Feature Queries)

Variáveis CSS e Cores: box-shadow-color?! 🤯

Variáveis CSS e Cores: box-shadow-color?! 🤯

Slanted Shapes (Formas Diagonais ou Razor-Blade Shape) com CSS

Slanted Shapes (Formas Diagonais ou Razor-Blade Shape) com CSS

Funções de Array JavaScript - Aula 8 (final) - API real!

Funções de Array JavaScript - Aula 8 (final) - API real!

Funções de Array JavaScript - Aula 7 - includes()

Funções de Array JavaScript - Aula 7 - includes()

Funções de Array JavaScript - Aula 6 - find()

Funções de Array JavaScript - Aula 6 - find()

Funções de Array JavaScript - Aula 5 - some()

Funções de Array JavaScript - Aula 5 - some()

Funções de Array JavaScript - Aula 4 - every()

Funções de Array JavaScript - Aula 4 - every()

Funções de Array JavaScript - Aula 3 - reduce()

Funções de Array JavaScript - Aula 3 - reduce()

Funções de Array JavaScript - Aula 2 - filter()

Funções de Array JavaScript - Aula 2 - filter()

Funções de Array JavaScript - Aula 1 - map()

Funções de Array JavaScript - Aula 1 - map()

A Maneira 100% Correta de Fazer Breakpoints em CSS

A Maneira 100% Correta de Fazer Breakpoints em CSS

Como Identificar Fontes: Guia com Identificadores de Fonte

Como Identificar Fontes: Guia com Identificadores de Fonte

A Maior Tendência de UI Design em 2020?

A Maior Tendência de UI Design em 2020?

Basic Front Boilerplate (BFB)

Basic Front Boilerplate (BFB)

Explique os projetos do seu portfolio

Explique os projetos do seu portfolio

Coloque TESTEMUNHOS no seu portfolio

Coloque TESTEMUNHOS no seu portfolio

dpw expo #40 - ApexCharts.js, Sal.js, Moveable, Cropper.js, FilePound

dpw expo #40 - ApexCharts.js, Sal.js, Moveable, Cropper.js, FilePound

dpw expo #39 - International Telephone Input, Focus Overlay, JustGage

dpw expo #39 - International Telephone Input, Focus Overlay, JustGage

Dicas para a página Sobre do portfolio

Dicas para a página Sobre do portfolio

dpw expo #38 - Jurassic Ninja, typical, gameController.js

dpw expo #38 - Jurassic Ninja, typical, gameController.js

dpw expo #37 - roughViz.js, free-for.dev, Swiper

dpw expo #37 - roughViz.js, free-for.dev, Swiper

dpw expo #36 - React Bolt, Butter Cake, Browserhacks

dpw expo #36 - React Bolt, Butter Cake, Browserhacks

Quais REDES SOCIAIS colocar no portfolio

Quais REDES SOCIAIS colocar no portfolio

dpw expo #35 - react-spinners-css, SimpleBar, CopyPalette

dpw expo #35 - react-spinners-css, SimpleBar, CopyPalette

Você precisa MOSTRAR SEUS TRABALHOS no seu portfolio

Você precisa MOSTRAR SEUS TRABALHOS no seu portfolio

Seu portfolio não precisa ser perfeito

Seu portfolio não precisa ser perfeito

dpw expo #34 - Can I email, clipboard.js, Flawwwless ui

dpw expo #34 - Can I email, clipboard.js, Flawwwless ui

dpw expo #33 - filesize.js, Radial Menu, UI Interactions

dpw expo #33 - filesize.js, Radial Menu, UI Interactions

Portfolio adequado ao cargo desejado

Portfolio adequado ao cargo desejado

dpw expo #32 - Image Map Generator, Divjoy, SVG Artista

dpw expo #32 - Image Map Generator, Divjoy, SVG Artista

dpw expo #31 - Page Transitions, Hopscotch, Agile CSS Framework

dpw expo #31 - Page Transitions, Hopscotch, Agile CSS Framework

Sabe fazer muitas coisas? Como apresentar seu portfolio?

Sabe fazer muitas coisas? Como apresentar seu portfolio?

5 maneiras de transparecer sua personalidade no portfolio

5 maneiras de transparecer sua personalidade no portfolio

dpw expo #30 - collectorium, perfundo, npkill

dpw expo #30 - collectorium, perfundo, npkill

Transpareça sua PERSONALIDADE no seu portfolio

Transpareça sua PERSONALIDADE no seu portfolio

dpw expo #29 - TypeLighter.js, Codeimg.io, Vuestic Admin

dpw expo #29 - TypeLighter.js, Codeimg.io, Vuestic Admin

dpw expo #28 - simplePARALLAX, Gitfolio, CSS Border Animations

dpw expo #28 - simplePARALLAX, Gitfolio, CSS Border Animations

dpw expo #27 - Gradient Magic, Text stripes, git-pending

dpw expo #27 - Gradient Magic, Text stripes, git-pending

Faça seu portfolio AGORA

Faça seu portfolio AGORA

dpw expo #26 - Tabulator, react-image-magnifiers, SuperTinyIcons

dpw expo #26 - Tabulator, react-image-magnifiers, SuperTinyIcons

dpw expo #25 - List.js, 26 recursos VS Code 2019, Color Thief

dpw expo #25 - List.js, 26 recursos VS Code 2019, Color Thief

Blog do portfa com TEXTOS MISTURADOS

Blog do portfa com TEXTOS MISTURADOS

dpw expo #24 - Animista, Static Site Boilerplate, Humanize Duration

dpw expo #24 - Animista, Static Site Boilerplate, Humanize Duration

dpw expo #23 - Frappe Charts, Darkmode.js, Eva Design System

dpw expo #23 - Frappe Charts, Darkmode.js, Eva Design System

dpw expo #22 - Shape.so, MoveTo.js, uiGradients

dpw expo #22 - Shape.so, MoveTo.js, uiGradients

dpw expo #21 - freezeframe.js, Spotlight.js, Microjs

dpw expo #21 - freezeframe.js, Spotlight.js, Microjs

Você sabe o que é Ghost Portfolio? 👻

Você sabe o que é Ghost Portfolio? 👻

dpw expo #20 - Transfonter, Specificity Calculator, ms

dpw expo #20 - Transfonter, Specificity Calculator, ms

Item de portfolio só conta se for site completo?

Item de portfolio só conta se for site completo?

Análise Portfa #2 - Matheus Pratta

Análise Portfa #2 - Matheus Pratta

dpw expo #19 - Scene.js, Pressure.js, pixelmatch

dpw expo #19 - Scene.js, Pressure.js, pixelmatch

FOTO e COPY IMPACTANTE no portfolio

FOTO e COPY IMPACTANTE no portfolio

dpw expo #18 - Zdog, Pickr, CSS Grid Generator

dpw expo #18 - Zdog, Pickr, CSS Grid Generator

Descrição e link para o trabalho no portfolio

Descrição e link para o trabalho no portfolio

Ninguém quer ver ISSO no seu portfolio

Ninguém quer ver ISSO no seu portfolio

dpw expo #17 - micron.js, Tailwind CSS, Tornis

dpw expo #17 - micron.js, Tailwind CSS, Tornis

Análise Portfa #1 - Adriano Luis Lopes Silva

Análise Portfa #1 - Adriano Luis Lopes Silva

dpw expo #16 - CSSFX, iziModal, Tippy.js

dpw expo #16 - CSSFX, iziModal, Tippy.js

Projetos de autoria no seu portfolio: são importantes? Você deve incluir? 🤨

Projetos de autoria no seu portfolio: são importantes? Você deve incluir? 🤨

dpw expo #15 - iziToast, animate.css, CSS3 Transform

dpw expo #15 - iziToast, animate.css, CSS3 Transform

dpw expo #14 - Ikonate, SortableJS, TypeIt

dpw expo #14 - Ikonate, SortableJS, TypeIt

Quantos itens colocar no portfolio (talvez a resposta te surpreenda)

Quantos itens colocar no portfolio (talvez a resposta te surpreenda)

Evite esse grave erro no seu portfolio (dica de portfolio para programadores)

Evite esse grave erro no seu portfolio (dica de portfolio para programadores)

dpw expo #13 - Buefy, BootboxJS, Uppy

dpw expo #13 - Buefy, BootboxJS, Uppy