SlideShare a Scribd company logo

關於網頁前端的兩三事

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 of 30
! " # 1
Front End Designer and Developer
$
! " # 2
ABOUT ME
#
%
! " # 3
ABOUT ME
1999
fishbecat@gmail.com
facebook.com/fishbecat
line id: fishbecat
x x
! " # 4
Front End ?
#
&
! " # 5
…
! " # 6
'START!
PSD to HTML table
PSD to HTML Div + CSS
Dreamweaver + Flash
HTML
CSS
ActionScript

jQuery
SKILL

Recommended

WordPress theme frameworks
WordPress theme frameworksWordPress theme frameworks
WordPress theme frameworksEddie Johnston
 
Taming the Global Site Migration Monster by Kate Dreyer
Taming the Global Site Migration Monster by Kate DreyerTaming the Global Site Migration Monster by Kate Dreyer
Taming the Global Site Migration Monster by Kate DreyerKateDreyer
 
Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphiacanarymason
 
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Campcanarymason
 
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010canarymason
 
Drupaldelphia Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap StuntsDrupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia Shortcuts Cheats And Cheap Stuntscanarymason
 
Mobile and Responsive Design with Sass
Mobile and Responsive Design with SassMobile and Responsive Design with Sass
Mobile and Responsive Design with Sassnyccamp
 

More Related Content

What's hot

Not just a pretty (type)face
Not just a pretty (type)faceNot just a pretty (type)face
Not just a pretty (type)faceClare Evans
 
Building a living styleguide using React & Styled-components
Building a living styleguide using React & Styled-componentsBuilding a living styleguide using React & Styled-components
Building a living styleguide using React & Styled-componentsVikram Ramanujam
 
SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory Hardy
SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory HardySenchaCon 2016: JavaScript is Great but Stop Writing It - Rory Hardy
SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory HardySencha
 
Daily agenda project 02 creating and editing a web page
Daily agenda project 02 creating and editing a web pageDaily agenda project 02 creating and editing a web page
Daily agenda project 02 creating and editing a web pageAngela Edel
 
OOCSS and SMACSS Case Study
OOCSS and SMACSS Case StudyOOCSS and SMACSS Case Study
OOCSS and SMACSS Case StudyKota Fujishiro
 
前端性能优化
前端性能优化前端性能优化
前端性能优化imbingdian
 
We Need to Talk About CSS
We Need to Talk About CSSWe Need to Talk About CSS
We Need to Talk About CSSSean Durham
 
Web Designer OR Developer
Web Designer OR Developer Web Designer OR Developer
Web Designer OR Developer Meenesh Jain
 
Convert your 2D image to 3D Screenshot Presentations, other Web Graphics
Convert your 2D image to 3D Screenshot Presentations, other Web GraphicsConvert your 2D image to 3D Screenshot Presentations, other Web Graphics
Convert your 2D image to 3D Screenshot Presentations, other Web Graphicsdigichix
 
10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elementsIn a Rocket
 
Double page research articles
Double page research articlesDouble page research articles
Double page research articles014420
 
Lecture7 web design and development
Lecture7 web design and developmentLecture7 web design and development
Lecture7 web design and developmentRafi Haidari
 

What's hot (17)

Not just a pretty (type)face
Not just a pretty (type)faceNot just a pretty (type)face
Not just a pretty (type)face
 
Building a living styleguide using React & Styled-components
Building a living styleguide using React & Styled-componentsBuilding a living styleguide using React & Styled-components
Building a living styleguide using React & Styled-components
 
Why Markdown?
Why Markdown?Why Markdown?
Why Markdown?
 
Css group
Css groupCss group
Css group
 
Css group
Css groupCss group
Css group
 
SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory Hardy
SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory HardySenchaCon 2016: JavaScript is Great but Stop Writing It - Rory Hardy
SenchaCon 2016: JavaScript is Great but Stop Writing It - Rory Hardy
 
