This document contains information about a front end designer and developer including their skills and experience. It outlines the candidate's skills in HTML, CSS, front end frameworks, preprocessors, libraries and more. It also lists examples of projects they have worked on including converting PSD to HTML and responsive web design. The document aims to showcase the candidate's front end skills and qualifications for front end related positions.

1. ! " # 1
Front End Designer and Developer
$

2. ! " # 2
ABOUT ME
#
%

3. ! " # 3
ABOUT ME
1999
fishbecat@gmail.com
facebook.com/fishbecat
line id: fishbecat
x x

4. ! " # 4
Front End ?
#
&

5. ! " # 5
…

6. ! " # 6
'START!
PSD to HTML table
PSD to HTML Div + CSS
Dreamweaver + Flash
HTML
CSS
ActionScript
jQuery
SKILL

7. ! " # 7
(
PHP ASP.net Java ROR…
Responsive Web Design
Front End Framework Bootstrap Foundation
SASS SCSS LESS + Compass
JS Library jQuery D3.js tree.js

8. ! " # 8

9. ! " # 9
-
Front End Designer
Front End Developer
(
PM
)
Back End Developer
*&
Graphic Designer

10. ! " #
+
Responsive
%
Creative
10
-
Mockups01
02
03
04
05
06
07
08

11. ! " # 11
FE SKILLS ?
#
,

12. ! " # 12
…
…

13. ! " # 13
HTML SKILLS ?
# HTML
,

14. ! " # 14
HTML ?
HTML
html
head
body

15. ! " # 15
HTML !
doctype
lang
charset
title
viewport
apple icon
css
i.e. hack
content
javascript

16. ! " # 16
HTML …

17. ! " # 17
HTML
article
section
header
footer
nav
aside
h1-h6
li
p
div
div
div
div
div
div
…
table
table
table
…

18. ! " # 18
HTML

19. $ FishSaut - 2015 ®! " # 19
BREAK . 15 min
-

20. ! " # 20
CSS SKILLS ?
# CSS
,

21. ! " # 21
CSS SKILL
Box-Model
…
box-sizing: border-box;

22. ! " # 22
CSS SKILL
Block vs Inline vs Void
Block: Box-Model h1-h6, ul, li, p, div…
Inline: Line-height a, label, span…
Void: Html img, br, hr, input…
display: block;
display: inline;
display: inline-block;
…

23. ! " # 23
CSS SKILL
Normal flow vs Float

24. ! " # 24
CSS SKILL
Position

25. ! " # 25
…
reset.css / normalize.css
clearfix
html5shiv.js / modernizr.js

26. ! " # 26
FE SKILL!
# …
/

27. ! " # 27
FE SKILL
OOCSS, SMACSS
Front End Framework (Bootstrap
CSS Preprocessor LESS / SASS / SCSS
CSS3 animation
JS Library jQuery / D3.js / Three.js
JS Framework Angular JS / Backbone.js / Ember.js

28. ! " # 28
FE SKILL
Git
Open API
SEO
Page Speed
Back End ex.PHP… view
Node.js
…

29. ! " # 29
FE SKILL
Front End
…
… …

30. 30
THANKS
Q & A