2018 年 Web 开发者路线图:最全的教程、资源和在线课程

adaildc 1年前
   <p>编者按:WEB开发是一个非常热门的职业。该工作的技术性很强, 它需要你必须不停地提高、不断地加强, 才不会被别人比下去, 才能保住饭碗。看了以下文章,希望对你提高技能能有一些帮助。本文编译自Brandon Morelli在Medium上发表的文章The 2018 Web Developer Roadmap。</p>    <p>想学习代码?没有比现在更好的时候了。 下面是一个关于在2018年如何成为一名网络(Web)开发人员的路线图。不要让这些图片吓倒你。 要想成为一位优秀的开发人员,你并不需要了解该图上的所有内容。 事实上,如果你不愿意,你甚至不需要认真对待他们。 从另一个角度来说,你可以使用这些图片作为出发点,来帮助和指导你的学习。</p>    <p>你可以从这里开始,选择通往前端或后端的发展方向。 无论你做出何种选择,对应该学习哪些内容,我们有以下八条建议(黄色文字部分)。</p>    <p><img src="https://simg.open-open.com/show/a7a07da7ec9639d5ed60508124abf07a.jpg"></p>    <p>注: 该图片由Kamranahmedse创建,并以CC BY4.0许可证的形式发布到GitHub上。本文增加了资源/链接部分。</p>    <p>前后端都适用的基础部分</p>    <ul>     <li> <p>Git — <a href="/misc/goto?guid=4959757219936784001" rel="nofollow,noindex"> <strong>你昨天就应该学习Git了,15分钟学会使用Git</strong> </a></p> </li>     <li> <p><a href="/misc/goto?guid=4959757220026233862" rel="nofollow,noindex"><strong>SSH</strong> </a></p> </li>     <li> <p><a href="/misc/goto?guid=4959757220107795167" rel="nofollow,noindex"><strong>HTTP</strong> </a> <strong>/</strong> <a href="/misc/goto?guid=4959757220180005514" rel="nofollow,noindex"> <strong>HTTPS</strong> </a></p> </li>     <li> <p>使用Terminal — <a href="/misc/goto?guid=4959757220261592499" rel="nofollow,noindex"> <strong>Basic Mac OS</strong> </a> <strong>,</strong> <a href="/misc/goto?guid=4959757220341214873" rel="nofollow,noindex"> <strong>Basic Windows</strong> </a></p> </li>     <li> <p><a href="https://www.udemy.com/learning-data-structures-in-javascript-from-scratch/?siteID=EXclnL5BfX4-MMU53w.CPMvL1RkNfreHDw&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex"><strong>数据结构与算法</strong> </a></p> </li>     <li> <p><a href="/misc/goto?guid=4959757220511640262" rel="nofollow,noindex"><strong>字符编码</strong> </a></p> </li>     <li> <p>GitHub — <a href="/misc/goto?guid=4959757220589178223" rel="nofollow,noindex"> <strong>为你的第一个Github做出贡献的分步指导</strong> </a></p> <p> </p> <p> </p> <p> </p> </li>    </ul>    <p>1. 学习前端的路径及课程</p>    <p>专注于黄框部分,然后再做进一步延伸。 在图片下方,是一些帮助你学会这些技能的资源。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/d3d8f967351320ce72ead05f2fe2f0d1.jpg"></p>    <h3><a href="https://www.udemy.com/the-web-developer-bootcamp/?siteID=EXclnL5BfX4-cLkM6oT5lvfSQhIIxuwbnA&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">网站开发训练营</a></h3>    <p>你需要学习基础知识,要为掌握Web开发原则奠定坚实的基础。 有很多方法可以达到这一点,但在我看来,Web开发培训营是 <strong>最好</strong> 也是 <strong>最简单</strong> 的方法。</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/5f52dd09ef93601e4ae70e9c1fe58e6f.jpg"></p>    <h3><a href="https://www.udemy.com/the-advanced-web-developer-bootcamp/?siteID=EXclnL5BfX4-_AZvhSvruMR2rMKkPU7ALg&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">高级Web开发训练营</a></h3>    <p>现在你已经有了第一次训练营的经验,知道如何完整地构建Web应用程序。接下来,我们可以进行更深入一步的学习了。高级Web开发训练营介绍了更复杂的、可用于构建漂亮,响应式的Web应用程序,框架和工具。</p>    <h3>HTML / CSS</h3>    <ul>     <li> <p><a href="https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/?siteID=EXclnL5BfX4-3_7VXZDZ1s9UKBsEgjYOmw&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">用 HTML5 和 CSS3来构建用于现实世界的真正网页</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/f8fdea04265bbcdbdcb160e1c93335fc.jpg"></p>    <ul>     <li> <p><a href="https://www.udemy.com/csscasts-css-libraries-plugins-tips-tricks-for-developers/?siteID=EXclnL5BfX4-RN7flmwusAe_iMY5eD7v1g&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">CSS专辑: 资料库,插件,提示和技巧</a></p> <p> </p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/66c723e388095cab64423aa532d63b0a.jpg"></p>    <ul>     <li> <p><a href="https://www.udemy.com/bootstrap-4-from-scratch-with-5-projects/?siteID=EXclnL5BfX4-nltHNWmlzavXmsKQf3V0WA&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex"> 从头至尾手把手教你用Bootstrap 4搭建5个项目</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/4bc958bcada2af4fc0b190e3e7503469.jpg"></p>    <h3>JavaScript初学者</h3>    <ul>     <li> <p><a href="https://www.udemy.com/the-complete-javascript-course/?siteID=EXclnL5BfX4-ufuS9MCxhN3qkv6vyektRQ&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">用JavaScript 做一个实际项目的完整教程</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/cef999315c403fdd0ebea719d52f3865.jpg"></p>    <h3>高级 JavaScript</h3>    <p><a href="https://www.udemy.com/advanced-javascript-course/?siteID=EXclnL5BfX4-SxTAoVQndhYJNMXfr2.49Q&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">从初级到高级 JavaScript指导 & ES6 — ES2017</a></p>    <p><img src="https://simg.open-open.com/show/2fc0113d133dfcb9b0d52c924bb26b23.jpg"></p>    <h3>React JS</h3>    <ul>     <li> <p><a href="https://www.udemy.com/react-redux/?siteID=EXclnL5BfX4-CaWOpxtK2sbe8zyrThzdTQ&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">现代 React 及 Redux</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/031e2a4f8fb6688f8c30ee5635f6dbcb.jpg"></p>    <ul>     <li> <p><a href="https://www.udemy.com/react-redux-tutorial/?siteID=EXclnL5BfX4-INAUEa14KSwZDQT0h6zHeQ&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">高级 React 及 Redux</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/f11d12883ca71993423129e96e980ab8.jpg"></p>    <h3>Angular JS</h3>    <ul>     <li> <p><a href="https://www.udemy.com/the-complete-guide-to-angular-2/?siteID=EXclnL5BfX4-ta7ZyePYuUGiM7d1WA5MhQ&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">Angular 5 (以前的 Angular 2) — 完整指导</a></p> <p> </p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/a1d7f586497615c9a7a209d3a6658ffb.jpg"></p>    <ul>     <li> <p><a href="https://www.udemy.com/the-complete-angular-master-class/?siteID=EXclnL5BfX4-plK7dwx7IMtGK66yps5htA&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">Angular 4完整教程: 初级到高级</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/239275e1cd09d19d56479241cba34635.jpg"></p>    <h3>Vue JS</h3>    <ul>     <li> <p><a href="https://www.udemy.com/vuejs-2-the-complete-guide/?siteID=EXclnL5BfX4-erqqbws8ldBysv6KBjTcXQ&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">Vue JS 2 完整教程</a></p> </li>    </ul>    <p> </p>    <p><img src="https://simg.open-open.com/show/f0cf4708b8b1ca010f1780fefe5ff7f1.jpg"></p>    <ul>     <li> <p><a href="https://www.udemy.com/vuejs-2-essentials/?siteID=EXclnL5BfX4-GIWirxjT4ejK8HBcyTZHfQ&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">Vue JS 2 终极开发课程 | Udemy</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/959c9aea9bf36fa3172bee145621996e.jpg"></p>    <p> </p>    <p>2. 后端</p>    <p>专注于黄框部分,然后再作进一步延伸。 在图片下方,是一些帮助你学会这些技能的资源。</p>    <p><img src="https://simg.open-open.com/show/85d497d89488a354ae0e5fd4b66a5ba9.jpg"></p>    <h3>Node JS</h3>    <ul>     <li> <p><a href="/misc/goto?guid=4959757221706782592" rel="nofollow,noindex">Node.js 完整开发教程(第二版)</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/5999b55776c3018cc35bf485e662bc48.jpg"></p>    <p><a href="/misc/goto?guid=4959757221796586153" rel="nofollow,noindex">Node 与 React: 全栈网络开发教程| Udemy</a></p>    <p><img src="https://simg.open-open.com/show/3f37c3f31c847c9a20a2335588c38bae.jpg"></p>    <h3>Ruby</h3>    <ul>     <li> <p>学习 <a href="/misc/goto?guid=4959757221869668367" rel="nofollow,noindex">Ruby</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/2290761f18ee2070d23ca987eb31947f.jpg"></p>    <h3>Python</h3>    <ul>     <li> <p><a href="/misc/goto?guid=4959757221970194898" rel="nofollow,noindex">The Python Bible™ |Python里你所要用到的全部知识</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/9d4dbb68971f6d877a6062135bbca7da.jpg"></p>    <ul>     <li> <p><a href="/misc/goto?guid=4959757222044087479" rel="nofollow,noindex">用 Flask 与 Python搭建REST APIs</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/f8f83adfb538d609aa65ba5a86a1687f.jpg"></p>    <h3>PHP</h3>    <ul>     <li> <p><a href="https://www.udemy.com/php-for-complete-beginners-includes-msql-object-oriented/?siteID=EXclnL5BfX4-2BByHXvZRvTwqqq1_D4Q9Q&LSNPUBID=EXclnL5BfX4" rel="nofollow,noindex">适合PHP 初学者— 成为一名PHP 大师 — CMS 项目</a></p> </li>    </ul>    <p> </p>    <p><img src="https://simg.open-open.com/show/1da21cba25021eeab48ca503e4ebcfcd.jpg"></p>    <h3>Java</h3>    <ul>     <li> <p><a href="/misc/goto?guid=4959757222204671408" rel="nofollow,noindex">完整 Java Masterclass</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/341c0f39502e87721fc209dad77cc44f.jpg"></p>    <h3>MySQL</h3>    <ul>     <li> <p><a href="/misc/goto?guid=4959757222285185654" rel="nofollow,noindex">MySQL终极训练营: 从 SQL 初学者到专家</a></p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/f1d1c0041f7118f8a0b41ae36b3d5b44.jpg"></p>    <p>结束语</p>    <p>现在是结束本文的时候了......祝你的网络开发之旅进展顺利!当然,这不会很容易,但通过遵循本指南,你离实现目标的征程将更近了一步。</p>    <p> </p>    <p>来自:http://36kr.com/p/5120748.html</p>    <p> </p>