SlideShare uma empresa Scribd logo
1 de 71
Baixar para ler offline
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

Mais conteúdo relacionado

Mais procurados

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 FlexboxEric 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 LayoutZoe Gillenwater
 
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 SiteMorten Rand-Hendriksen
 

Mais procurados (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
 

Destaque

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 DataDiego Eis
 
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 upDiego Eis
 
Um pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftUm pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftDiego 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 PathDiego 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-endDiego 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
 
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Zoe Gillenwater
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Structuring apps in Scala
Structuring apps in ScalaStructuring apps in Scala
Structuring apps in ScalaPhil 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 FoodPhil 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 DesignDiego Eis
 
Cloud Reliability Patterns
Cloud Reliability PatternsCloud Reliability Patterns
Cloud Reliability Patternsrafaelferreira
 
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 FunctionPhil 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 FunctionPhil Calçado
 

Destaque (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
 

Semelhante a Learn Flexbox and Grid Layout for Web Design

Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFRachel 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 TodayRachel 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 LayoutRachel 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 FreiburgRachel 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 LayoutRachel Andrew
 
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzCSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzRachel Andrew
 
The New CSS Layout - dotCSS
The New CSS Layout - dotCSSThe New CSS Layout - dotCSS
The New CSS Layout - dotCSSRachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersRachel 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 - RuhrJSRachel 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 LayoutRachel Andrew
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS LayoutRachel 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 futureRachel Andrew
 
Laying out the future
Laying out the futureLaying out the future
Laying out the futureRachel Andrew
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutRachel Andrew
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid LayoutRachel Andrew
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxRachel Andrew
 

Semelhante a Learn Flexbox and Grid Layout for Web Design (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
 

Mais de 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 minutosDiego 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 DigitaisDiego 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ásicaDiego 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 webDiego 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-endDiego Eis
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSSDiego Eis
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSSDiego Eis
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTMLDiego Eis
 
HTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeHTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeDiego 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 EmpreendedorDiego Eis
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para webDiego Eis
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contextoDiego Eis
 
Padrões Web passado, presente, futuro
Padrões Web passado, presente, futuroPadrões Web passado, presente, futuro
Padrões Web passado, presente, futuroDiego 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 designerDiego 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 desenvolvedorDiego Eis
 

Mais de 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
 

Último

Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...BookNet Canada
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxKunal Gupta
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementDianaGray10
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfwill854175
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxmprakaash5
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024BookNet Canada
 
Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Antonio de Llamas
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactivestartupro
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023Joshua Flannery
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 

Último (20)

Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptx
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions management
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdf
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptx
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
 
Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactive
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 

Learn Flexbox and Grid Layout for Web Design