SlideShare a Scribd company logo
1 of 104
Download to read offline
CSS— a talk about —
frontend development for designers
Idan Gazit • @idangazit
HIT • 24th November 2010
http://flic.kr/p/7TYgHL
http://flic.kr/p/6TnQbA
I COME FROM AMERICA
My Hebrew sucks.
don’t be afraid.
deep but doable
Photo by adesigna - http://flic.kr/p/7eukcs
Photo by Yandle - http://flic.kr/p/4sfHWp
WIREFRAMES
Photo by xiaming - http://flic.kr/p/JP3Xs
SEMANTIC MARKUP
Photo by wwarby - http://flic.kr/p/3q3A3r
LOTS OF EFFORT
especially IE6
Tables
Flash
<img>
Tables
Flash
<img>
unsemantic
unsemantic
unreadableiOS
Tables
Flash
<img>
unsemantic
unsemantic
unreadableiOS
Future Proofing.
Block vs. Inline
The Box Model
Positioning
Selectors
Typography and CSS
break!
Markup
CSS
BLOCK VS. INLINE
Block Inline
div
p
h1…h6
ul, ol, li
span
a
img
strong, em
Block Inline
BLOCK
100% width
height according to content
can contain both inline and block content
can control positioning
BLOCK
Block 1
Block 2
Block 3
Block 4
Block 5
INLINE
height according to content
width according to content
can contain content (and other inlines)
automatic position in flow
INLINE
Block 1
Inline 1 2 3 4
5 6 7
7 8
Block 2
Inline 1 2 3 4
5 6 7
7 8
Block 3
width
height
margin
padding
width
height
margin
padding
Block Inline
width
height
margin
padding
width
height
margin
padding
Block Inline
div
p
h1…h6
ul, ol, li
span
a
img
strong, em
Block Inline
<div id=“article_header”>
section
header, footer
article
nav
Block
HTM
L 5
display: block
force an element to be block-level
THE BOX MODEL
WTF?
Doesn’t work the way you expect.
CSS for Designers
CSS for Designers
HOW BIG AM I?
div {
width: 400px;
height: 500px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
HOW BIG AM I?
width: 400px +10 +10 +1 +1 = 422px
height: 500px +10 +10 +1 +1 = 522px
padding
left + right
border
left + right
padding
top + bottom
border
top + bottom
CSS for Designers
Math
size + padding + border = actual size
More Math
“width: auto;”
containing block width
- margin
- border
- padding
= content width.
especially IE6
POSITIONING
position : Static;
Relative;
Absolute;
Fixed;
STATIC
Block 1
Block 2
Block 3
Block 4
Block 5
RELATIVE
Block 1
Block 3
Block 4
Block 5
display: relative
left: 50px
top: 50px
RELATIVE
Block 1
Block 3
Block 4
Block 5
display: relative
left: -50px
top: -50px
RELATIVE
Block 1
Block 3
Block 4
Block 5
display: relative
ABSOLUTE
Block 1
Block 3
Block 4
Block 5
Block 2
position: absolute;
left: 0;
ABSOLUTE
Block 1
Block 3
Block 4
Block 5
Block 2
position: absolute;
right: 0; bottom:0;
position: relative
ABSOLUTE
Block 1
Block 3
Block 4
Block 2
position: absolute;
right: 0; top: 100px;
position: relative
ABSOLUTE
Block 1
Block 3
Block 4
Block 2
position: absolute;
right: 0; left: 0; bottom:0;
position: relative
FIXED
Block 1
Block 3
Block 4
Block 2
position: fixed;
right: 0; bottom:0;
position: relative
FIXED
Block 1
Block 3
Block 4
Block 2
position: fixed;
right: 0; left: 0; bottom:0;
z-index
control overlap
CSS for Designers
CSS for Designers
floats
remove elements from flow
position: relative
FLOATS
Block 1
Block 2
Block 3
Block 4
position: relative
FLOATS
Block 1Block 2
float: left;
width: 200px;
height: 300px;
Block 3
Block 4
Margin Collapsing
unintuitive
MARGIN COLLAPSING
Block 1
margin-bottom: 50px
Block 2
margin-top: 30px
??px
MARGIN COLLAPSING
Block 1
margin-bottom: 50px
Block 2
margin-top: 30px
50px
W3C
www.w3.org/TR/CSS2/box.html
Photo by Wahlander - http://flic.kr/p/6UgrwM
POPCORN TIME!
SELECTORS
h1 { color: red; font-size: 32px;}
selector declaration block
h1 { color: red; font-size: 32px;}
declaration
selector declaration block
h1 { color: red; font-size: 32px;}
declaration
selector declaration block
property value
h1 { color: red; font-size: 32px;}
selector declaration block
IN THE BEGINNING,
THERE WAS THE DOM
<!DOCTYPE HTML>
<html>
<head>
<title>Show off the DOM!</title>
</head>
<body>
<div id="content">
<p>
Picture yourself on a boat in a river,
with tangerine trees and marmalade skies.
</p>
</div>
</body>
</html>
HTML
head body
title div
p
RELATIONSHIPS
Ancestor/Descendant
Parent/Child
Sibling
HTML
head body
title div
p
ancestor
descendant
descendant
descendant
HTML
head body
title div
p
ancestor
descendant
descendant
child
parent
HTML
head body
title div
p
siblingsibling
http://flic.kr/p/C3C52
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
p.large
p of class “large”
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
p
type
#nav
any element with id “nav”
.intro.large
multiple classes
IE6
div > p
child
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS div p
descendant
h1 + p
adjacent sibling
IE6
IE6
*universal
img[alt=“foo”]
<img alt=“foo” … >
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
img[alt]
<img alt=“…anything…” … >
img[alt~=“foo”]
<img alt=“blah foo bar” … >
img[alt|=“foo”]
<img alt=“blah-foo-bar” … >
IE6
IE6
IE6
IE6
img[alt^=“foo”]
<img alt=“foobar” … >
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
img[alt$=“foo”]
<img alt=“barfoo” … >
img[alt*=“foo”]
<img alt=“barfoobar” … >
IE6
IE6
IE6
CSS 3
PSEUDO-CLASSES
:first-child
:link
:visited
:hover
:active
:focus
:lang(foo)
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
IE6 - links only
IE7 - links only
IE8
IE8 - still not 100%
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
div>p:first-child
<div>
<p>yes!</p>
<p>no</p>
</div>
IE8
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
:nth-child(formula)
An+B:
“Every A’th element starting from B”
3n: 0, 3, 6, 9…
3n+1: 1, 4, 7, 10…
even (== 2n+1)
odd (== 2n)
CSS 3None of this works in IE < 9.
PSEUDO-ELEMENTS
:first-line, :first-letter
:before, :after
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
IE8
webkit, opera
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
li.optional:before
li.optional:before {
font-color: red;
content: “optional - ”
}
<h1>Bring for hike:</h1>
<ul>
<li>hat</li>
<li>water</li>
<li class=“optional”>camera</li>
</ul>
Bring for hike:
• hat
• water
• optional - camera
IE8
SPECIFICITY
style=“…” attribute in an element
IDs
attributes, classes, pseudo-classes
elements, pseudo-elements
Later rules of same specificity trump earlier rules
http://www.w3.org/TR/CSS2/cascade.html#specificity
OMG WTF PPK
quirksmode.org/css/contents.html
TYPOGRAPHY
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
— the art and science of —
presenting textual information
Web Design is 95% Typography
http://informationarchitects.jp/the-web-is-all-about-typography-period/
http://flic.kr/p/6KcBR4
Gutenberg: 1436
574 years of tradition and best-practices.
The clothes in which
you dress your words.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet
doming id quod mazim placerat facer possim assum.
Typi non habent claritatem insitam; est usus legentis
in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii
legunt saepius.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet
doming id quod mazim placerat facer possim assum.
Set “Solid” 1.3em
Lorem ipsum dolor sit M
nibh euismod tincidunt
1 em
1.5 em
Line height of 1.3-2.0 ems
RULE
THUMB
of
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus
legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera
gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et
quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim assum.
Measure: 2 alphabets
RULE
THUMB
of
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim assum.
Typi non habent claritatem insitam; est usus legentis in iis qui facit
eorum claritatem. Investigationes demonstraverunt lectores legere
me lius quod ii legunt saepius.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore
te feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil
imperdiet doming id quod mazim placerat facer
possim assum.
12px 16px/1.3em
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
Body Text: 16px
RULE
THUMB
of
16px = 100% in most browsers
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
Dolphins Are Just Gay Sharks
Jan 28th 2010 • 7:45 PM
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Tagged fake, news
OMG PONIES BLOG
http://flic.kr/p/4Pdz2D
My eyes, ze goggles do NOTHING!
2-3 Typefaces, Maximum
RULE
THUMB
of
Sans-serif (ex. Helvetica) for titles
Serif (ex. Georgia) for body text
typographyforlawyers.com
webtypography.net
read and obey.
Questions?
Thank you!
@idangazit
slides: http://db.tt/GfcttW0

More Related Content

Viewers also liked

Web Audio Band - Playing with a band in your browser
Web Audio Band - Playing with a band in your browserWeb Audio Band - Playing with a band in your browser
Web Audio Band - Playing with a band in your browserEduardo Shiota Yasuda
 
Fake It While We Make It (Data-Driven Prototyping)
Fake It While We Make It (Data-Driven Prototyping)Fake It While We Make It (Data-Driven Prototyping)
Fake It While We Make It (Data-Driven Prototyping)Ryan LaBouve
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceEduardo Shiota Yasuda
 
O Design e a Interface no mundo da Programação
O Design e a Interface no mundo da ProgramaçãoO Design e a Interface no mundo da Programação
O Design e a Interface no mundo da ProgramaçãoEduardo Shiota Yasuda
 
Datadesignmeaning
DatadesignmeaningDatadesignmeaning
DatadesignmeaningIdan Gazit
 
Mobile ui trends present future – meaningful mobile typography
Mobile ui trends present future  – meaningful mobile typographyMobile ui trends present future  – meaningful mobile typography
Mobile ui trends present future – meaningful mobile typographyHalil Eren Çelik
 
Typography and Grid for Mobile Design
Typography and Grid for Mobile DesignTypography and Grid for Mobile Design
Typography and Grid for Mobile DesignSara Quinn
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroEduardo Shiota Yasuda
 
With Great Power, a lecture on web typography
With Great Power, a lecture on web typographyWith Great Power, a lecture on web typography
With Great Power, a lecture on web typographyErika Tarte
 
FITC Amsterdam 2015 - keynote-adobe - We are mutants
FITC Amsterdam 2015 -  keynote-adobe - We are mutantsFITC Amsterdam 2015 -  keynote-adobe - We are mutants
FITC Amsterdam 2015 - keynote-adobe - We are mutantsMichael Chaize
 
Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015Michael Chaize
 

Viewers also liked (20)

Web Audio Band - Playing with a band in your browser
Web Audio Band - Playing with a band in your browserWeb Audio Band - Playing with a band in your browser
Web Audio Band - Playing with a band in your browser
 
Mobile Web Design Code
Mobile Web Design CodeMobile Web Design Code
Mobile Web Design Code
 
Typography on the Web
Typography on the WebTypography on the Web
Typography on the Web
 
Building for People
Building for PeopleBuilding for People
Building for People
 
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScriptModular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Fake It While We Make It (Data-Driven Prototyping)
Fake It While We Make It (Data-Driven Prototyping)Fake It While We Make It (Data-Driven Prototyping)
Fake It While We Make It (Data-Driven Prototyping)
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerce
 
O Design e a Interface no mundo da Programação
O Design e a Interface no mundo da ProgramaçãoO Design e a Interface no mundo da Programação
O Design e a Interface no mundo da Programação
 
Datadesignmeaning
DatadesignmeaningDatadesignmeaning
Datadesignmeaning
 
Mobile ui trends present future – meaningful mobile typography
Mobile ui trends present future  – meaningful mobile typographyMobile ui trends present future  – meaningful mobile typography
Mobile ui trends present future – meaningful mobile typography
 
Typography and Grid for Mobile Design
Typography and Grid for Mobile DesignTypography and Grid for Mobile Design
Typography and Grid for Mobile Design
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
 
Web Typography Fundamentals
Web Typography FundamentalsWeb Typography Fundamentals
Web Typography Fundamentals
 
Type
TypeType
Type
 
With Great Power, a lecture on web typography
With Great Power, a lecture on web typographyWith Great Power, a lecture on web typography
With Great Power, a lecture on web typography
 
FITC Amsterdam 2015 - keynote-adobe - We are mutants
FITC Amsterdam 2015 -  keynote-adobe - We are mutantsFITC Amsterdam 2015 -  keynote-adobe - We are mutants
FITC Amsterdam 2015 - keynote-adobe - We are mutants
 
Typography on Web.
Typography on Web. Typography on Web.
Typography on Web.
 
Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015
 
Web Typography Now
Web Typography NowWeb Typography Now
Web Typography Now
 

Similar to CSS for Designers

bubblekitty styleguide mockup
bubblekitty styleguide mockupbubblekitty styleguide mockup
bubblekitty styleguide mockupKrysta Madewell
 
Veritas Creative - Agency of the Future.pdf
Veritas Creative - Agency of the Future.pdfVeritas Creative - Agency of the Future.pdf
Veritas Creative - Agency of the Future.pdfOmarDarwish45
 
Noe Realtor - Premium Brand Identity Design
Noe Realtor - Premium Brand Identity DesignNoe Realtor - Premium Brand Identity Design
Noe Realtor - Premium Brand Identity DesignJAVIER™
 
SEO in the Age of Entities: Using Schema.org for Findability
SEO in the Age of Entities: Using Schema.org for FindabilitySEO in the Age of Entities: Using Schema.org for Findability
SEO in the Age of Entities: Using Schema.org for FindabilityJonathon Colman
 
Social Media Lead Generator By My Social Media Pro
Social Media Lead Generator By My Social Media ProSocial Media Lead Generator By My Social Media Pro
Social Media Lead Generator By My Social Media Promysmpro
 
Slidestarter 16.9 blue_v1
Slidestarter 16.9 blue_v1Slidestarter 16.9 blue_v1
Slidestarter 16.9 blue_v1slidecrafter
 
Muir real estate2013
Muir real estate2013Muir real estate2013
Muir real estate2013Muir Design
 
Personal introduction
Personal introductionPersonal introduction
Personal introductionJose Sanchez
 
Engl313 project1 slidedoc2_format_documentdesignreadability
Engl313 project1 slidedoc2_format_documentdesignreadabilityEngl313 project1 slidedoc2_format_documentdesignreadability
Engl313 project1 slidedoc2_format_documentdesignreadabilityBarbara Ann
 
Ultimate Pitch Deck.pptx
Ultimate Pitch Deck.pptxUltimate Pitch Deck.pptx
Ultimate Pitch Deck.pptxSuyashiPurwar1
 
Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt
Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egyptBridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt
Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egyptfatohforex97
 
The Soft Side of Software Development / Devoxx 2019
The Soft Side of Software Development / Devoxx 2019The Soft Side of Software Development / Devoxx 2019
The Soft Side of Software Development / Devoxx 2019🎤 Hanno Embregts 🎸
 
Let's Sharpen Your Agile Ax, It's Story Splitting Time
Let's Sharpen Your Agile Ax, It's Story Splitting TimeLet's Sharpen Your Agile Ax, It's Story Splitting Time
Let's Sharpen Your Agile Ax, It's Story Splitting TimeExcella
 

Similar to CSS for Designers (20)

bubblekitty styleguide mockup
bubblekitty styleguide mockupbubblekitty styleguide mockup
bubblekitty styleguide mockup
 
Veritas Creative - Agency of the Future.pdf
Veritas Creative - Agency of the Future.pdfVeritas Creative - Agency of the Future.pdf
Veritas Creative - Agency of the Future.pdf
 
Noe Realtor - Premium Brand Identity Design
Noe Realtor - Premium Brand Identity DesignNoe Realtor - Premium Brand Identity Design
Noe Realtor - Premium Brand Identity Design
 
Code leader2
Code leader2Code leader2
Code leader2
 
SEO in the Age of Entities: Using Schema.org for Findability
SEO in the Age of Entities: Using Schema.org for FindabilitySEO in the Age of Entities: Using Schema.org for Findability
SEO in the Age of Entities: Using Schema.org for Findability
 
Social Media Lead Generator By My Social Media Pro
Social Media Lead Generator By My Social Media ProSocial Media Lead Generator By My Social Media Pro
Social Media Lead Generator By My Social Media Pro
 
Slidestarter 16.9 blue_v1
Slidestarter 16.9 blue_v1Slidestarter 16.9 blue_v1
Slidestarter 16.9 blue_v1
 
Muir real estate2013
Muir real estate2013Muir real estate2013
Muir real estate2013
 
Personal introduction
Personal introductionPersonal introduction
Personal introduction
 
Design Guidelines
Design GuidelinesDesign Guidelines
Design Guidelines
 
Pitch deck powerpoint
Pitch deck powerpointPitch deck powerpoint
Pitch deck powerpoint
 
Engl313 project1 slidedoc2_format_documentdesignreadability
Engl313 project1 slidedoc2_format_documentdesignreadabilityEngl313 project1 slidedoc2_format_documentdesignreadability
Engl313 project1 slidedoc2_format_documentdesignreadability
 
Design guidelines
Design guidelinesDesign guidelines
Design guidelines
 
Ultimate Pitch Deck.pptx
Ultimate Pitch Deck.pptxUltimate Pitch Deck.pptx
Ultimate Pitch Deck.pptx
 
Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt
Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egyptBridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt
Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt Bridge in egypt
 
The Soft Side of Software Development / Devoxx 2019
The Soft Side of Software Development / Devoxx 2019The Soft Side of Software Development / Devoxx 2019
The Soft Side of Software Development / Devoxx 2019
 
Presentation1
Presentation1Presentation1
Presentation1
 
Let's Sharpen Your Agile Ax, It's Story Splitting Time
Let's Sharpen Your Agile Ax, It's Story Splitting TimeLet's Sharpen Your Agile Ax, It's Story Splitting Time
Let's Sharpen Your Agile Ax, It's Story Splitting Time
 
Sharpen your Agile Axe by Brian Sjorber
Sharpen your Agile Axe by Brian SjorberSharpen your Agile Axe by Brian Sjorber
Sharpen your Agile Axe by Brian Sjorber
 
SWOT.pptx
SWOT.pptxSWOT.pptx
SWOT.pptx
 

More from Idan Gazit

Designers Make It Go to Eleven!
Designers Make It Go to Eleven!Designers Make It Go to Eleven!
Designers Make It Go to Eleven!Idan Gazit
 
CSS for Designers
CSS for DesignersCSS for Designers
CSS for DesignersIdan Gazit
 
CSS: selectors and the box model
CSS: selectors and the box modelCSS: selectors and the box model
CSS: selectors and the box modelIdan Gazit
 
CSS: selectors and the box model
CSS: selectors and the box modelCSS: selectors and the box model
CSS: selectors and the box modelIdan Gazit
 
Repeatable Deployments and Installations
Repeatable Deployments and InstallationsRepeatable Deployments and Installations
Repeatable Deployments and InstallationsIdan Gazit
 
An Introduction to Celery
An Introduction to CeleryAn Introduction to Celery
An Introduction to CeleryIdan Gazit
 
Django 1.1 Tour
Django 1.1 TourDjango 1.1 Tour
Django 1.1 TourIdan Gazit
 

More from Idan Gazit (9)

Designers Make It Go to Eleven!
Designers Make It Go to Eleven!Designers Make It Go to Eleven!
Designers Make It Go to Eleven!
 
CSS Extenders
CSS ExtendersCSS Extenders
CSS Extenders
 
CSS for Designers
CSS for DesignersCSS for Designers
CSS for Designers
 
CSS: selectors and the box model
CSS: selectors and the box modelCSS: selectors and the box model
CSS: selectors and the box model
 
CSS: selectors and the box model
CSS: selectors and the box modelCSS: selectors and the box model
CSS: selectors and the box model
 
Why Django
Why DjangoWhy Django
Why Django
 
Repeatable Deployments and Installations
Repeatable Deployments and InstallationsRepeatable Deployments and Installations
Repeatable Deployments and Installations
 
An Introduction to Celery
An Introduction to CeleryAn Introduction to Celery
An Introduction to Celery
 
Django 1.1 Tour
Django 1.1 TourDjango 1.1 Tour
Django 1.1 Tour
 

CSS for Designers