Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

CSS moderno para Web Semântica

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

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
200
CSS animations under the hood
Avatar for Rafael Dantas raffaeldantass
0
52
Leve seu CSS para o futuro
Avatar for Rafael Dantas raffaeldantass
0
16
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
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
1
80
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
69k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k

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