HTML language
HTML languageHTML language
HTML language
 
Daily agenda project 02 creating and editing a web page
Daily agenda project 02 creating and editing a web pageDaily agenda project 02 creating and editing a web page
Daily agenda project 02 creating and editing a web page
 
OOCSS and SMACSS Case Study
OOCSS and SMACSS Case StudyOOCSS and SMACSS Case Study
OOCSS and SMACSS Case Study
 
前端性能优化
前端性能优化前端性能优化
前端性能优化
 
We Need to Talk About CSS
We Need to Talk About CSSWe Need to Talk About CSS
We Need to Talk About CSS
 
Web Designer OR Developer
Web Designer OR Developer Web Designer OR Developer
Web Designer OR Developer
 
Convert your 2D image to 3D Screenshot Presentations, other Web Graphics
Convert your 2D image to 3D Screenshot Presentations, other Web GraphicsConvert your 2D image to 3D Screenshot Presentations, other Web Graphics
Convert your 2D image to 3D Screenshot Presentations, other Web Graphics
 
10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements
 
Logo design
Logo designLogo design
Logo design
 
Double page research articles
Double page research articlesDouble page research articles
Double page research articles
 
Lecture7 web design and development
Lecture7 web design and developmentLecture7 web design and development
Lecture7 web design and development
 

Similar to 關於網頁前端的兩三事

Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Developmentmwrather
 
Breaking up with Microsoft Word
Breaking up with Microsoft WordBreaking up with Microsoft Word
Breaking up with Microsoft Wordcdelk
 
網頁程式設計
網頁程式設計網頁程式設計
網頁程式設計傳錡 蕭
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...SPTechCon
 
Web design for right-to-left languages
Web design for right-to-left languagesWeb design for right-to-left languages
Web design for right-to-left languagesLennart Schoors
 
APEX HROUG 2019 - Universal Theme: Tips and Tweaks
APEX HROUG 2019 - Universal Theme: Tips and TweaksAPEX HROUG 2019 - Universal Theme: Tips and Tweaks
APEX HROUG 2019 - Universal Theme: Tips and TweaksMarko Gorički
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the WildRich Quick
 
7 web design
7 web design7 web design
7 web designpranitag1
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Stepping into the front end: Part 1
Stepping into the front end: Part 1Stepping into the front end: Part 1
Stepping into the front end: Part 1Tahin Rahman
 
Responsive Web Design (done right)
Responsive Web Design (done right)Responsive Web Design (done right)
Responsive Web Design (done right)Sandro Paganotti
 
Frontend First Design & Development
Frontend First Design & DevelopmentFrontend First Design & Development
Frontend First Design & DevelopmentAdam Nemeth
 
Front end-design and best practices
Front end-design and best practicesFront end-design and best practices
Front end-design and best practicesMario Hernandez
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Introduction to-web-application-development-with-vaadin7
Introduction to-web-application-development-with-vaadin7Introduction to-web-application-development-with-vaadin7
Introduction to-web-application-development-with-vaadin7Johannes Eriksson
 

Similar to 關於網頁前端的兩三事 (20)

Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
Breaking up with Microsoft Word
Breaking up with Microsoft WordBreaking up with Microsoft Word
Breaking up with Microsoft Word
 
網頁程式設計
網頁程式設計網頁程式設計
網頁程式設計
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
 
Web design for right-to-left languages
Web design for right-to-left languagesWeb design for right-to-left languages
Web design for right-to-left languages
 
APEX HROUG 2019 - Universal Theme: Tips and Tweaks
APEX HROUG 2019 - Universal Theme: Tips and TweaksAPEX HROUG 2019 - Universal Theme: Tips and Tweaks
APEX HROUG 2019 - Universal Theme: Tips and Tweaks
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 
7 web design
7 web design7 web design
7 web design
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Stepping into the front end: Part 1
Stepping into the front end: Part 1Stepping into the front end: Part 1
Stepping into the front end: Part 1
 
