Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS moderno para Web Semântica

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Rafael Dantas Rafael Dantas
November 28, 2018
47
0

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

More Decks by Rafael Dantas

See All by Rafael Dantas
O estado do CSS em 2019
Avatar for Rafael Dantas raffaeldantass
1
210
CSS animations under the hood
Avatar for Rafael Dantas raffaeldantass
0
80
Leve seu CSS para o futuro
Avatar for Rafael Dantas raffaeldantass
0
28
Houdini e o futuro mágico do CSS
Avatar for Rafael Dantas raffaeldantass
1
220
Dismistificando o CSS Grid Layout
Avatar for Rafael Dantas raffaeldantass
0
150
Houdini e o Futuro das CSS
Avatar for Rafael Dantas raffaeldantass
1
470
Dismistificando o CSS Grid Layout
Avatar for Rafael Dantas raffaeldantass
1
53

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
310
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
380
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
28k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.8k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
22k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
4
10k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
290
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.6k

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