Come on Baby! 你也可以成为Web开发工程师！——Web开发工程师完全成长指南

时间：2022-07-27 20:09:01 | 来源：网站运营

时间：2022-07-27 20:09:01 来源：网站运营

原文链接：The Practical Guide to Becoming a Professional Web Developer

作者：Bill Sourour

转载请提前沟通并注明出处！

这篇文章是教你如何成为一名专业Web开发工程师的养成指南。我从事Web开发的相关工作已经有20个年头了。在工作中我也很乐于帮助其他开发者。在接下来的内容里，我将告诉你想要成为一名Web开发者应该学些什么？怎么去学？在哪里学？（大多数是免费的资源）。最后我还会介绍如何获得开发的实践经验，以及最重要的一点——如何通过写代码赚到钱。

译者按：为了对初学者更加友好，我会将原文中的大多数链接替换成同类中文资源。

在我们正式开始之前有两点需要提醒的：

1.你完全可以跳过文中的部分内容。

不管你现在处于学习Web开发的那个阶段，这篇指南都会对你有所帮助。本篇教程的每个章节根据描述你掌握知识的进度命名。你可以直接跳到最符合你当前情况的部分开始读。不过作为一名初学者，或者只是才打算开始学习Web开发，还是从头开始阅读吧。

2.在你选定某个专业方向之前先把所有的都尝试一下。

赚钱不是最重要的，重要的是你需要热爱你的工作。但你不去尝试永远都不会知道自己喜欢什么。

在这篇教程中将会带你领略Web开发的各个领域，首先浅尝辄止，然后再帮你挑选你所感兴趣的方向。在一开始，你不需要精通任何技术，只需要了解一些皮毛然后就去看看别的。直到你找到了一个想要努力的方向，再进行深入的学习。

我已经决定要学习编程了。我也喜欢Web开发，但就是不知道可以从哪里开始。

我先得恭喜你做了一个明智的决定！下定决心的你其实已经迈出了一大步，学习Web开发非常刺激，当然有时候也会充满挫折。不过别担心，我这不就是来帮你的么？

你的首要任务是尽快地了解Web开发各个领域的基础知识（通常也统称“全栈”）。你需要掌握的知识会非常宽泛，但也都很基础。这些都只是为了帮助你寻找到你最喜欢的领域，同时掌握一些最基本的通用知识。这样在你决定专精某项知识之前，也能处理好各个方面的困难和挑战。

学习HTML基础

Hypertext Markup Language 超文本标记语言(HTML)用来控制描述现在你在浏览器里看到的网页的内容和布局。从这里开始，你将会了解到如何创建可以与之交互的 用户界面。在你掌握了更多的语言之后，现在的所学就会变得尤为重要。

我在下面列出了你需要掌握的有关HTML的基础知识（都是免费的在线教程，下列教程来自菜鸟教程）：

• 简介
• 元素
• 标题
• 段落
• 头部
• 列表
• 链接
• 图像
• 表格
• 表单
• 总结

我现在已经掌握了HTML基础

很棒！这是重要的第一步！现在你该学点基本的JavaScript啦~

学习JavaScript基础

JavaScript是专门针对Web的编程语言，所有的主流浏览器（Chrome, Firefox, Safari, IE等）都内置支持JavaScript语言。你之前使用过的所有网站和Web应用也都包含大量的JavaScript代码。并且现在的JavaScript语言已经扩展到了包括服务器端、桌面应用、物联网设备在内的各类平台。

不过这才刚刚开始，你只需要了解一些基础知识（以下链接来自廖雪峰JavaScript教程）：

• 快速入门
• 数据类型和变量
• 数组
• 对象
• 条件判断
• 循环
• 函数
• DOM浏览器对象
• 操作DOM
• JSON
• AJAX
• 变量作用域

我已经掌握了HTML和JavaScript基础

你真棒~接下来该收服CSS基础知识啦！

学习CSS基础

