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
33

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
48
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
110
Houdini e o Futuro das CSS
Avatar for Rafael Dantas raffaeldantass
1
450
Dismistificando o CSS Grid Layout
Avatar for Rafael Dantas raffaeldantass
1
53

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.3k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
6
650
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
83
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
105
19k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
523
40k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
12k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
92
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