SlideShare a Scribd company logo
FLEXBOX AND GRID LAYOUT
Diego Eis
I love work with web.
And I lost 50 pounds. ;-)
@diegoeis
@tableless
http://tableless.com.br
http://medium.com/@diegoeis
http://slideshare.net/diegoeis
http://bit.ly / livro-como-ser-frontend
LOCAWEB
OPEN SOURCE
opensource.locaweb.com.br
Gambi.
Until now we only used Macgyver ways to structure layouts.
Table
Tables made history. They changed the way how we show
and structure content in the websites, but…
Column 1 Good article Column 2
X
No semantic.
Float
Float give us some flexibility, but…
Float affect other elements
Forcing you to use other properties and techniques to solve
some problems: clearfix, overflow, faux columns, double
margins (old ie) etc etc etc…
Float depends of HTML
structure
You need to put the HTML elements in right place and
order to make this right.
How to solve the problem
of structuring layouts?
Three solutions to different
problems
• Grid Layout to structure parent elements.
• Flexbox to control the struture of childs.
• Template Layout to control the flow of content.
Template Layout
At the moment, it defines a typographic grid for
CSS. It has features to set up a grid-based
template, to style the slots of the template and to
flow content into them.
Today, let’s talk about
Grid Layout and Flexbox
Grid Layout
This CSS module defines a two-dimensional grid-
based layout system, optimised for user interface
design. In the grid layout model, the children of a
grid container can be positioned into arbitrary
slots in a flexible or fixed predefined layout grid.
Grid terminology
A grid container
establishes a new
grid formatting
context for its
contents.
Grid container
Grid lines are horizontal or
vertical lines between grid
cells. They can be named or
referred by numbers.
The highlighted line in the
image is the column line 2.
Grid lines
It is the space
between two
adjacent row and two
adjacent column grid
lines. It is the smallest
unit of the grid that can
be referenced when
positioning grid items
Grid cell
.main {
// Enable the grid space
display: grid;
}
grid-template-rows: auto 20px auto;
grid-template-columns: 250px 20px auto;
grid-template-rows: auto 20px auto;
auto
20px
auto
grid-template-columns: 250px 20px auto;
250px
20px
auto
1
2
3
4
1 2 3 4
header {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
1
2
1 2
1 4
1 4
aside {
grid-row: 3 / 4;
grid-column: 1 / 2;
}
3
4
3 4
1
2
1 2
.content {
grid-row: 3 / 4;
grid-column: 3 / 4;
}
3
4
3 4
3
4
3 4
header
contentsidebar
.main {
display: grid;
grid-template-rows: auto 20px auto;
grid-template-columns: 250px 20px auto;
}
grid-template-areas: “header header header"
“. . .”
“sidebar . article”
header {
grid-area: header;
}
aside {
grid-area: sidebar;
}
article {
grid-area: article;
}
http://gridbyexample.com
Flexbox
Flexbox define how the childs will fill the blank space
available of parent element.
Flex Container
First, we need to know the context where the flex items will
work. The field where we will work is called Flex Container.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
flex-direction
Define flow of the flex items placed in flex container.
item 1 item 2 item 3
row default
row-reverse
flex-direction
item 3 item 2 item 1
item 3 item 2 item 1
with float…
float: right;
float: left;
item 3
column column-reverse
flex-direction
item 2
item 1
item 1
item 2
item 3
flex-wrap
Define if the flex items will break onto multiple lines if their
width are larger than width of container.
nowrap default
item 1 item 2 item 3
wrap
item 1 item 2
item 3
wrap-reverse
item 3 item 2
item 1
justify-content
Determine align of flex items in main-axis (horizontal line).
item 1 item 2 item 3
flex-start
default
justify-content
item 1 item 2 item 3
flex-end
item 1 item 2 item 3
center
item 1 item 2 item 3
space-around
justify-content
item 1 item 2 item 3
space-between
align-items
Determine align of flex items in cross-axis (vertical line).
item 1 item 2 item 3
stretch
default
align-items
center
item 1 item 2 item 3
flex-start
align-items
flex-end
item 1 item 2 item 3
item 1 item 2 item 3
baseline
align-items
item 1 item 2 item 3
align-content
Align flex items with extra space on the cross-axis, within
the flex container when have multiple lines.
stretch
align-content
item 1
flex-start
item 1 item 2
item 3 item 4
item 3
item 2
item 4
flex-end
align-content
item 1 item 2
item 3 item 4
center
item 1 item 2
item 3 item 4
space-around
align-content
item 1 item 2
item 3 item 4
space-between
item 1 item 2
item 3 item 4
Flex Items
order
Man, this is magic. This is awesome. This is “chuchu beleza”.
item 3 item 1 item 2
.item1 { order: 2; } .item2 { order: 3; } .item3 { order: 1; }
flex-grow
Define how much the item will take of available space. The
value serves as a proportion. If all elements have 1 of value,
all elements will have same width. If one element have 2 of
value, that element will have the double of size.
item 2 item 3
.item2 { flex-grow: 2; }
item 1
flex-shrink
Define how much the item will shrink.
item 2
.item2 { flex-shrink: 2; }
item 3item 1
flex-basis
Define the width of elements. This is works like max-width.
item 1 item 2 item 3
.item { flex-basis: 100%; }
item 1
.item { flex-basis: 100px; }
item 2 item 3
flex
Shorthand that make all the magic.
item 1 item 2 item 3
.item { flex: 1; }
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
DEMO
http://flexiejs.com
philipwalton.github.io/solved-by-flexbox
Goodbye!
Let me know what you think!
@diegoeis
@tableless
http://tableless.com.br
http://medium.com/@diegoeis
http://slideshare.net/diegoeis

More Related Content

What's hot

Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)
Zoe Gillenwater
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Stephen Hay
 
Ridiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with FlexboxRidiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with Flexbox
Eric Carlisle
 
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)
Zoe Gillenwater
 
The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS Layout
Zoe Gillenwater
 
INTRODUCTIONS OF CSS PART 2
INTRODUCTIONS OF CSS PART 2INTRODUCTIONS OF CSS PART 2
INTRODUCTIONS OF CSS PART 2
SURYANARAYANBISWAL1
 
Chapter6
Chapter6Chapter6
Chapter6
DeAnna Gossett
 
10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site
Morten Rand-Hendriksen
 

What's hot (8)

Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)Enhancing Responsiveness With Flexbox (Smashing Conference)
Enhancing Responsiveness With Flexbox (Smashing Conference)
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
 
Ridiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with FlexboxRidiculously Easy Layouts with Flexbox
Ridiculously Easy Layouts with Flexbox
 
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)
 
The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS Layout
 
INTRODUCTIONS OF CSS PART 2
INTRODUCTIONS OF CSS PART 2INTRODUCTIONS OF CSS PART 2
INTRODUCTIONS OF CSS PART 2
 
Chapter6
Chapter6Chapter6
Chapter6
 
10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site
 

Viewers also liked

O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked Data
Diego Eis
 
FrontInVale
FrontInValeFrontInVale
FrontInVale
Guilherme Souza
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Stephen Hay
 
CSS 4 - What's coming up
CSS 4 - What's coming upCSS 4 - What's coming up
CSS 4 - What's coming up
Diego Eis
 
Um pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftUm pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoft
Diego Eis
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
Diego Eis
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
Diego Eis
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
Diego Eis
 
The BGs - Background CSS
The BGs - Background CSSThe BGs - Background CSS
The BGs - Background CSS
Bunee.io - Hiring with Intelligence
 
Flexbox
FlexboxFlexbox
Flexbox
Netcetera
 
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)
Zoe Gillenwater
 
Dominating the Web Typography
Dominating the Web TypographyDominating the Web Typography
Dominating the Web Typography
Eduardo Shiota Yasuda
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Structuring apps in Scala
Structuring apps in ScalaStructuring apps in Scala
Structuring apps in Scala
Phil Calçado
 
APIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog FoodAPIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog Food
Phil Calçado
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Diego Eis
 
Cloud Reliability Patterns
Cloud Reliability PatternsCloud Reliability Patterns
Cloud Reliability Patterns
rafaelferreira
 
Desafio dos testes em uma arquitetura de micro serviços
Desafio dos testes em uma arquitetura de micro serviçosDesafio dos testes em uma arquitetura de micro serviços
Desafio dos testes em uma arquitetura de micro serviços
Frederico Augusto Do Carmo Moreira
 
Rhein-Main Scala Enthusiasts — Your microservice as a Function
Rhein-Main Scala Enthusiasts — Your microservice as a FunctionRhein-Main Scala Enthusiasts — Your microservice as a Function
Rhein-Main Scala Enthusiasts — Your microservice as a Function
Phil Calçado
 
ScalaItaly 2015 - Your Microservice as a Function
ScalaItaly 2015 - Your Microservice as a FunctionScalaItaly 2015 - Your Microservice as a Function
ScalaItaly 2015 - Your Microservice as a Function
Phil Calçado
 

Viewers also liked (20)

O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked Data
 