CSS 的全称是层叠样式表(Cascading Style Sheets)。CSS被用来定义你在HTML中编写的元素的外观。跟着MDN上的CSS入门教程学习基础知识，在这里学习如何用CSS对网页布局。

转向后端

HTML/JavaScript/CSS都是“Web前端开发”的相关知识。也就是说你目前掌握的语言基本都是在浏览器里运行的。是时候看看后端是什么样子的了。接下来我们将学习如何写在服务器上运行的代码。你并不需要买一台真正的服务器回来，你自己的电脑已经足够强大啦。

有非常多的后端的编程语言，不过既然你已经了解了JavaScript，我推荐你学习NodeJS.NodeJS是一项能够在服务器端运行JS代码的技术。

除此外，你还需要了解一下Express框架和MongoDB.

Express

Express是一个基于NodeJS的Web应用开发框架，用来更方便地同网页进行请求响应交互。

Mongo DB

Mongo DB是一个数据库。用来存储和访问数据。

在这里学习Node.js + Express + MongoDB教程。请放心，你并不需要完全精通Node或Mongo，只需要跟着教程让这个技术栈的应用跑起来就好了。

我需要在前端、后端和全栈之间做抉择。

在你确定你你已经理解了前后端的技术之后，就是时候做决定了。可如果你对之前所学还是一知半解，最好先返回去再了解一些相关的知识。（这就和玩游戏教学关卡通关之后选职业一个概念）

目前，你一共写了两种代码。一种用来和用户交互，另一种和数据交互。你更喜欢哪一种？

用户交互？那么你的选择是前端开发工程师！ 数据交互？那你的选择是后端开发工程师！ 都喜欢？恭喜你，你将选择成为一个全栈工程师！

哪个也没兴趣？也要祝贺你，通过之前的学习，你发现了其实Web开发并不适合你，你也不必在这上面浪费更多的时间和金钱了。还是不想放弃？也许你只是没找到自己喜欢的编程语言？在后面的“我想成为后端工程师”的章节里挑选你喜欢的语言吧！

我想成为全栈工程师！

很不错！看来你得把这篇文章完完整整地读完啦！你需要学习的包含前端和后端的所有知识。

我已经掌握了JavaScript/HTML/CSS基础，我想成为一名前端开发工程师。

想要成为一名合格的前端开发工程师，你需要熟练掌握HTML/CSS/客户端JavaScript.同时你也需要熟练使用一些开发框架。

在开始下面内容的学习之前，确保你已经掌握了HTML基础知识。

HTML进阶

• HTML5教程
• HTML和CSS高级指南

JavaScript进阶


为了让你更深入地了解JavaScrpit，我要推荐一个系列书籍，由Kyle Simpson撰写的《你不知道的JS》。而且整套书都在Github上开源免费！

• You-Dont-Know-JS on Github
• 你不知道的JavaScript（上卷）
• 你不知道的JavaScript（中卷）

除了这套书以外，MDN的JavaScript参考文档也会对你非常有用。

掌握了“前端三剑客”（HTML/CSS/JavaScript）固然很重要。但你想真的写出一些可以赚钱的代码，还需要熟悉一些框架。

学习jQuery

jQuery是史上最受欢迎的JS库。虽然一些新近的框架不再依赖jQuery，但假如你想尽快找到一份工作的话，掌握jQuery是十分有必要的。

我推荐你在FreeCodeCamp上学习jQuery。之后你可以在jQuery学习官网上了解更多的内容。

同时也不要忘了收藏jQueryAPI文档随时查阅。

学习主流JS框架

框架是为了帮助我们解决开发中经常会遇到的问题而开发出来的。JavaScript的框架数不胜数，我们来看看新近流行的一些JS框架，你也可以通过搜索引擎和招聘网站掌握各类框架的需求信息。

React

React是Facebook为了配合Flux架构开发的一款JS框架。主要用来构建用户界面。最近一段时间异常的火爆，已经远远甩开了AngularJS.所以你还在等什么：

• React 入门实例教程
• React 教程

Angular 1 & 2

