Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS moderno para Web Semântica

Avatar for Rafael Dantas Rafael Dantas
November 28, 2018
0
35

CSS moderno para Web Semântica

Apresentação feita no 7 Masters sobre semântica na web.

Avatar for Rafael Dantas

Rafael Dantas

November 28, 2018
Tweet

More Decks by Rafael Dantas

See All by Rafael Dantas
O estado do CSS em 2019
Avatar for Rafael Dantas raffaeldantass
1
190
CSS animations under the hood
Avatar for Rafael Dantas raffaeldantass
0
50
Leve seu CSS para o futuro
Avatar for Rafael Dantas raffaeldantass
0
15
Houdini e o futuro mágico do CSS
Avatar for Rafael Dantas raffaeldantass
1
210
Dismistificando o CSS Grid Layout
Avatar for Rafael Dantas raffaeldantass
0
120
Houdini e o Futuro das CSS
Avatar for Rafael Dantas raffaeldantass
1
460
Dismistificando o CSS Grid Layout
Avatar for Rafael Dantas raffaeldantass
1
53

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Faster Mobile Websites
Avatar for Dean Hume deanohume
309
31k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Navigating Team Friction
Avatar for Lara Hogan lara
189
15k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k

Transcript

  1. Usando CSS moderno para criar estruturas de marcação mais limpas

    Por Rafael Dantas

  2. @raffaeldantass @valleweb rafa-dantas.com.br

  3. Problemas que tínhamos antigamente na marcação Marcação não era muito

    declarativa As necessidades dentro da web evoluíram muito rápido HTML/CSS/JS não estavam acompanhando Resultado? Marcações muito inchadas
  4. None
  5. None

  6. COM FLEXBOX

  7. COM FLEXBOX

  8. COM CSS GRID

  9. COM CSS GRID

  10. Comparações entre as formas desenvolvidas Relembrando o layout proposto

  11. HTML

  12. CSS

  13. E o que concluimos? Através do exemplo, foi possível escrever

    menos código De maneira mais semantica Auxiliando na performance, manutenção, acessibilidade Resultado? Mais fácil de entender, mais rápido pra desenvolver

  14. @raffaeldantass OBRIGADO! Segue a gente! @valleweb rafa-dantas.com.br