FrontInVale
FrontInValeFrontInVale
FrontInVale
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
 
CSS 4 - What's coming up
CSS 4 - What's coming upCSS 4 - What's coming up
CSS 4 - What's coming up
 
Um pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftUm pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoft
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
 
The BGs - Background CSS
The BGs - Background CSSThe BGs - Background CSS
The BGs - Background CSS
 
Flexbox
FlexboxFlexbox
Flexbox
 
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)
 
Dominating the Web Typography
Dominating the Web TypographyDominating the Web Typography
Dominating the Web Typography
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Structuring apps in Scala
Structuring apps in ScalaStructuring apps in Scala
Structuring apps in Scala
 
APIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog FoodAPIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog Food
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
 
Cloud Reliability Patterns
Cloud Reliability PatternsCloud Reliability Patterns
Cloud Reliability Patterns
 
Desafio dos testes em uma arquitetura de micro serviços
Desafio dos testes em uma arquitetura de micro serviçosDesafio dos testes em uma arquitetura de micro serviços
Desafio dos testes em uma arquitetura de micro serviços
 
Rhein-Main Scala Enthusiasts — Your microservice as a Function
Rhein-Main Scala Enthusiasts — Your microservice as a FunctionRhein-Main Scala Enthusiasts — Your microservice as a Function
Rhein-Main Scala Enthusiasts — Your microservice as a Function
 
ScalaItaly 2015 - Your Microservice as a Function
ScalaItaly 2015 - Your Microservice as a FunctionScalaItaly 2015 - Your Microservice as a Function
ScalaItaly 2015 - Your Microservice as a Function
 

Similar to Flexbox and Grid Layout: How you will structure layouts tomorrow.

Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
Rachel Andrew
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
Rachel Andrew
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutDevoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
Rachel Andrew
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Rachel Andrew
 
But what about old browsers?
But what about old browsers?But what about old browsers?
But what about old browsers?
Rachel Andrew
 
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid LayoutAn Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
Rachel Andrew
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
Rachel Andrew
 
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzCSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
Rachel Andrew
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSS
Rachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
Rachel Andrew
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
Rachel Andrew
 
An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutAn Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid Layout
Rachel Andrew
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS Layout
Rachel Andrew
 
Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!
Rachel Andrew
 
CSSConf.asia - Laying out the future
CSSConf.asia - Laying out the futureCSSConf.asia - Laying out the future
CSSConf.asia - Laying out the future
Rachel Andrew
 
Laying out the future
Laying out the futureLaying out the future
Laying out the future
Rachel Andrew
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS Layout
Rachel Andrew
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid Layout
Rachel Andrew
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
Rachel Andrew
 

Similar to Flexbox and Grid Layout: How you will structure layouts tomorrow. (20)

Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutDevoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
 
But what about old browsers?
But what about old browsers?But what about old browsers?
But what about old browsers?
 
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid LayoutAn Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzCSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSS
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
 
An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutAn Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid Layout
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS Layout
 
Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!
 
CSSConf.asia - Laying out the future
CSSConf.asia - Laying out the futureCSSConf.asia - Laying out the future
CSSConf.asia - Laying out the future
 
Laying out the future
Laying out the futureLaying out the future
Laying out the future
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS Layout
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid Layout
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
 

More from Diego Eis

Carreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutosCarreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutos
Diego Eis
 
Service Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos DigitaisService Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos Digitais
Diego Eis
 
Métricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística BásicaMétricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística Básica
Diego Eis
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
Diego Eis
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
Diego Eis
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
Diego Eis
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
Diego Eis
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
Diego Eis
 
HTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeHTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidade
Diego Eis
 
Manual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorManual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor Empreendedor
Diego Eis
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
Diego Eis
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contexto
Diego Eis
 
Padrões Web passado, presente, futuro
Padrões Web passado, presente, futuroPadrões Web passado, presente, futuro
Padrões Web passado, presente, futuro
Diego Eis
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
Diego Eis
 
Padrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedorPadrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedor
Diego Eis
 

More from Diego Eis (15)

Carreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutosCarreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutos
 
Service Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos DigitaisService Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos Digitais
 
Métricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística BásicaMétricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística Básica
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 
HTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeHTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidade
 
Manual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorManual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor Empreendedor
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contexto
 
Padrões Web passado, presente, futuro
Padrões Web passado, presente, futuroPadrões Web passado, presente, futuro
Padrões Web passado, presente, futuro
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
 
Padrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedorPadrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedor
 

Recently uploaded

How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
Federico Razzoli
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 

Recently uploaded (20)

How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 

Flexbox and Grid Layout: How you will structure layouts tomorrow.