Dario_DiFelice_Resume
Dario_DiFelice_ResumeDario_DiFelice_Resume
Dario_DiFelice_Resume
 
Responsive Web Design (done right)
Responsive Web Design (done right)Responsive Web Design (done right)
Responsive Web Design (done right)
 
Frontend First Design & Development
Frontend First Design & DevelopmentFrontend First Design & Development
Frontend First Design & Development
 
Look ma! No images!
Look ma! No images!Look ma! No images!
Look ma! No images!
 
Front end-design and best practices
Front end-design and best practicesFront end-design and best practices
Front end-design and best practices
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Introduction to-web-application-development-with-vaadin7
Introduction to-web-application-development-with-vaadin7Introduction to-web-application-development-with-vaadin7
Introduction to-web-application-development-with-vaadin7
 
Java script
Java scriptJava script
Java script
 

Recently uploaded

Task Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfTask Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfUla Academics
 
homescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamphomescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revampvidya934261
 
Cargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryCargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryDarshiniPatel16
 
Heathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfHeathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfLizShek
 
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdfAnavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdfanishdishis
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city JodhpurSreyaseeNath1
 
The Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignThe Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignAlbany Glass
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfLizShek
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptAr. TANIA BERA
 
VSST103 - Digital Portfolio.pdf character
VSST103 - Digital Portfolio.pdf characterVSST103 - Digital Portfolio.pdf character
VSST103 - Digital Portfolio.pdf characterschell
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdfSanjivanisShirodkar
 
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbvStoryboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv22nvatafu
 
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...JIT KUMAR GUPTA
 
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm22nvatafu
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfLizShek
 
Hill Area development- Issues and Options
Hill Area development- Issues and OptionsHill Area development- Issues and Options
Hill Area development- Issues and OptionsJIT KUMAR GUPTA
 
EXPLORING VARIOUS UI INTERACTION PATTERNS
EXPLORING VARIOUS UI INTERACTION PATTERNSEXPLORING VARIOUS UI INTERACTION PATTERNS
EXPLORING VARIOUS UI INTERACTION PATTERNSROHISIVAM
 
Interior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionInterior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionNityaSharma77
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--characterschell
 
Ergonomics - Chapter 3 - Workstation Facilities Design
Ergonomics - Chapter 3 - Workstation Facilities DesignErgonomics - Chapter 3 - Workstation Facilities Design
Ergonomics - Chapter 3 - Workstation Facilities DesignRienaMacapagal1
 

Recently uploaded (20)

Task Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfTask Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdf
 
homescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamphomescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamp
 
Cargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryCargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industry
 
Heathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfHeathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdf
 
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdfAnavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city Jodhpur
 
The Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignThe Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel Design
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdf
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
 
VSST103 - Digital Portfolio.pdf character
VSST103 - Digital Portfolio.pdf characterVSST103 - Digital Portfolio.pdf character
VSST103 - Digital Portfolio.pdf character
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdf
 
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbvStoryboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
 
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
 
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdf
 
Hill Area development- Issues and Options
Hill Area development- Issues and OptionsHill Area development- Issues and Options
Hill Area development- Issues and Options
 
EXPLORING VARIOUS UI INTERACTION PATTERNS
EXPLORING VARIOUS UI INTERACTION PATTERNSEXPLORING VARIOUS UI INTERACTION PATTERNS
EXPLORING VARIOUS UI INTERACTION PATTERNS
 
Interior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionInterior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features Extraction
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--character
 
Ergonomics - Chapter 3 - Workstation Facilities Design
Ergonomics - Chapter 3 - Workstation Facilities DesignErgonomics - Chapter 3 - Workstation Facilities Design
Ergonomics - Chapter 3 - Workstation Facilities Design
 

關於網頁前端的兩三事

  • 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
  • 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 … … …