前端怎么学 怎么自学前端？
\u524d\u7aef\u600e\u4e48\u5b66\u4e60\uff1f\u524d\u7aef\u5f00\u53d1\u53ef\u4ee5\u81ea\u5b66\uff0c\u4e5f\u53ef\u4ee5\u9009\u62e9\u53e3\u7891\u597d\u3001\u4fe1\u8a89\u4f73\u7684\u673a\u6784\u5b66\u3002
\u4e92\u8054\u7f51\u7684\u53d1\u5c55\u5e26\u52a8\u4e86\u591a\u79cd\u884c\u4e1a\u7684\u53d1\u5c55\uff0cWeb\u524d\u7aef\u5728\u4e92\u8054\u7f51\u884c\u4e1a\u4e5f\u53d1\u6325\u7740\u8d8a\u6765\u8d8a\u91cd\u8981\u7684\u4f5c\u7528\u3002Web\u524d\u7aef\u5f00\u53d1\u4e0d\u4ec5\u5728\u5f62\u5f0f\u3001\u5185\u5bb9\u548c\u529f\u80fd\u4e0a\u4e5f\u6709\u4e86\u6781\u5927\u7684\u4e30\u5bcc\uff0c\u800c\u4e14\u5bf9\u524d\u7aef\u5f00\u53d1\u4eba\u5458\u7684\u8981\u6c42\u8d8a\u6765\u8d8a\u9ad8\u3002
web\u5168\u6808\u5de5\u7a0b\u5e085.0\u8bfe\u7a0b\u5b66\u4e60\u5185\u5bb9\u5305\u62ec\uff1a
\u2460\u8ba1\u7b97\u673a\u57fa\u7840\u4ee5\u53caPS\u57fa\u7840
\u2461\u524d\u7aef\u5f00\u53d1\u57fa\u7840\uff08HTML5\u5f00\u53d1\u3001JavaScript\u57fa\u7840\u5230\u9ad8\u7ea7\u3001jQuery\u7f51\u9875\u7279\u6548\u3001Bootstrap\u6846\u67b6\uff09
\u2462\u79fb\u52a8\u5f00\u53d1
\u2463\u524d\u7aef\u9ad8\u7ea7\u5f00\u53d1\uff08ECMAScript6\u3001Veu.js\u6846\u67b6\u5f00\u53d1\u3001webpack\u3001\u524d\u7aef\u9875\u9762\u4f18\u5316\u3001React\u6846\u67b6\u5f00\u53d1\u3001AngularJS 2.0\u6846\u67b6\u5f00\u53d1\u7b49\uff09
\u2464\u5c0f\u7a0b\u5e8f\u5f00\u53d1
\u2465\u5168\u6808\u5f00\u53d1\uff08MySQL\u6570\u636e\u5e93\u3001Python\u7f16\u7a0b\u8bed\u8a00\u3001Django\u6846\u67b6\u7b49\uff09
\u2466\u5c31\u4e1a\u62d3\u5c55\uff08\u7f51\u7ad9SEO\u4e0e\u524d\u7aef\u5b89\u5168\u6280\u672f\uff09
\u4e92\u8054\u7f51\u884c\u4e1a\u76ee\u524d\u8fd8\u662f\u6700\u70ed\u95e8\u7684\u884c\u4e1a\u4e4b\u4e00\uff0c\u5b66\u4e60IT\u6280\u80fd\u4e4b\u540e\u8db3\u591f\u4f18\u79c0\u662f\u6709\u673a\u4f1a\u8fdb\u5165\u817e\u8baf\u3001\u963f\u91cc\u3001\u7f51\u6613\u7b49\u4e92\u8054\u7f51\u5927\u5382\u9ad8\u85aa\u5c31\u4e1a\u7684\uff0c\u53d1\u5c55\u524d\u666f\u975e\u5e38\u597d\uff0c\u666e\u901a\u4eba\u4e5f\u53ef\u4ee5\u5b66\u4e60\u3002
\u60f3\u8981\u7cfb\u7edf\u5b66\u4e60\uff0c\u4f60\u53ef\u4ee5\u8003\u5bdf\u5bf9\u6bd4\u4e00\u4e0b\u5f00\u8bbe\u6709\u76f8\u5173\u4e13\u4e1a\u7684\u70ed\u95e8\u5b66\u6821\uff0c\u597d\u7684\u5b66\u6821\u62e5\u6709\u6839\u636e\u5f53\u4e0b\u4f01\u4e1a\u9700\u6c42\u81ea\u4e3b\u7814\u53d1\u8bfe\u7a0b\u7684\u80fd\u529b\uff0c\u80fd\u591f\u5728\u6821\u671f\u95f4\u53d6\u5f97\u5927\u4e13\u6216\u672c\u79d1\u5b66\u5386\uff0c\u4e2d\u535a\u8f6f\u4ef6\u5b66\u9662\u3001\u5357\u4eac\u8bfe\u5de5\u573a\u3001\u5357\u4eac\u5317\u5927\u9752\u9e1f\u7b49\u5f00\u8bbe\u76f8\u5173\u4e13\u4e1a\u7684\u5b66\u6821\u90fd\u662f\u4e0d\u9519\u7684\uff0c\u5efa\u8bae\u5b9e\u5730\u8003\u5bdf\u5bf9\u6bd4\u4e00\u4e0b\u3002
\u795d\u4f60\u5b66\u6709\u6240\u6210\uff0c\u671b\u91c7\u7eb3\u3002
\u81ea\u5b66\u65b9\u6cd5\uff1a
1\u3001\u4f5c\u4e3a\u4e00\u4e2a\u521d\u5b66\u8005\uff0c\u4f60\u5fc5\u987b\u660e\u786e\u7cfb\u7edf\u7684\u5b66\u4e60\u65b9\u6848\uff0c\u6211\u5efa\u8bae\u4e00\u5b9a\u6709\u4e00\u4e2a\u6307\u5bfc\u7684\u4eba\uff0c\u5168\u9760\u81ea\u5df1\u5b66\uff0c\u653e\u5f03\u7684\u51e0\u7387\u975e\u5e38\u5927\uff0c\u5728\u4f60\u5bf9\u4e8eweb\u524d\u7aef\u8fd8\u6ca1\u6709\u4efb\u4f55\u6982\u5ff5\u7684\u65f6\u5019\uff0c\u9700\u8981\u4e00\u4e2a\u4eba\u9886\u8fdb\u95e8\uff0c\u4e4b\u540e\u5c31\u90fd\u9760\u81ea\u5df1\u94bb\u7814\uff0c\u7b2c\u4e00\u6b65\u5c31\u662f\u786e\u5b9aweb\u524d\u7aef\u90fd\u9700\u8981\u54ea\u4e9b\u5185\u5bb9\uff0c\u5e76\u4e14\u5728\u591a\u5c11\u65f6\u95f4\u5185\u5b66\u5b8c\uff0c\u5efa\u8bae\u65f6\u95f46\u4e2a\u6708\u4fdd\u5e95\u3002
2\u3001\u89c6\u9891\u4e3a\u4e3b\uff0c\u4e66\u4e3a\u8f85\u3002\u5f88\u591a\u521d\u5b66\u8005\u5728\u5b66\u4e60\u524d\u7aef\u7684\u65f6\u5019\u975e\u5e38\u559c\u6b22\u53bb\u4e70\u4e66\uff0c\u4f46\u662f\u6700\u540e\u7684\u7ed3\u679c\u662f\u4ec0\u4e48\uff1f\u770b\u6765\u770b\u53bb\u4ec0\u4e48\u90fd\u4e0d\u4f1a\u5199\uff0c\u6240\u4ee5\u5728\u8fd9\u91cc\u7ed9\u5927\u5bb6\u63d0\u9192\uff0c\u4e66\u53ef\u4ee5\u770b\uff0c\u4f46\u662f\u662f\u5728\u5efa\u7acb\u4e8e\u4f60\u5df2\u7ecf\u5bf9\u4e8e\u67d0\u4e2a\u77e5\u8bc6\u70b9\u6709\u4e86\u5177\u4f53\u64cd\u4f5c\u7684\u6267\u884c\u540e\uff0c\u5728\u7528\u4e66\u53bb\u5de9\u56fa\u6982\u5ff5\uff0c\u8fd9\u6837\u66f4\u52a0\u5229\u4e8e\u4f60\u5bf9\u4e8e\u77e5\u8bc6\u7684\u7406\u89e3\u3002
3\u3001\u5bf9\u4e8e\u5b66\u4e60\u6280\u672f\u6765\u8bb2\uff0c\u638c\u63e1\u4e00\u4e2a\u5b66\u4e60\u65b9\u6cd5\u662f\u975e\u5e38\u91cd\u8981\u7684\uff0c\u5176\u5b9e\u5bf9\u4e8e\u5b66\u4e60web\u524d\u7aef\u6765\u8bb2\uff0c\u5b66\u4e60\u65b9\u6cd5\u786e\u5b9e\u5f88\u591a\u90fd\u662f\u76f8\u901a\u7684\uff0c\u4e00\u65e6\u5b66\u4e60\u65b9\u6cd5\u4e0d\u5bf9\uff0c\u53ef\u80fd\u5c31\u4f1a\u9020\u6210\u201c\u65b9\u6cd5\u4e0d\u5bf9\uff0c\u52aa\u529b\u767d\u8d39\u201d\u3002\u5176\u5b9e\u5173\u4e8e\u8fd9\u65b9\u9762\u8fd8\u662f\u5f88\u591a\u7684\uff0c\u6211\u5c31\u7b80\u5355\u8bf4\u4e2a\u4f8b\u5b50\uff0c\u6709\u7684\u4eba\u8fb9\u542c\u8bfe\u8fb9\u8ddf\u7740\u6572\u4ee3\u7801\uff0c\u8fd9\u6837\u5c31\u4e0d\u5bf9\uff0c\u542c\u8bfe\u7684\u65f6\u5019\u5c31\u4e13\u5fc3\u542c\uff0c\u505a\u9898\u7684\u65f6\u5019\u5c31\u4e13\u5fc3\u505a\u9898\uff0c\u8fd9\u90fd\u662f\u8fc7\u6765\u4eba\u7684\u7ecf\u9a8c\uff0c\u4e00\u5b9a\u8981\u542c\u3002\u6839\u636e\u6bcf\u4e2a\u4eba\u7684\u4e0d\u540c\uff0c\u53ef\u80fd\u5b66\u4e60\u65b9\u6cd5\u4e5f\u4f1a\u6709\u6240\u51fa\u8def\uff0c\u627e\u5230\u9002\u5408\u4f60\u81ea\u5df1\u7684\u5b66\u4e60\u6cd5\u65b9\u6cd5\u662f\u5b66\u4e60\u7684\u524d\u63d0\u3002
4\u3001\u4e0d\u5efa\u8bae\u81ea\u5df1\u4e00\u4e2a\u4eba\u778e\u5b66\uff0c\u5728\u6211\u4e86\u89e3\u5b66\u4e60\u7f16\u7a0b\u7684\u8fd9\u4e9b\u4eba\u6765\u770b\uff0c\u4ece\u96f6\u57fa\u7840\u5f00\u59cb\u5b66\u5e76\u4e14\u6700\u540e\u6210\u529f\u505a\u8fd9\u4efd\u5de5\u4f5c\u7684\u5176\u5b9e\u5e76\u6ca1\u6709\u51e0\u4e2a\uff0c\u6211\u89c9\u5f97\u5927\u90e8\u5206\u539f\u56e0\u5c31\u662f\u56e0\u4e3a\u4ed6\u4eec\u90fd\u4e0d\u4e86\u89e3web\u524d\u7aef\u662f\u5e72\u4ec0\u4e48\u7684\uff0c\u5b66\u4ec0\u4e48\u7684\uff0c\u5c31\u76f2\u76ee\u7684\u4e70\u4e66\u770b\uff0c\u5230\u5904\u627e\u89c6\u9891\u770b\uff0c\u6700\u540e\u770b\u7740\u770b\u7740\u5c31\u653e\u5f03\u4e86\uff0c\u6240\u4ee5\u6211\u5efa\u8bae\u521d\u5b66\u8005\u5728\u6ca1\u6709\u5177\u4f53\u6982\u5ff5\u4e4b\u524d\uff0c\u8fd8\u662f\u627e\u6709\u7ecf\u9a8c\u7684\u4eba\u8bf7\u6559\u4e00\u4e0b\uff0c\u804a\u8fc7\u4e4b\u540e\u4f60\u5c31\u4f1a\u77e5\u9053web\u524d\u7aef\u5177\u4f53\u662f\u5e72\u4ec0\u4e48\u7684\uff0c\u8be5\u600e\u4e48\u5b66\uff0c\u8fd9\u662f\u6211\u4e2a\u4eba\u7684\u5c0f\u5efa\u8bae\uff0c\u53ef\u4ee5\u4e0d\u91c7\u7eb3\u3002
\u81ea\u5b66\u8def\u7ebf\uff1a
\u7b2c1\u9636\u6bb5\uff1a\u524d\u7aef\u9875\u9762\u91cd\u6784(4\u5468)
\u5185\u5bb9\u5305\u542b\u4e86\uff1a(PC\u7aef\u7f51\u7ad9\u5e03\u5c40\u9879\u76ee\u3001HTML5+CSS3\u57fa\u7840\u9879\u76ee\u3001WebApp\u9875\u9762\u5e03\u5c40\u9879\u76ee)
\u7b2c2\u9636\u6bb5\uff1aJavaScript\u9ad8\u7ea7\u7a0b\u5e8f\u8bbe\u8ba1(5\u5468)
\u5185\u5bb9\u5305\u542b\uff1a(\u539f\u751fJavaScript\u4ea4\u4e92\u529f\u80fd\u5f00\u53d1\u9879\u76ee\u3001\u9762\u5411\u5bf9\u8c61\u8fdb\u9636\u4e0eES5/ES6\u5e94\u7528\u9879\u76ee\u3001JavaScript\u5de5\u5177\u5e93\u81ea\u4e3b\u7814\u53d1\u9879\u76ee)
\u7b2c3\u9636\u6bb5\uff1aPC\u7aef\u5168\u6808\u9879\u76ee\u5f00\u53d1(3\u5468)
\u5185\u5bb9\u5305\u542b\uff1a(jQuery\u7ecf\u5178\u4ea4\u4e92\u7279\u6548\u5f00\u53d1\u3001HTTP\u534f\u8bae\u3001Ajax\u8fdb\u9636\u4e0ePHP/JAVA\u5f00\u53d1\u9879\u76ee\u3001\u524d\u7aef\u5de5\u7a0b\u5316\u4e0e\u6a21\u5757\u5316\u5e94\u7528\u9879\u76ee\u3001PC\u7aef\u7f51\u7ad9\u5f00\u53d1\u9879\u76ee\u3001PC\u7aef\u7ba1\u7406\u4fe1\u606f\u7cfb\u7edf\u524d\u7aef\u5f00\u53d1\u9879\u76ee)
\u7b2c4\u9636\u6bb5\uff1a\u79fb\u52a8\u7aef\u9879\u76ee\u5f00\u53d1(6\u5468)
\u5185\u5bb9\u5305\u542b\uff1a(Touch\u7aef\u9879\u76ee\u3001\u5fae\u4fe1\u573a\u666f\u9879\u76ee\u3001\u5e94\u7528Angular+Ionic\u5f00\u53d1WebApp\u9879\u76ee\u3001\u5e94\u7528Vue.js\u5f00\u53d1WebApp\u9879\u76ee\u3001\u5e94\u7528React.js\u5f00\u53d1WebApp\u9879\u76ee)
\u7b2c5\u9636\u6bb5\uff1a\u6df7\u5408(Hybrid,ReactNative)\u5f00\u53d1(1\u5468)
\u5185\u5bb9\u5305\u542b\uff1a(\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u3001ReactNative\u3001\u5404\u7c7b\u6df7\u5408\u5e94\u7528\u5f00\u53d1)
\u7b2c6\u9636\u6bb5\uff1aNodeJS\u5168\u6808\u5f00\u53d1(1\u5468)
\u5185\u5bb9\u5305\u62ec\uff1a(WebApp\u540e\u7aef\u7cfb\u7edf\u5f00\u53d1\u3001\u4e00\u3001NodeJS\u57fa\u7840\u4e0eNodeJS\u6838\u5fc3\u6a21\u5757\u4e8c\u3001Express\u4e09\u3001noSQL\u6570\u636e\u5e93)
\u57fa\u7840\u4e66\u7c4d\uff1a
1\u3001\u300aHead First HTML\u4e0eCSS(\u7b2c2\u7248)\u300b\uff0c\u5165\u95e8\u771f\u7684\u662f\u7ecf\u5178\u4e66\u7c4d\uff0c\u624b\u628a\u624b\u6559\u5b66\uff0c\u4e30\u5bcc\u7684\u6848\u4f8b\u8ba9\u4f60\u4ece 0 \u5f00\u59cb\u5b66\u524d\u7aef\u3002
2\u3001\u300aCSS\u6743\u5a01\u6307\u5357(\u7b2c\u4e09\u7248)\u300b\uff0c\u8fd9\u672c\u4e66\u4f5c\u4e3a CSS \u7684\u7ecf\u5178\u8457\u4f5c\uff0c\u628a\u539f\u7406\u8bb2\u5f97\u975e\u5e38\u7684\u901a\u900f\uff0c\u9664\u4e86 w3c \u6807\u51c6\uff0c\u7b97\u6700\u6743\u5a01\u7684\u4e00\u672c\u4e86\uff0c\u6bd5\u7adf\u6743\u5a01\u6307\u5357\u3002
3\u3001\u300aCSS\u63ed\u79d8\u300b\u795e\u4e66\uff0c47 \u4e2a css \u6280\u5de7\u8ba9\u4f60\u5728\u9762\u5bf9\u5404\u79cd css \u95ee\u9898\u7684\u65f6\u5019\u6e38\u5203\u6709\u4f59\u3002\u662f css \u4e66\u7c4d\u4e2d\u8bc4\u5206\u6700\u9ad8\u7684\u4e86\uff0ccss \u8fdb\u9636\u5fc5\u5907\u3002
4\u3001\u300ajavascript\u8bed\u8a00\u7cbe\u7cb9\u300b\uff0c\u8fd9\u672c\u4e66\u53ef\u4ee5\u5728\u5165\u95e8\u4e4b\u524d\u4e86\u89e3\u4e00\u4e0b\u57fa\u672c\u8bed\u6cd5\uff0c\u4ee5\u53ca\u5728\u5b66\u4e60\u4e4b\u524d\u53ef\u4ee5\u4e86\u89e3\u4e0b JS \u91cc\u9762\u7684\u7cbe\u7cb9\u4ee5\u53ca\u7cdf\u7c95\uff0c\u867d\u7136\u8fd9\u672c\u4e66\u5f88\u8584\u5f88\u8584\uff0c\u4f46\u662f\u503c\u5f97\u53cd\u590d\u53bb\u8bfb\u7684\u4e00\u672c\u4e66\u3002
5\u3001\u300aJavaScript DOM\u7f16\u7a0b\u827a\u672f(\u7b2c2\u7248)\u300b\uff0c\u672c\u4e66\u5728\u7b80\u6d01\u660e\u5feb\u5730\u8bb2\u8ff0JavaScript\u548cDOM\u7684\u57fa\u672c\u77e5\u8bc6\u4e4b\u540e\uff0c\u901a\u8fc7\u51e0\u4e2a\u5b9e\u4f8b\u6f14\u793a\u4e86\u4e13\u4e1a\u6c34\u51c6\u7684\u7f51\u9875\u5f00\u53d1\u6280\u672f\uff0c\u900f\u5f7b\u9610\u8ff0\u4e86\u5e73\u7a33\u9000\u5316\u7b49\u4e00\u6279\u81f3\u5173\u91cd\u8981\u7684 JavaScript\u7f16\u7a0b\u539f\u5219\u548c\u6700\u4f73\u5b9e\u8df5\u3002
6\u3001\u300aJavaScript\u6743\u5a01\u6307\u5357\u300b\uff1a\u7280\u725b\u4e66\u662f\u6bcf\u4e2aFE\u90fd\u7ed5\u4e0d\u8fc7\u7684\u4e00\u672c\u4e66\uff0c\u53ef\u4ee5\u5148\u5927\u81f4\u901a\u8bfb\u51e0\u904d\uff0c\u4e5f\u53ef\u4ee5\u628a\u5176\u5f53\u4f5c\u5de5\u5177\u4e66\uff0c\u65f6\u65f6\u7ffb\u9605\u3002
\u89c6\u9891\u6559\u7a0b:
\u7f51\u9875\u94fe\u63a5
\u671b\u91c7\u7eb3~
前端开发是很多人转行IT互联网行业的选择，主要有自学和报班学习两种方式。自学对于有自己的学习计划，有毅力的人来说是可以的，但对于普通人来说报班是更好的选择。只要了解学习的体系，掌握正确的学习方法，学习起来并不难。来讲一下前端开发都要学哪些课程！
前端开发的主要学习内容：
基础： HTML+CSS页面搭建，CS核心和PC端页面开发，HTML5移动端页面开发
核心： web前端核心技术JavaScript，ecmasript，dom，ajax，json，正则，作用域，运动框架，核心算法，高级函数，插件封装。
高级： html5+高级JavaScript开发，大数据可视化，webapp交互接口，lbs定位，微信sdk，es6标准，高级算法，数据结构，插件封装。
框架： bootstrap、vue、react、angular、sass企业开发应用。
给你一些自学的建议：
1、做好心理准备
虽说前端学习起来相对简单，但是还是要做好吃苦的准备，坚定自己的信心。
2、准备好学习计划
这个主要就是要规划好自己的自学路线，要先学什么，再学什么，学习的重点是啥等等，然后从基础的开始学起，一步一个脚印地向前走。
3、多注意实践
学会知识后得会用，才是真正的掌握，建议你在学习的过程中，可以多找一些项目进行练手，提升实战能力。
互联网行业目前还是最热门的行业，学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的，发展前景非常好，普通人也可以学习。
想要系统学习，你可以考察对比一下开设有IT专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，建议实地考察对比一下。
祝你学有所成，望采纳。
请点击输入图片描述
前端最基础的就是HTML+CSS+Javascript。掌握了这三门技术就算入门前端了，但这仅仅是入门，简单的来说就是你可以切图了，也就是所谓的静态网页。现在前端开发的定义已经远远超过切图了。你还需要更加深入的学习其他的前端技术。
撇开具体细节来讲，前端相对于后端来说，前端就是直接摆在了用户面前，如果说后端面向的主要是业务逻辑，数据库，操作系统，那么前端面对的是用户交互和体验。不妨这么理解，为了提高用户的体验，我们需要使用CSS去做样式美化，需要使用JavaScript去做一些交互，同样为了提高用户的体验，我们还需要去做SEO优化，需要去考虑性能优化，去做脚本压缩，去做缓存控制，同时也为了我们自己开发方便，我们需要去学习使用一些自动化工具来解放我们的双手……
从一些简单的书籍入手，多进行些广而浅的学习，后进行精而深的学习，在有限的时间内，应尽可能多地掌握一些基本知识，然后更多地进行实践。 在学习中遇到了解决不了的问题，就去查，然后及时做记录，然后再回过头去实践，往复这样的过程，提升会很快。
1、一定要重视基础
首先建立第一条技能线：就是前端由html，css，js组成;然后将其细化为第二条线，html是由html4和html5组成;第三条线，css由css2和css3组成;第四条线，js由es5和es6构成。
接下来是框架方面的延伸：css方向有less，html方向有bootstrap，js方向有jquery库。
再往下延伸一层：html、css方向，有前端构建工具;js除了jq库之外，还有更全面的前端框架，react、angular、vue。
再往下细化：react是一个view层方案，为了让它能够全面解决前端需求，需要Redux、react-router等作为补充。
再往下：就需要打包发布工具，Webpack。
这些都是一个合格的前端工程师应该具备的能力。
2、学习要有深度和广度
以下都是或多或少要掌握的内容：
Web页面制作基础，掌握传统PC端网页布局和制作
UI网站设计，掌握页面设计和原型图设计
编程基础技术，利用js完成一些常见网页的特效开发
后端开发技术，了解Web服务器的工作原理，并可以简单搭建自己的应用程序服务器端;
移动互联网应用，掌握现在主流的页面制作技术，可以完成微网站的制作，并可以做到多设备兼容
前端是丰富多彩的，你可以融入其中，但不能只停留在这一块领域，你想要更好的发展，你必须多元化发展，比如做一个会JAVA后台的前端，做一个偏UI的前端，做一个很懂技术的产品经理，这些都将是你的优势，很多企业其实并不需要你会很高深的技术，很多项目其实也用不上多少高深的技术，很多时候，你能实现需求，能做出用户体验好的产品，能再特殊的阶段兼任某个岗位，能做一些别人做不了的事情，你的存在就更有价值!总之在技术上要抓住一个重点，也要发散自己的技术点，走更宽的路，同时技术人也要注重情商的提高。
3、一定要探索好的学习方式并持之以恒
现在前端开发已经不是学个css和js就可以上手的时代了。而许多同学却只会点Js，更多的人连Js基础都没有掌握，这样只想靠假简历上位，怎么可能呢?
在技术领域，有太多的东西会迅速的过时，如何能够在这个领域长期处于不败之地，那就一定要有好的学习方式并持之以恒，锻炼自己的学习能力不断的吸收新知识，突破自己，要记得，技术永远没有上限。
我们学习任何一门技术都得先从企业需求的角度来分析，到底这个市场需要怎样的前端开发人才，这样才有让我们这些开发从业者有机会去思考满足需求这个问题，进而才能正确地确立一个可行的职业发展方向，最后达到自己想要的目标。
与其他计算机主流技术所不同的是，Web前端所包含的知识模块很多，就目前而言，HTML、CSS、JS、DOM是目前前端技术最为基础也是最为主要的四大模块，但会随着实际需求而有所改变。
一名优秀的Web前端工程师，需要JavaScript语言基础扎实，具有良好的规范开发习惯；熟悉常用的设计模式，熟练使用Vue、Angular技术栈开发；能够熟练使用angular、vue、echarts、jquery、react等框架进行传统开发；要熟悉MVVM、MVC开发模式；熟悉前端工程化、自动化技术，可以根据需求配置Gulp文件及更改Webpack配置文件；熟练使用git版本管理工具。
此外，还要熟悉HTML5、CSS3的新特性，了解不同浏览器之间的差异，制作出的页面能够有很好的兼容性。
Web发展得很快，几乎每天都在变化！如果没有快速学习的能力，就跟不上 Web发展的步伐。作为前端工程师仅仅依靠今天的知识是无法适应未来的，必须不断提升自己，不断学习新技术、新模式。因此，不仅作为新人小白要努力学习，提高自己；就连已经入职三五的前端开发工程师，也需要不断学习，了解前端技术的变化，提高自己的技术技能。
前端入门简单，门槛低，非常适合零基础来学的。自学前端开发无人专业老师引导，遇到问题无法及时沟通解决，接收的信息较为零散，容易找错学习方向，导致学习效率低。建议零基础的你选择一家靠谱的学校，先打好基础，系统的学习，因为只有选择正确的学习方式方法才能到达预期目标。
绛旓細鑷鍓嶇鍏跺疄寰堣緵鑻︼紝闇瑕佹湁寮哄ぇ鐨勮嚜鍒跺姏鍜屽潥鎸佷笅鍘荤殑瀛︿範蹇冿紝骞朵笖鍋氬ソ璇︾粏鐨勫涔犺鍒掍弗鏍兼墽琛锛涘鏋滀綘鎯冲鍓嶇锛屼笅闈㈢殑瀛︿範璺嚎鎴栬瀵逛綘鏈夊府鍔┿傚墠绔畬鏁村涔犺矾绾 绗竴闃舵:HTML CSS:HTML杩涢樁銆丆SS杩涢樁銆乨iv css甯冨眬銆丠TML css鏁寸珯寮鍙戙侸avaScript鍩虹:Js鍩虹鏁欑▼銆乯s鍐呯疆瀵硅薄甯哥敤鏂规硶銆佸父瑙丏OM鏍戞搷浣滃ぇ鍏ㄣ...
绛旓細1銆佸埗瀹氳鍒 浣犻渶瑕佺煡閬撹嚜宸辩殑鐩爣锛屾垚涓轰竴涓渶浣鍓嶇寮鍙戜汉鍛樸傝瀹炵幇瀹冿紝浣犲繀椤诲埗瀹氫竴涓鍒掋傚鏋滀綘鏌ョ湅Twitter鎴栧伐浣滆亴浣嶏紝閫氬父锛屼綘浼氱湅鍒板皢鑷繁绉颁负鍓嶇寮鍙戜汉鍛橀渶瑕佺煡閬撲簡瑙10鍒20浠朵簨锛岃繖鏍蜂竴涓暱闀跨殑鍒楄〃锛屽疄鍦ㄦ槸澶崚璋簡銆備綘涓嶉渶瑕佺煡閬撴墍鏈夛紝鍏跺疄涔熶竴鏍峰彲浠ユ壘鍒板伐浣溿傛湁鏃讹紝鍗充娇鏄粡楠屼赴瀵岀殑寮鍙...
绛旓細1銆佸仛濂藉績鐞嗗噯澶 铏借鍓嶇瀛︿範璧锋潵鐩稿绠鍗曪紝浣嗘槸杩樻槸瑕佸仛濂藉悆鑻︾殑鍑嗗锛屽潥瀹氳嚜宸辩殑淇″績銆2銆佸噯澶囧ソ瀛︿範璁″垝 杩欎釜涓昏灏辨槸瑕佽鍒掑ソ鑷繁鐨勮嚜瀛﹁矾绾匡紝瑕佸厛瀛︿粈涔堬紝鍐嶅浠涔堬紝瀛︿範鐨勯噸鐐规槸鍟ョ瓑绛夛紝鐒跺悗浠庡熀纭鐨勫紑濮嬪璧凤紝涓姝ヤ竴涓剼鍗板湴鍚戝墠璧般3銆佸娉ㄦ剰瀹炶返 瀛︿細鐭ヨ瘑鍚庡緱浼氱敤锛屾墠鏄湡姝ｇ殑鎺屾彙锛屽缓璁綘...
绛旓細3銆佺郴缁熸у涔銆傚涔犳湁鍏惰寰嬪彲瀵伙紝闇瑕佷竴姝ヤ竴姝ョ敱娴呭叆娣卞紡瀛︿範銆傚湪瀛︿範鐞嗚鐭ヨ瘑鐨勫悓鏃讹紝浣犺繕闇瑕佹敞閲嶇Н绱浉搴旂殑椤圭洰鐮斿彂缁忛獙锛屽垏蹇屸滅溂楂樻墜浣庘濄備笅闈㈡帹鑽愬崈閿媁eb鍓嶇瀛︿範璺嚎锛屽彲浠ュ弬鑰冧竴涓嬶細绗竴闃舵锛氬墠绔〉闈㈤噸鏋勩備富瑕佸唴瀹瑰寘鎷琍C绔綉绔欏竷灞銆丠TML5+CSS3鍩虹銆乄ebApp椤甸潰甯冨眬銆傚瀹屾闃舵锛屽鍛樺彲鑳...
绛旓細鍓嶇涓昏璐熻矗瀹炵幇瑙嗚鍜屼氦浜掓晥鏋滐紝浠ュ強涓庢湇鍔″櫒閫氫俊锛屽畬鎴愪笟鍔￠昏緫銆傚叾鏍稿績浠峰煎湪浜庡鐢ㄦ埛浣撻獙鐨勮拷姹傘傚彲浠ユ寜濡備笅鎬濊矾瀛︿範绯荤粺瀛︿範锛氬熀纭鐭ヨ瘑锛1銆丠TMLCSS杩欓儴鍒嗗缓璁湪绾挎暀绋嬪涔狅紝杈瑰杈圭粌锛岃窡鐫灏忔祴璇曘備箣鍚庡彲浠ユā浠夸竴浜涚綉绔欏仛浜涢〉闈傚湪瀹炶返涓Н绱簡涓浜涚粡楠屽悗锛屽彲浠ョ郴缁熺殑璇讳竴涓ゆ湰涔︺2銆丣avascript瑕佸鐨...
绛旓細1銆佸浼欻TML HTML鏄綉椤靛唴瀹圭殑杞戒綋鍐呭灏辨槸缃戦〉鍒朵綔鑰呮斁鍦ㄩ〉闈笂鎯宠璁╃敤鎴锋祻瑙堢殑淇℃伅锛屽彲浠ュ寘鍚枃瀛椼佸浘鐗囥佽棰戠瓑銆傝鐔熺粌鎺屾彙div銆乼able銆乽l li 銆乸銆乻pan绛夎繖浜涙爣绛,杩欎簺閮芥槸鏈甯哥敤鐨勩2銆佸涔燙SS锛圕ascading Style Sheets锛夆旀牱寮忋備竴鑸湅鍒皐eb鍓嶇寮鍙戝伐绋嬪笀鐨勮姹傞噷闈,鏈変竴涓細浣跨敤csshtml 鎴栬 ...
绛旓細鎯宠鑷锛屼綘涓瀹氳闈欎笅蹇冩潵瀛︿範锛鍓嶇鐨勭煡璇嗙偣杩樻槸鎸哄鐨勩傜涓闃舵锛氭牳蹇冪煡璇嗙偣 • CSS3 2D銆3D 鍙樻崲• CSS3 animation 鍔ㄧ敾• H5C3 鐐叿椤甸潰寮鍙• Flex浼哥缉甯冨眬• 绉诲姩绔富娴侀傞厤鏂规• 甯歌绉诲姩绔牱寮忓吋瀹规柟妗• 棰勫鐞嗗櫒Less 绗簩闃舵锛氭牳蹇冪煡璇嗙偣...
绛旓細4銆乭5鐩稿叧api銆乧anvas銆乤jax銆佹暟鎹ā鎷熴乼ouch浜嬩欢銆乵ockjs銆傜啛缁冧娇鐢ㄦ墍瀛︾煡璇嗘潵瀹屾垚缃戠珯椤圭洰寮鍙戙傜涓夐樁娈碉細鏁版嵁搴撳拰妗嗘灦瀹炴垬 闃舵鐩爣锛1. 缁煎悎杩愮敤Web鍓嶇鎶鏈繘琛岄〉闈㈠竷灞涓庣編鍖栥2. 缁煎悎杩愮敤Web鍓嶇寮鍙戞鏋惰繘琛學eb绯荤粺寮鍙戙3. 鐔熺粌鎺屾彙Mysql銆丮ongodb鏁版嵁搴撶殑鍙戝紑銆4. 鐔熺粌鎺屾彙vue.js銆亀ebpack銆...
绛旓細1銆丠TML璇█ 鎺屾彙HTML鏄綉椤电殑鏍稿績锛屾槸涓绉嶅埗浣滀竾缁寸綉椤甸潰鐨勬爣鍑嗚瑷锛屾槸涓囩淮缃戞祻瑙堝櫒浣跨敤鐨勪竴绉嶈瑷锛屽畠娑堥櫎浜嗕笉鍚岃绠楁満涔嬮棿淇℃伅浜ゆ祦鐨勯殰纰嶃傚洜姝わ紝瀹冩槸缃戠粶涓婂簲鐢ㄦ渶涓哄箍娉涚殑璇█锛屼篃鏄瀯鎴愮綉椤垫枃妗ｇ殑涓昏璇█锛屽濂紿TML鏄垚涓篧eb寮鍙戜汉鍛樼殑鍩烘湰鏉′欢銆侶TML鏄竴绉嶆爣璁拌瑷锛岃兘澶熷疄鐜癢eb椤甸潰骞跺湪娴忚鍣ㄤ腑鏄剧ず...
绛旓細鍓嶇寮鍙戦渶瑕佸澶氫箙 鍋囧璇撮浂鍩虹瀛︿範锛岄偅涔堝墠绔紑鍙戜竴鑸涔犳椂闂村湪4-6涓湀宸﹀彸锛岃淇濊瘉姣忓ぉ閮藉涔狅紝姣忓ぉ鑺变笁鍥涗釜灏忔椂锛岄渶瑕佽姳鍗婂勾宸﹀彸鐨勬椂闂存墠鍙紱鍋囧鍙槸鍦ㄥ伐浣滃拰鍏朵粬瀛︿範涔嬩綑鏉瀛︿範鍓嶇鐨勮瘽鑺辫垂鐨勬椂闂村垯鏇翠箙銆傚墠绔紑鍙戝涔犲彲浠ュ垎涓轰簲涓樁娈点傜涓闃舵涓哄墠绔熀纭锛屽疄鐜板姩闈欐佺綉椤电殑寮鍙戙傜浜岄樁娈典负鍓嶇...