Angular JS是Google推出的JS框架。刚推出的时候也是红极一时，Angular适用于开发中大型的Web应用。不过有一点恶心人的是，Google在计划推出Angular 2版本时，感觉他们有必要完全重写。结果就导致了1和2用起来感觉完全像是两个不同的框架。假如你想成为一个Angular专家，你就相当于要同时掌握两个框架。

• AngularJS 1 教程
• Angular 2 for TypeScript 中文手册

Vue.js

Vue.js的开发者是尤雨溪。大神也在玩本站袄。Vue.js是一个用来构筑用户界面的非常轻量的框架，使用非常方便，上手也会很快。并且真的很强大，不会有Angular那么臃肿，也不像React的JSX那么变态。所以我很推荐新手从学习Vue.js开始。

• Vue.js中文官网
• 一个简单的 vue.js 实践教程

学习Bootstrap

（译者）学习Bootstrap可以看我之前总结的这篇：

• 有关Bootstrap你想要知道的都在这里

当然Bootstrap也可以和之前所学的框架协同使用：

• React Bootstrap
• Angular Bootstrap

恭喜！掌握了上述内容之后，你已经是一名合格的前端开发工程师了。

我想成为一名后端开发工程师！

很不错的选择！首先你需要选择后端开发语言。可供选择的特别多，各有优劣。下图是一个编程语言受欢迎程度的排行榜。被框选起来的是Web开发中经常会用到的语言。


要是你完全是个新手，不要着急做决定，先了解一下这几种语言的特性和语法，最后挑选出你喜欢的。

要是你已经掌握了某种语言，那么就专注于它吧！

Java

Java是一门广受欢迎的跨平台语言。它由Oracle公司开发和维护。Java可以用来开发Android应用，桌面软件，当然也能用来开发Web应用（只用做后端，或者用JSP技术也可以开发前端）。Java语言健壮可靠，而且网上有着无数的学习Java的资源。同样也是在大学里广泛教授的面向对象编程语言。

• Java快速教程
• Java Tutorial for Complete Beginners

C#

C# 是微软为了对抗Java开发的编程语言。它在微软的平台上拥有良好的支持。它同样也是面向对象的，也不限于开发Web应用、桌面软件等。要是你忠于Windows的话，C#也许是个不错的选择。

• C# 教程
• Java 和 C# 最大的不同是什么？

Python

Python是最适合新手，最容易学习的编程语言。而且Python广受欢迎，可以被应用在各个领域。人生苦短，请用Python！

• Python 3教程

JavaScript

相信通过之前的学习你对JavaScript已经有所了解了。NodeJS的出现让JS在服务器端运行成为了可能。现在再深入了解一下吧！

• Node入门
• NODESCHOOL

Ruby

Ruby是一朵奇葩。爱它的人对它痴狂，它处在编程语言排行榜的前10名，但增长却非常缓慢。Ruby本身是一种介于函数式编程和命令是编程之间的语言。我推荐你尝试一下，兴许你会变成它的狂热粉丝呢。另外，近些年来Ruby语言的工作机会也有很多。

• 20分钟体验 Ruby

PHP

虽然近一段时间PHP看起来有点过气了。但是请不要忘记，PHP是全世界最好的语言。而且单就Web开发这一块来讲，全世界的网站有多一半是用PHP开发的。PHP7的推出极大地改善了其运行效率，Laravel框架也让编写PHP代码变得无比优雅。PHP不是原作者的菜，但译者最早学习的编程语言就是PHP，在这里也不想挑起语言之争，总之PHP值得你尝试着学习一下。

• PHP 教程

我已经学了很多Web开发的知识，但是缺乏实践经验。

没有任何经验的话是很难找到工作的。

第一步是试着完成一两个个人项目，来熟悉掌握开发流程。

在你的项目开发完毕后，试着在Github这类平台上发布会对你很有帮助。

Github

Github基于版本控制软件Git建立，是全球最大的开源项目托管网站。你可以在上面储存、管理、发布你的代码。Github是你作为一名开发者必须使用的网站。

