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

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
44
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
74
Leve seu CSS para o futuro
Avatar for Rafael Dantas raffaeldantass
0
24
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
140
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
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
52k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
240
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
460
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
450
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
480
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
380
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
39k

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