Become a front-end developer

35,408 views
37,794 views

Published on

How one can start his career as a front-end developer? Is a "front-end" term current when Open Web evolves towards server-side and mobile?

Published in: Technology, Design
1 Comment
28 Likes
Statistics
Notes
No Downloads
Views
Total views
35,408
On SlideShare
0
From Embeds
0
Number of Embeds
26,512
Actions
Shares
0
Downloads
100
Comments
1
Likes
28
Embeds 0
No embeds

No notes for slide

Become a front-end developer

  1. 1. phone +48 696 185 029 mail contact@functionite.com twitter @functionitebecome a front-end developer
  2. 2. phone +48 696 185 029 mail contact@functionite.com twitter @functionitebecome a front-end developer
  3. 3. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plFunctionite founder, 24y
  4. 4. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plJavaScript programmer
  5. 5. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plJavaScript programmer
  6. 6. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plJavaScript programmer
  7. 7. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plJavaScript programmer
  8. 8. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plevent organizer
  9. 9. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plevent organizer
  10. 10. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plevent organizer
  11. 11. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plevent organizer
  12. 12. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plOpen Web activist
  13. 13. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plOpen Web activist
  14. 14. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plOpen Web activist
  15. 15. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plOpen Web activist
  16. 16. Damian WielgosikNokiaRocheferrante.plFront-TrendsSiteSelljavascript.plmeet.jsFalsy Values@varjsotwartasiec.plOpen Web activist
  17. 17. 2005’s front-end?
  18. 18. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  19. 19. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  20. 20. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  21. 21. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  22. 22. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  23. 23. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  24. 24. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  25. 25. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  26. 26. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  27. 27. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  28. 28. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  29. 29. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  30. 30. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  31. 31. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  32. 32. 2005’s front-end?tables vs divsajaxJS animationsdiscovering JavaScript animationsweb standardsIE6 problemxsltPrototype accessibilityusabilitymicroformatsdesign it! w3cPSD2HTML
  33. 33. 2013’s front-end?
  34. 34. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  35. 35. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  36. 36. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  37. 37. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  38. 38. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  39. 39. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  40. 40. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  41. 41. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  42. 42. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  43. 43. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  44. 44. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  45. 45. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  46. 46. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  47. 47. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  48. 48. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  49. 49. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  50. 50. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  51. 51. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  52. 52. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  53. 53. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  54. 54. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  55. 55. 2013’s front-end?HTML5 JavaScript engineeringMV* frameworkssassCSS3 animationssingle page web appsless node.jsweb sockets Web RTC video audionew HTML5 elements PhoneGapresponsive web design modular JSCSS3 shapes CSS3 gradientsweb fonts canvas webgl
  56. 56. front-end developers are not “these HTML guys” anymore
  57. 57. there are so many challenges for front-end people
  58. 58. time to be a real engineer, motherf*cker!
  59. 59. we write MVC applications
  60. 60. we have client-side template systems
  61. 61. we code server-side apps (node.js)
  62. 62. we have pdf readers in JavaScript
  63. 63. we write mobile apps and don’t need to know Java or ObjC
  64. 64. but that’s boring...
  65. 65. we can have databases in JavaScript (CouchDB)
  66. 66. we can have databases in JavaScript (CouchDB)
  67. 67. we can flywe can fly!
  68. 68. we can flywe can compile C++ to JS
  69. 69. btw. 3D is not a problem
  70. 70. and there is an increasing demand for JavaScript devs
  71. 71. and there is an increasing demand for JavaScript devs
  72. 72. sure, but what am I supposed to do as a JavaScript dev?
  73. 73. JavaScript Jobs
  74. 74. JavaScript Jobs
  75. 75. JavaScript Jobs
  76. 76. JavaScript Jobs
  77. 77. JavaScript Jobs
  78. 78. front-end developer can be a
  79. 79. front-end developer can be aUSABILITY SPECIALIST
  80. 80. front-end developer can be aUSABILITY SPECIALISTJAVASCRIPT DEVELOPER
  81. 81. front-end developer can be aUSABILITY SPECIALISTJAVASCRIPT DEVELOPERGAME DEVELOPER
  82. 82. front-end developer can be aUSABILITY SPECIALISTJAVASCRIPT DEVELOPERGAME DEVELOPERSERVER-SIDE GUY
  83. 83. front-end developer can be aUSABILITY SPECIALISTJAVASCRIPT DEVELOPERGAME DEVELOPERSERVER-SIDE GUYMOBILE DEVELOPER
  84. 84. front-end developer can be aUSABILITY SPECIALISTJAVASCRIPT DEVELOPERGAME DEVELOPERSERVER-SIDE GUYMOBILE DEVELOPERCOPTER DEVELOPER
  85. 85. front-end developer can be aUSABILITY SPECIALISTJAVASCRIPT DEVELOPERGAME DEVELOPERSERVER-SIDE GUYMOBILE DEVELOPERCOPTER DEVELOPERANIMATION SPECIALIST
  86. 86. front-end developer can be aUSABILITY SPECIALISTJAVASCRIPT DEVELOPERGAME DEVELOPERSERVER-SIDE GUYMOBILE DEVELOPERCOPTER DEVELOPERANIMATION SPECIALISTIMAGINATION NINJA
  87. 87. all you need to know is 3 things...
  88. 88. all you need to know is 3 things...CSS3
  89. 89. all you need to know is 3 things...CSS3JavaScript
  90. 90. all you need to know is 3 things...CSS3JavaScriptHTML5
  91. 91. they won’t have you buy things
  92. 92. they won’t have you buy thingstechnology is open and standarized
  93. 93. how can I start?
  94. 94. unfortunately universities suck at teaching web technologies
  95. 95. unfortunately universities suck at teaching web technologies
  96. 96. how many of you have been taught JAVA at Uni?
  97. 97. unfortunately universities suck at teaching web technologies
  98. 98. many of greatest minds I know in this industry nevergraduated...
  99. 99. however, many did...
  100. 100. university is just an optionit won’t make you happy, rich and creative
  101. 101. explore, make mistakes, learn
  102. 102. Read...
  103. 103. Read...html5doctor.com
  104. 104. Read...html5doctor.com20thingsilearned.com
  105. 105. Read...html5doctor.com20thingsilearned.comdiveintohtml5.info
  106. 106. Read...html5doctor.com20thingsilearned.comdiveintohtml5.infovarjs.com
  107. 107. Read...html5doctor.com20thingsilearned.comdiveintohtml5.infovarjs.comferrante.pl
  108. 108. Read...html5doctor.com20thingsilearned.comdiveintohtml5.infovarjs.comferrante.plpaulirish.com
  109. 109. Read...html5doctor.com20thingsilearned.comdiveintohtml5.infovarjs.comferrante.plpaulirish.comlea.verou.me
  110. 110. Read...html5doctor.com20thingsilearned.comdiveintohtml5.infovarjs.comferrante.plpaulirish.comlea.verou.mewebplatformdaily.org
  111. 111. Read...html5doctor.com20thingsilearned.comdiveintohtml5.infovarjs.comferrante.plpaulirish.comlea.verou.mewebplatformdaily.organd many others
  112. 112. Attend...
  113. 113. Attend...Front-Trends Conference (Warsaw, Poland)
  114. 114. Attend...Front-Trends Conference (Warsaw, Poland)Falsy Values (Warsaw, Poland)
  115. 115. Attend...Front-Trends Conference (Warsaw, Poland)Falsy Values (Warsaw, Poland)OnGameStart (Warsaw, Poland)
  116. 116. Attend...Front-Trends Conference (Warsaw, Poland)Falsy Values (Warsaw, Poland)OnGameStart (Warsaw, Poland)JSConf.EU (Berlin, Germany)
  117. 117. Attend...Front-Trends Conference (Warsaw, Poland)Falsy Values (Warsaw, Poland)OnGameStart (Warsaw, Poland)JSConf.EU (Berlin, Germany)Fronteers (Amsterdam, Netherlands)
  118. 118. Front-Trends 2013
  119. 119. Front-Trends 2013
  120. 120. Front-Trends 2013
  121. 121. or go to the meetups
  122. 122. in 2011 I originated free front-end meetups in Polandhttp://meetjs.pl
  123. 123. we started in one town...
  124. 124. now it takes place in 5 different towns
  125. 125. POZNAN
  126. 126. WARSAWPOZNAN
  127. 127. WARSAWPOZNANCRACOW
  128. 128. WARSAWPOZNANCRACOWWROCLAW
  129. 129. WARSAWPOZNANCRACOWWROCLAWGDANSK
  130. 130. we have organized a conference tooCracow 2012
  131. 131. we organized a free a conference too...
  132. 132. meet.js summit 2012
  133. 133. we have awesome community
  134. 134. front-end community@t@chriscoyier@zeldman@kurafire@paulirish@zbraniecki@janl@codepo8@getify@han @phae@jaffathecake@csswizardry@LeaVerou@slightlylate@awbjs@rwaldron@brendaneich@meyerweb@ppk@rem@estellevw
  135. 135. @you?@t@chriscoyier@zeldman@kurafire@paulirish@zbraniecki@janl@codepo8@getify@han @phae@jaffathecake@csswizardry@LeaVerou@slightlylate@awbjs@rwaldron@brendaneich@meyerweb@ppk@rem@estellevw
  136. 136. yeah, but show me money
  137. 137. so, how you started?
  138. 138. I was curious.
  139. 139. try to turn ideas into code
  140. 140. this is how I started
  141. 141. it took me months to code Drawter.com
  142. 142. it took me months to code Drawter.com
  143. 143. I was making mistakes like that
  144. 144. var element = document.getElementById("doc");element.onclick = function() {};
  145. 145. and that...
  146. 146. var arr = new Array();
  147. 147. but the outcome was satisfying so the project went public
  148. 148. the buzz was huge
  149. 149. the buzz was huge
  150. 150. then I got a job at one of the best Polish front-end teams.Drawter played a huge role on my CV even later
  151. 151. your projects are importantmore than your education
  152. 152. publish your project on gihub
  153. 153. if you feel confidentsend a link to your project to the one of major front-endwebsites
  154. 154. if you feel confidentsend a link to your project to the one of major front-endwebsites
  155. 155. actually, never feel uncertain about things you are involved in
  156. 156. I never did.
  157. 157. @dalmaer waits for new shiny projects to share with others
  158. 158. dailyjs.com waits for it
  159. 159. shashingmagazine.com waits for it
  160. 160. everybody wants it!
  161. 161. the outcome is most importantdo not reschedule things that are ready to go
  162. 162. if you are willing to improveyou’ll eventually learn right tools to get your job done better
  163. 163. people fail, do not lose your confidence due to a single failure
  164. 164. interview guys are not gods,dream job might not be “it”
  165. 165. there are so many devices you can code forthere are so many powerful APIs you can mix together
  166. 166. HTML5, JavaScript, CSS3try it.
  167. 167. Workshops with Functionite.comLearn something new!
  168. 168. JS News groupJS News: Jobs groupon Facebook
  169. 169. phone +48 696 185 029 mail contact@functionite.com twitter @functionitethanks, Damian Wielgosik

×