• GotGitHub

开发个人项目

下面推荐一些你可以尝试的个人开发项目：

• 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用
• Laravel完成一个多用户的博客系统

FreeCodeCamp上面同样有着各种各样的实践项目，在这里推荐两个：

• 创建一个番茄钟计时器 （纯前端）
• 开发一个书籍分享网站 （全栈）

实践经验

接下来你需要一些真实的经验。这意味着你需要与他人协作，参与到真实的项目中来。个人项目自然有其用处，但在找工作时还不够有说服力。

1.为开源项目做贡献

Github上面有着成千上万的开源项目，这些项目中有着许多公开的bug等着你去提供修复。在你的简历中加上你为一些知名项目贡献代码的事迹，将会是你浓墨重彩的一笔。你可以通过Code Triage来关注你感兴趣的项目进展。

2.为你的家人或朋友“打工”

专门为你做生意的朋友或家人开发一款Web应用或者一个网站吧。为他们解决实际的问题，给他们提供帮助。不过在选人之前最好慎重考虑，最好这个人的需求可以在90天左右的时间开发完毕，而且你们俩的关系也最好是比较亲近的。不要因为开发中途的一些矛盾搞得你们最后连朋友都没得做。

3.为非盈利组织工作

这将会是一个非常棒的选择！为非盈利机构开发Web应用，解决他们的实际问题。你可以在Catch a Fire上找到这样的项目。另外，如果你通过了FreeCodeCamp的所有挑战，你也能够获得为非盈利机构开发Web项目的机会。

4.出卖劳动力

你可以在网上找一些外包项目来做，为了避免广告之嫌，译者在这里就不推荐国内的网站了，反正一搜一大把。

我现在已经积累了一些实践经验了，怎么才能找到工作呢？

写一份儿牛X闪闪的简历

• 一份优秀的前端开发工程师简历是怎么样的？
• 程序员简历应该怎么写？

开发一个在线简历网站

开发一个介绍你自己的个人站点！你可以把你之前做过的所有项目都链接到上面。说明各个项目都解决了什么样的实际问题。这会对你很有帮助！

准备好编程面试

• 前端面试题收集
• Python的面试题
• 一套完整的学习手册帮助自己准备 Google 的面试

掌握通用的面试技巧

• 面试70问 经典回答
• 程序员面试要准备哪些方面的内容？
• 修改面试前你都做了什么准备？

出发去找工作吧！

不要妄图一瞬间就找到你心仪的公司和喜爱的岗位。先找到一份可以写代码养活自己的工作再说。等到你积累了更多的经验，自然也就能迈出下一步了。

我想要成为一名自由职业者！

自己当自己的老板听起来是非常爽的。但事实上自由职业并不像想象的那么轻松。在这里推荐Brennan Dunn写了许多有关自由职业者的文章：

DoubleYourFreelancing.com

在外国的网站上注册成为自由职业者对大多数人来说有些不切实际，国内这一块发展也比较混乱，为了避免广告之嫌，译者也就不推荐链接了。

我朝着成为一名Web开发者的方向努力了，但我现在感觉力不从心。

我很理解你的心情。这本来就不是一件容易的事情，而且任何口口声声说着学Web开发很容易的人自己其实都不怎么样，要么就是想要骗你钱。假如你现在有些不知所措，那么重新思考一下这些问题：

不忘初心

问问你自己，你甚至可以写下来！你当初为什么要决定走上这条路？你的想法仍然没有改变么？那么为什么要停下来呢！？继续迎难而上吧！

脚踏实地

现在你已经考虑了很多，脑子里想到了最坏的结果，也期冀最好的愿景，还有现实中最可能发生的情况。你完全可以把这些想法都记录下来。没有必要畏惧，面对现实，脚踏实地地一步步走下去。


欢迎在评论区分享你的心得体会。

欢迎关注我的专栏 https://zhuanlan.zhihu.com/icode