web.g.cs

by Sergei Garcia

通过谢尔盖·加西亚(Sergei Garcia)

我没有CS学位而从零开始成为Web开发人员的旅程(以及从中学到的东西) (My journey to becoming a web developer from scratch without a CS degree (and what I learned from it))

First, let me introduce myself. My name is Sergei Garcia, and I’m a full-time front end developer with 2 years experience. In that time, I’ve worked as a front-end developer for both a Forbes 500 consulting firm and a small company.

首先，让我自我介绍。 我叫Sergei Garcia，我是一位有2年经验的全职前端开发人员。 那时，我曾在《福布斯》 500强咨询公司和一家小公司担任前端开发人员。

This may not sound like a lot of experience, but finishing my second year as a developer has been a huge milestone for me. This is because I had no real experience doing web development — and not much programming experience in general beyond some basic C# and Java training I got from a few online courses. I also didn’t have a computer science degree since I graduated with a degree in IT project management.

这听起来似乎不是很多经验，但是完成我作为开发人员的第二年对我来说是一个巨大的里程碑。 这是因为我没有进行Web开发的真正经验，而且除了从一些在线课程获得的一些基本C＃和Java培训之外，没有太多的编程经验。 自从获得IT项目管理学位以来，我也没有计算机科学学位。

I’d never written about my experience despite all the help I’ve received from wonderful resources like Medium, Stack Overflow, and Reddit’s programming subreddits. So today, I decided to change that. Today I’m going to fill you in on what went right, and what didn’t, so that if you’re embarking on this journey, you’ll have better luck than I did.

尽管我从诸如Medium，Stack Overflow和Reddit的编程subreddits之类的出色资源获得了所有帮助，但我从未写过自己的经历。 所以今天，我决定改变这一点。 今天，我将向您介绍什么是对的，什么不是对的，这样，如果您正踏上这一旅程，那将比我有更好的运气。

I know that there are a lot of articles like this, but not very many of them discuss the process with the benefit of an extra two years of hindsight.

我知道有很多这样的文章，但是受益于额外的两年后见之明，很少有文章讨论该过程。

I’ll start off with my journey, including what went wrong along the way. If you just care about what my suggestions for the shortest possible route to becoming a web developer from scratch are, feel free to skip to the last section: The shortest route.

我将从旅程开始，包括一路走来的错误。 如果您只是在乎我对从头开始成为Web开发人员的最短路径的建议，请随时跳到最后一部分： 最短的路径 。

So, without any further ado, Let’s get started!

因此，事不宜迟，让我们开始吧！

入门基础 (Getting the Basics)

After deciding I wanted to get into web development the first question on my mind was “What do I learn?” After doing some research, I ended up making my learning path based on what most entry-level web developer positions asked for, which was:

在决定要进入Web开发之后，我想到的第一个问题是“我学到什么？” 经过研究后，我最终根据大多数入门级Web开发人员的职位要求进行了学习，即：

• JavaScriptJavaScript
• HTML & CSSHTML和CSS
• CSS Preprocessors (Less & Sass)CSS预处理器(Less＆Sass)
• Responsive Design响应式设计
• AngularJSAngularJS
• Design Patterns设计模式
• Git吉特
• NodeJS节点JS
• Task Runners任务执行者

Here’s how it went.

这是怎么回事。

Java脚本 (Javascript)

I began my Journey learning JavaScript through CodeSchool (paid) and Codecademy (free). If you don’t know about these, they’re great websites that allow you to learn to code by coding inside the browser.

我开始通过CodeSchool学习JavaScript (付费)和Codecademy (自由)。 如果您不了解这些，它们就是很棒的网站，使您可以通过在浏览器内进行编码来学习编码。

I found learning resources like this were the best when you are just getting started. Just be advised that this method of learning gets tiring quickly once you get into more advanced stuff, since their algorithms for checking whether you solved the code example correctly have some accuracy issues. Both of their introductory courses to JavaScript were outstanding and I highly recommend them.

当您刚入门时，我发现这样的学习资源是最好的。 请注意，一旦接触到更高级的知识，这种学习方法很快就会很累人，因为它们用于检查您是否正确解决了代码示例的算法存在一些准确性问题。 他们JavaScript入门课程都很出色，我强烈推荐他们。

Once I got the basics out of the way, I proceeded to get a stronger JavaScript foundation by reading the Eloquent Javascript: A Modern Introduction to Programming book by Haverbeke (free).

一旦掌握了基础知识，就可以阅读Haverbeke撰写的《 雄辩的Javascript：现代编程入门》一书，从而建立更强大JavaScript基础(免费)。

This book was recommended to me by a lot of people in the JavaScript forums as a must read, and for good reason. That book was tough — especially if you’re just learning programming like I was back then. But I’m glad I didn’t give up and kept at it. It was phenomenal due to the vast scope of programming concepts it covers, even if it was a bit ruthless at times. Whatever you do, don’t skip the code challenges. Once you finish this book, then you can finally say with confidence that you have a good grasp on JavaScript.

这是JavaScript论坛上很多人向我推荐的一本必读书籍，这是有充分理由的。 那本书很难-特别是如果您像我那时一样只是在学习编程时。 但是我很高兴我没有放弃并坚持下去。 这是惊人的，因为它涵盖了广泛的编程概念，即使有时有些无情。 无论您做什么，都不要跳过代码挑战。 读完本书后，您最终可以自信地说您对JavaScript有很好的了解。

You can also optionally learn jQuery (though I really don’t recommend learning it yet — more on this later). You can learn it through CodeSchool’s Try jQuery course.

您也可以选择学习jQuery(尽管我真的不建议您学习jQuery，稍后再介绍)。 您可以通过CodeSchool的Try jQuery课程来学习它。

HTML和CSS (HTML & CSS)

After learning JavaScript, I proceeded to learn the fundamentals of HTML & CSS and web design through CodeSchool’s HTML & CSS learning path. These courses are still my favorites today, since the pacing is great, and the overall scope of what they cover allowed me to acquire a stronger foundation to this.

学习完JavaScript之后，我通过CodeSchool的HTML＆CSS学习路径学习了HTML＆CSS和Web设计的基础知识 。 这些课程今天仍然是我的最爱，因为步调很棒，而且涵盖的总体范围使我对此有了更坚实的基础。

You could also switch this out easily for something like Codecademy’s HTML & CSS course and still get similar results. Or if you are up for a challenge, Udacity’s course Intro to HTML and CSS is far more complete, and slightly more challenging.

您也可以轻松地将其切换为Codecademy的HTML和CSS课程之类的内容，并且仍然可以获得类似的结果。 或者，如果您要挑战，Udacity的HTML和CSS入门课程将更加完善，并且更具挑战性。

Bonus: If you can get your hands on Jon Duckett’s HTML and CSS: Design and Build Websites book, it’s also a rock solid starting point for learning HTML & CSS (with a sprinkle of web design). It’s highly rated (4.7/5 on Amazon), offers a solid introduction to the world of web development. It’s a beautiful book thanks to it’s clean design with big letters and colorful pages. I often come back to it just to admire it.

奖励 ：如果您可以使用Jon Duckett的HTML和CSS：设计和构建网站 本书，也是学习HTML和CSS(带有大量网页设计)的坚实基础。 它得到了很高的评价(在亚马逊上为4.7 / 5)，为Web开发世界提供了扎实的介绍。 这本是一本美丽的书，这要归功于它采用大字母和彩色页面的简洁设计。 我经常回到这里只是为了欣赏它。

少/无礼 (Less / Sass)

For those unfamiliar, Less & Sass are CSS transpilers that allow you to write CSS in a more elegant manner. This lets you do things that aren’t normally supported, like nesting CSS rules. Once finished, these CSS transpilers “compile” your code and convert it to normal CSS.

对于那些不熟悉的人，Less＆Sass是CSS转译器，可让您以更优雅的方式编写CSS。 这样，您就可以执行通常不支持的操作，例如嵌套CSS规则。 完成后，这些CSS编译器将“编译”您的代码并将其转换为普通CSS。

There are 2 major CSS transpilers right now: Less and Sass. Sass is the more popular one, but I found learning Less first to be easier, mainly because using Sass on your computer requires also installing Ruby, which I wasn’t fond of.

目前有2个主要CSS编译器： Less和Sass 。 Sass是比较流行的，但是我发现学习Less first会更容易，这主要是因为在您的计算机上使用Sass还需要安装Ruby，这是我不喜欢的。

You can get a quick, yet complete overview of Less using WinLess’s Online Less Compiler and it’s code examples to see how your Less code would turn into CSS. You can also try Sass online using SassMeister (though this doesn’t include code examples).

您可以使用WinLess的Online Less Compiler快速，完整地了解Less，并通过代码示例了解Less代码如何转换为CSS。 您也可以使用SassMeister在线尝试Sass(尽管其中不包括代码示例)。

It doesn’t matter whether you learn Less or Sass first. They’re extremely similar, so once you know one, you pretty much know the other. You can find a great quick comparison between Less and Sass on Shelby Moulden’s article Comparison between LESS & SASS.

无论您是先学习Less还是Sass都没关系。 它们非常相似，所以一旦您知道其中一个，便几乎知道另一个。 您可以在Shelby Moulden的文章LESS和SASS之间的比较中找到Less和Sass之间的快速比较。

响应式设计 (Responsive Design)

I originally learned about responsive design and Bootstrap using Codeschool’s HTML & CSS path, but I recently found Udacity’s course by Google on Responsive Web Design Fundamentals to be fantastic at covering the basics and beyond in a far more complete manner than Codeschool did.

我最初是使用CodeschoolHTML和CSS路径学习响应式设计和Bootstrap的，但是最近我发现Google提供的Udacity的“ 响应式Web设计基础知识”课程比Codeschool更加完美，可以很好地涵盖基础知识和其他内容。

You can do responsive design without any additional framework, but it’s far easier with the help of a responsive framework like Bootstrap. Bootstrap’s official documentation is very well made so you should have no problem at getting started with it.

您可以在没有任何其他框架的情况下进行响应式设计，但是借助诸如Bootstrap之类的响应式框架可以轻松得多。 Bootstrap的官方文档制作精良，因此开始使用它应该没有问题。

If you are having trouble grasping it’s basic principles, read Froont’s blog post on 9 basic principles of responsive web design. It has beautiful clean & simple animations that help illustrate visually the principles of responsive web design.

如果您在掌握基本原理时遇到困难，请阅读Froont的博客文章，其中介绍了自适应Web设计的9个基本原理 。 它具有精美简洁的动画，有助于直观地说明自适应网页设计的原理。

AngularJS (AngularJS)

I didn’t really know what exactly AngularJS was back then, but I knew everyone was talking about it, and that if I wanted to become a web developer I needed to learn it. I found Google Developer’s Design Decisions in AngularJS to provide the best general overview of what AngularJS was and how it improved making web applications.

我当时真的不知道AngularJS到底是什么，但是我知道每个人都在谈论它，如果我想成为一名Web开发人员，我需要学习它。 我在AngularJS中找到了Google Developer的设计决策，以最好地概述AngularJS是什么以及它如何改进Web应用程序的制作。

I first thought of learning AngularJS through their official documentation, but this turned out to be a terrible idea. The documentation wasn’t very easy on beginners, and the cluttered formatting made it hard to read and understand.

我首先想到了通过官方文档来学习AngularJS，但这真是一个糟糕的主意。 对于初学者来说，文档不是很容易，而且格式混乱，难以阅读和理解。

I then proceeded to learn AngularJS through Codeschool. With my positive experience on the JavaScript and CSS courses also from there, I expected nothing less than a great course. I was wrong. The course was a disaster from the get go, since the algorithm used to check if you got the code example right sometimes didn’t work right and marked your clearly right solution as incorrect. There were even times where all it took to fix the broken validation system was a page refresh. As for the course’s content, it wasn’t great either. It did an ok job at explaining the basic components of an AngularJS application, but it did a terrible job at integrating these into a real application, leaving me with far more questions than I started with.

然后，我开始通过Codeschool学习AngularJS。 凭借从那里获得JavaScript和CSS课程的积极经验，我期望这是一门很棒的课程。 我错了。 当然，这是一门灾难，因为用于检查代码示例是否正确的算法有时无法正常工作，并且将正确的解决方案标记为不正确。 有时甚至需要修复页面刷新来修复损坏的验证系统。 至于课程的内容，也不是很好。 它在解释AngularJS应用程序的基本组件方面做得很好，但是在将它们集成到实际应用程序中却做得很糟糕，给我留下的问题比开始时要多得多。

After some searching around forums, I stumbled upon Egghead.io (free / paid) where I had much better luck. Their course material was a lot cleaner, more concise, and more complete, making for a far better experience. Not to mention that apart from their courses, they have bite-sized 2–5 minute lessons that cover important topics. (For example: What is a controller? What is a filter? What is $scope?) These make it really easy to understand the basics. They also have some videos that require payment, but they are usually the ones covering more advanced angular topics you will not need until later on. I took their AngularJS Fundamentals course and I was fully satisfied with the results (and also became a big fan of Egghead.io’s courses in the process).

在论坛上进行了一些搜索之后，我偶然发现了Egghead.io (免费/付费)，我的运气更好。 他们的课程资料更加简洁，简洁和完整，从而带来了更好的体验。 更不用说，除了他们的课程外，他们还有2至5分钟的小课程，涵盖了重要主题。 (例如：什么是控制器？什么是过滤器？什么是$ scope？)这些使您很容易理解基础知识。 他们也有一些需要付费的视频，但通常都是涵盖了更高级的角度主题的视频，您稍后才需要。 我参加了他们的AngularJS基础课程，并且对结果完全满意(并且在此过程中也非常喜欢Egghead.io的课程)。

设计模式 (Design Patterns)

Design patterns are basically reusable code solutions that can be repeatedly used to solve common software problems. Having a foundation on this will make you far more competitive software developer in any programming language. This will also make it easier for you to understand other people’s code, since you’ll quickly identify what design pattern they used on their code to better understand it.

设计模式基本上是可重用的代码解决方案，可以重复使用以解决常见的软件问题。 在此基础上，将使您在任何编程语言中都更具竞争力。 这也将使您更容易理解其他人的代码，因为您将快速确定他们在他们的代码上使用了哪种设计模式以更好地理解它。

I found the 2 best sources to learn this are doFactory’s JavaScript Design Patterns and Addy Osmani’s Learning JavaScript Design Patterns. I found doFactory a lot easier to understand, while Addy Osmani’s book was a lot more complete.

我找到了学习这方面的2个最佳资源，它们是doFactory的JavaScript设计模式和Addy Osmani的Learning JavaScript设计模式 。 我发现doFactory更加容易理解，而Addy Osmani的书却更加完整。

Chrome DevTools (Chrome DevTools)

Chrome is one of the most powerful tools for a web developer. The sooner you master it, the more time you can save later on. Codeschool’s free course Explore and Master Chrome DevTools does a great job at introducing them.

Chrome是网络开发人员最强大的工具之一。 越早掌握它，以后可以节省的时间就越多。 Codeschool的免费课程Explore and Master Chrome DevTools在介绍它们方面做得很好。

Git(版本控制) (Git (Version Control))

Ah, Git — the tool I never knew I needed until I discovered what it could do. Git basically it lets you keep a track of the changes you make to your code so that if things go wrong, you can roll back to a previous point in time. It also lets you see your code’s history.

啊，Git –在我发现它可以做什么之前，我从来不知道需要的工具。 Git基本上可以让您跟踪对代码所做的更改，以便在出现问题时可以回滚到上一个时间点。 它还可以让您查看代码的历史记录。

I found CodeSchool’s free Try Github course to be a friendly way to get started. Atlassian’s Git training was superb at covering the more advanced commands available. Codeschool’s Git Learning Path is also great at covering Git’s fundamentals.

我发现CodeSchool的免费Try Github课程是入门的友好方式。 Atlassian的Git培训在涵盖可用的更高级命令方面非常出色。 Codeschool的Git学习路径也很擅长介绍Git的基础知识。

节点JS (NodeJS)

It didn’t take long before I learned that having a basic understanding of NodeJS would help me greatly in my quest of becoming a web developer (more on this soon).

不久之后，我了解到对NodeJS的基本了解将极大地帮助我成为一名Web开发人员(稍后将对此进行详细介绍)。

I tried Codeschool’s courses on Node, but I found them really lacking in content. I found NodeSchool.io to be a far better teacher at getting the basics right, and it was fun! I loved the hands-on approach it offered, which was similar to Codeschool and Codecademy — with the added improvement that I was really running NodeJS.

我在Node上尝试了Codeschool的课程，但发现它们确实缺乏内容。 我发现NodeSchool.io是正确掌握基础知识的更好的老师，这很有趣！ 我喜欢它提供的动手方法，该方法与Codeschool和Codecademy相似，但有了额外的改进，我才真正运行NodeJS。

任务赛跑者(Grunt＆Gulp) (Task Runners (Grunt & Gulp))

Grunt and Gulp were quite a big surprise to me in that I had no idea tools like that even existed — but I’m extremely glad they do! Basically, these task runners allow you to automate common tasks. For example, remember Less/Sass? Normally you would have to manually run the CSS compiler every time you make an edit for it to compile the CSS, and then update the browser. Using a task runner, you can set it up to watch your Less/Sass files for changes, and when it detects a change, compile your CSS, and automatically refresh the browser. This is immensely useful at reducing your development time.

Grunt和Gulp对我来说是一个很大的惊喜，因为我什至都没有这样的想法工具，但是我很高兴他们做到了！ 基本上，这些任务运行器使您可以自动化常见任务。 例如，还记得少/无礼吗？ 通常，每次对其进行编辑以编译CSS，然后更新浏览器时，都必须手动运行CSS编译器。 使用任务运行程序，您可以对其进行设置，以查看Less / Sass文件中的更改，并在检测到更改时编译CSS并自动刷新浏览器。 这对于减少开发时间非常有用。

There are 2 main task runners right now: Grunt and Gulp. While they do the exact same thing, they work in very different ways, with Grunt being a lot more verbose and configuration oriented, and Gulp being shorter to write and preferring code over configuration.

现在有2个主要任务执行者：Grunt和Gulp。 尽管它们做的完全相同，但是它们的工作方式却大不相同，其中Grunt更加冗长且面向配置，而Gulp的编写更短，并且比配置更喜欢代码。

Knowing NodeJS will help you write better Grunt and Gulp files since both of them run on NodeJS. You can pick whichever you want, but I found Gulp to be far easier to learn and write. I still today prefer it because of its minimalist — yet powerful — pipe-based approach.

了解NodeJS可以帮助您编写更好的Grunt和Gulp文件，因为它们都可以在NodeJS上运行 。 您可以选择任意一个，但是我发现Gulp易于学习和编写。 今天，我仍然喜欢它，因为它基于管道的方法极简(但功能强大)。

I found Scotch.io’s courses on Grunt and Gulp to be among the best out there.

我发现Scotch.io关于Grunt和Gulp的课程是最好的课程之一。

我在第一份工作中面临的挑战 (Challenges I faced on my first job)

Once I covered the fundamentals of web development, I was ready for my first web development interview for an entry level position. I won’t go into details about the interview since this isn’t this article’s main focus. But I will say that I was told my relatively strong JavaScript knowledge help me secure the position. (Thanks, Eloquent JavaScript!)

讲完Web开发的基础知识之后，我就可以为入门级职位进行第一次Web开发面试了。 因为这不是本文的重点，所以我不会详细介绍采访内容。 但是我会说，我被告知我相对较强JavaScript知识有助于我巩固自己的位置。 (感谢，出色JavaScript！)

I have to say, I was quite nervous on my first project. It involved making reusable web components with HTML, CSS and JavaScript, along with Bootstrap, Sass, Grunt as tooling. T

我不得不说，我对第一个项目感到非常紧张。 它涉及使用HTML，CSS和JavaScript以及Bootstrap，Sass，Grunt作为工具来制作可重用的Web组件。 Ť

he two biggest mistakes I found at first were:

我最初发现的两个最大错误是：

1. Fear of failure. Because I was the new guy, I was constantly in fear of my code being wrong or poorly made, so I spent a lot of time double-checking everything and adhered to coding best practices. Because of this, I rarely attempted solutions in creative new ways because of my fear that it might not work correctly at the end. This effectively shut down my drive to learn new things.

   害怕失败。 因为我是新手，所以我一直担心自己的代码错误或制作不当，所以我花了很多时间仔细检查所有内容，并坚持编写最佳实践。 因此，由于担心最后可能无法正常工作，我很少尝试以创新的方式尝试解决方案。 这有效地阻止了我学习新事物的动力。

2. Doing things because “X” person who knows better than me said so. I did this a lot at first. While not completely wrong, doing things in a certain way only because “X” expert on the matter said so — without knowing why — lead to me not really knowing when to why things were done the way they were. I soon learned that there were exceptions to everything, and that you always should know the reason behind best practices.

   做事是因为“ X”比我更了解。 一开始我做了很多。 尽管不是完全错误，但以某种方式做事只是因为对此事的“ X”专家这么说-不知道为什么-导致我并不真正知道何时以这种方式做事。 我很快了解到，凡事都有例外，并且您始终应该了解最佳实践背后的原因。

Thankfully, I had an understanding team lead during my first project who helped me overcome these issues. He constantly motivated me to try new things, even if things went wrong sometimes. He also told me to question everything — even his teachings.

值得庆幸的是，在我的第一个项目中，我有一个理解团队的领导者帮助我克服了这些问题。 他不断激励我尝试新事物，即使有时出错。 他还告诉我要质疑所有事情，甚至是他的教question。

In time, I learnt my lesson. From then on, I’ve always been a person that looks forward to trying new things. I always try to understand why best practices exist, when they’re right, and when they don’t apply to a situation.

随着时间的流逝，我学到了教训。 从那时起，我一直是一个渴望尝试新事物的人。 我总是试图理解为什么存在最佳实践，何时正确，何时不适用于特定情况。

Using AngularJS in an actual project also posed quite a big challenge for me. This was mainly because a lot of the things I did with it, I did without fully understanding why they happened. I thought of it as “angular magic.”

在实际项目中使用AngularJS对我来说也构成了很大的挑战。 这主要是因为我使用它所做的许多事情，而我却没有完全理解它们为什么会发生。 我认为它是“角魔”。

There were many times that I wished I knew how Angular actually worked, but it was scary looking at the documentation.

我希望有很多次我希望知道Angular的实际工作原理，但是看文档却很恐怖。

I eventually stumbled upon an amazing book called Build Your Own AngularJS. I didn’t read all of it, but reading the section on Scopes and Watchers and how they worked really unveiled how the magic behind angular, wasn’t really magic. It was just a clever way of maintaining data-binding using dirty checking and nested scopes. I highly recommend this book to anyone seeking to fully understand AngularJS.

我最终偶然发现了一本令人称奇的书，名为Build Your Own AngularJS 。 我没有阅读所有内容，但是阅读了“示波器和观察器”部分以及它们的工作原理，这真正揭示了“角度”背后的魔力并不是真正的魔力。 这只是使用脏检查和嵌套作用域维护数据绑定的一种聪明方法。 我强烈建议所有想要完全了解AngularJS的人使用这本书。

The other challenge I faced a year later was how fast web development progressed. I had just mastered AngularJS and Grunt, and was feeling all proud and mighty — only to soon find out Gulp and ReactJS were on the horizon. And a year later after learning them, Webpack started gaining ground, and I had to learn that too. As you can imagine, a big part of me was pretty disappointed with how quickly some of my knowledge became obsolete. But a coworker soon enlightened me by telling me something that changed how I viewed libraries and frameworks forever:

一年后我面临的另一个挑战是Web开发的发展速度。 我刚刚掌握了AngularJS和Grunt，并且感到非常自豪和强大-只是很快就发现Gulp和ReactJS即将出现。 一年后，学习了Webpack，Webpack开始获得发展，我也必须学习这一点。 可以想象，我的很大一部分对我的某些知识很快被淘汰感到失望。 但是，一位同事很快告诉了我一些事情，这些事情彻底改变了我对库和框架的看法：

“Libraries and Frameworks may become obsolete, but the concepts and solutions they propose often survive the test of time.”

“图书馆和框架可能会过时，但是它们提出的概念和解决方案通常会经受时间的考验。”

He was right. AngularJS may have become obsolete, but fully understanding the magic behind it helped me better understand React’s web component architecture, which improved upon Angular’s Directives concept. It also helped me understand how ReactJS gained so much popularity, as well as what kind of future awaited.

他是对的。 AngularJS可能已经过时，但是完全理解它背后的魔力有助于我更好地理解React的Web组件架构，该架构在Angular的Directives概念上得到了改进。 这也帮助我了解了ReactJS是如何获得如此广泛的欢迎的，以及等待什么样的未来。

I don’t recall facing any other major challenges on my subsequent projects. But what I will say is that over the course of the 2 years I’ve been doing web development, the #1 thing that has helped succeed (according to my own coworkers) was my excitement and my powerful drive to always be on the lookout for new things to learn. I soon found out this was a winning combination with web development since things over here change really, really fast, with new frameworks and libraries constantly emerging.

我不记得在后续项目中面临任何其他重大挑战。 但是我要说的是，在我从事Web开发的2年中，成功的第一件事(根据我自己的同事)是我的兴奋，并且我有强大的动力一直在寻找学习新事物。 我很快发现这是与Web开发的成功结合，因为这里的事情真的以非常快的速度变化，并且新的框架和库不断涌现。

On the flip side of the coin, the other thing that helped me a ton — and something I found out quite recently actually — was understanding what not to learn. This became critical to my process of becoming a better web developer.

在硬币的另一面，帮了我很多忙的另一件事-我最近才发现的事实-是了解不该学习的东西。 这对于我成为一名更好的Web开发人员的过程至关重要。

It’s not uncommon to see people criticizing the abnormally fast pace of evolution of web technologies, or how a new JavaScript library or framework comes out nearly every day. But in time I saw the light and finally understood:

人们经常批评Web技术的发展异常Swift，或者几乎每天都会出现新JavaScript库或框架的情况并不少见。 但是随着时间的流逝，我看到了曙光，终于明白了：

You don’t have to learn every new library or framework that comes out.

您不必学习所有出现的新库或框架。

Often it’s a great idea to do a simple hello world example app so you can see what a framework offers. Then you can move on. But usually, you should try to focus on what best suits your project’s needs. This can be hard at first, but thankfully great places like Stack Overflow, Medium and Reddit exist where you can find useful discussions between frameworks, and figure out which ones fit your specific use cases the best.

通常，做一个简单的hello world示例应用程序是一个好主意，这样您就可以看到框架提供了什么。 然后，您可以继续前进。 但是通常，您应该尝试着眼于最适合您项目需求的内容。 一开始可能很难，但是值得庆幸的是，存在Stack Overflow，Medium和Reddit等很棒的地方，您可以在这些地方找到框架之间的有用讨论，并找出最适合您的特定用例的地方。

走得更远 (Going Further)

In the upcoming years, I proceeded to continuously improve in the following ways

在接下来的几年中，我通过以下方式不断进行改进

JavaScript (JavaScript)

Once you finish Eloquent JavaScript, it’s rather easy to say and feel like you’ve mastered JavaScript, but then comes You Don’t Know JS and it absolutely destroys you (or at least it did to me). This book series (free by the way) was mentioned to me several times by a few senior web developers in the office as the book to read, and that only until I’ve read it can I say I fully know JavaScript. They were right, since page after page it continuously blew my mind as to how truly complex JavaScript really was, as well as many, many common pitfalls un-experienced & experienced people without a proper JavaScript understanding may have.

一旦您完成了Eloquent JavaScript，就可以很容易地说出来，感觉就像您已经掌握了JavaScript，但随后出现了You Do n't Know JS ，它绝对摧毁了您(或者至少对我造成了伤害)。 办公室里的一些高级Web开发人员多次向我提到这本书系列(顺便说一句)作为要阅读的书 ，只有在读完它之后，我才能说我完全了解JavaScript。 他们是对的，因为它一页又一页地不断地让我想起JavaScript到底是多么的真正复杂，以及许多对JavaScript缺乏理解的无经验和有经验的人常见的陷阱。

Reading that book series really opened my mind, and I also highly recommend it to anyone wanting to call themselves an expert JavaScript developer. Once you got that out of the way, there are 2 extra resources I highly recommend to get an even further, more advanced JavaScript knowledge;

阅读该系列丛书确实打开了我的胸怀，并且我也强烈推荐给任何想称自己为JavaScript专业开发人员的人。 一旦您了解了这一点，我强烈建议您增加2种资源，以获取更多，更高级JavaScript知识；

• JavaScript, The Better Parts: An amazing talk by D. Crockford that talks about JavaScript’s biggest weaknesses, it’s “Foot Guns,” and how to utilize them as its strengths.

  JavaScript，更好的部分 ：D。Crockford的精彩演讲，谈到了JavaScript的最大弱点，即“脚枪”，以及如何利用它们作为优点。

• The Two Pillars of JavaScript: a solid article by recognized JavaScript Medium writer Eric Elliott that talks about the 2 great pillars of JavaScript: Prototypical Inheritance and Functional Programming

  JavaScript的两大Struts ：由公认JavaScript媒体作家Eric Elliott撰写的一篇固体文章，谈到JavaScript的两大Struts ：原型继承和函数式编程

Once you have a profound understanding of JavaScript, proceed with ECMASCript 2015 (also known as ES6), the latest, and current JavaScript standard. Smashing Magazine’s article ECMAScript 6 (ES6): What’s New In The Next Version Of JavaScript is a great short review of what’s new in ES6. You can try ES6 in the browser using Babel’s online transpiler.

对JavaScript有深刻的了解后，请继续使用ECMASCript 2015(也称为ES6)，这是最新的最新JavaScript标准。 Smashing Magazine的文章ECMAScript 6(ES6)：JavaScript下一版本中的新增功能是对ES6新增功能的简短回顾。 您可以使用Babel的在线transpiler在浏览器中尝试ES6。

CSS (CSS)

CSS can get messy and disorganized very, very quickly. There have been quite a few different methodologies proposed to write cleaner CSS, but 2 stand out which I highly recommend you read about ASAP to stay competitive:

CSS会非常非常Swift地变得混乱和混乱。 提出了许多不同的方法来编写更简洁CSS，但是2种突出的方法是我强烈建议您阅读的有关ASAP的方法，以保持竞争力：

• SMACSS: Scalable and Modular Architecture for CSS. A flexible guide to developing sites small and large.

  SMACSS ：CSS的可扩展和模块化体系结构。 灵活的网站开发指南，无论规模大小。

• BEM: a methodology that helps you to achieve reusable components and code sharing in the front-end.

  BEM ：一种方法，可以帮助您在前端实现可重用的组件和代码共享。

I personally prefer SMACSS because of it’s cleaner look, but some companies and CSS Frameworks still use BEM, so it’s worth knowing both.

我个人更喜欢SMACSS，因为它看起来更干净，但是一些公司和CSS框架仍使用BEM，因此两者都值得一读。

You should also start focusing on your CSS’s performance. Smashing Magazine’s article Managing Mobile Performance Optimization and HTML5 Rocks’s article High Performance Animation did a solid job at providing a head start on this. A quick read through both articles should give you a solid foundation.

您还应该开始关注CSS的性能。 Smashing Magazine的文章“ 管理移动性能优化”和HTML5 Rocks的文章“ 高性能动画”在提供领先方面做得很好。 快速阅读这两篇文章应该为您奠定坚实的基础。

JavaScript捆绑软件 (JavaScript Bundlers)

By now you should have strong understanding of Grunt or Gulp. The next step is adding a JavaScript bundler to your task runner, which will allow for a more modular organization of your JavaScript application.

现在，您应该对Grunt或Gulp有深刻的了解。 下一步是将JavaScript捆绑程序添加到您的任务运行器，这将使您JavaScript应用程序更加模块化。

The two biggest players right now are:

目前最大的两个参与者是：

• Browserify: lets you require modules in the browser by bundling up all of your dependencies.

  Browserify ：通过捆绑所有依赖关系，使您在浏览器中需要模块。

• Webpack: basically Browserify on steroids. Harder to configure and set up.

  Webpack ：基本上是在类固醇上使用Browserify。 难以配置和设置。

Scotch.io’s mini-course Getting Started with Browserify can provide you a jump-start with browserify, while David Fox Powell article Why Can’t Anyone Write a Simple Webpack Tutorial? is a great, fun to read introduction to webpack.

Scotch.io的迷你课程Browserify入门可以为您提供Browserify的快速入门 ，而David Fox Powell的文章为什么没人能写一个简单的Webpack教程 ？ 阅读Webpack简介非常有趣。

Personally I haven’t spent a lot of time using webpack, but in my time with it, I have to say it’s been amazing — even if it’s slightly harder to set up. If you are just getting started, I’d go for Browserify since it’s a lot simpler to set up. Just be aware that webpack is the future, and what bigger projects are starting to use.

就我个人而言，我并没有花很多时间使用webpack，但是在我使用它的过程中，我不得不说它非常了不起-即使设置起来有些困难。 如果您只是入门，那么我将选择Browserify，因为它的设置非常简单。 只要知道webpack是未来，什么更大的项目开始使用。

ReactJS (ReactJS)

ReactJS is quickly gaining popularity, and it doesn’t seem to be slowing down — to the extent that people are asking “Is React killing Angular?”

ReactJSSwift流行起来，并且似乎并没有在减慢速度，在某种程度上人们一直在问“ React是否正在杀死Angular？”

Scotch.io’s Learning React.js: Getting Started and Concepts provides a solid overview of React. Once you got that out of the way, continue with Egghead.io’s course on React Fundamentals where you will build a fully working ReactJS app and then migrate it to ES6 syntax. You can follow up with the official ReactJS documentation which is very well made and will allow you to fully master it.

Scotch.io的《 学习React.js：入门和概念》提供了对React的全面概述。 一旦解决了这个问题，请继续Egghead.io关于React Fundamentals的课程，在那里您将构建一个可以正常运行的ReactJS应用程序，然后将其迁移到ES6语法。 您可以阅读做得很好的官方ReactJS文档 ，它可以使您完全掌握它。

Since React is only the view, it’s highly recommended you learn Redux. Most courses on Redux are a bit complex in my opinion, but CSS Tricks Leveling Up with React: Redux does score a great balance between simplicity and being informative at getting started with Redux.

由于React仅是视图，因此强烈建议您学习Redux。 在我看来，大多数关于Redux的课程都有些复杂，但是CSS技巧可以通过React进行升级：Redux确实在简单性和丰富的Redux入门之间取得了很好的平衡。

You might have also heard of Flux at this point, but if you’re wondering why you should use Redux over Flux, check out the question on Stack Overflow Why use Redux over Facebook Flux? which was answered by Redux’s creator!

您可能在这一点上也听说过Flux，但是如果您想知道为什么要在Flux上使用Redux，请查看有关Stack Overflow的问题， 为什么在Facebook Flux上使用Redux？ Redux的创建者回答了这个问题！

回顾我的错误和我学到的东西 (Looking back on my mistakes and what I learned)

I made a lot of mistakes in my 2 years of learning web development. Overall, I think my biggest mistake was not mastering the basics before moving on to libraries and frameworks. I guess this applies to almost every programming language out there, but in my opinion it applies even more to JavaScript. This is because in many ways, JavaScript is a broken language and contains a lot of “Foot Guns” (you should have heard of this if you watched D. Crockford’s talk on “JavaScript, the better parts” I mentioned earlier). These can make life insufferably hard if you don’t fully understand them.

在学习网络开发的两年中，我犯了很多错误。 总的来说，我认为我最大的错误是在继续学习库和框架之前没有掌握基础知识。 我猜这适用于几乎所有的编程语言，但我认为它甚至更适用于JavaScript。 这是因为从很多方面来说，JavaScript是一种残破的语言，并且包含很多“脚枪”(如果您看过D. Crockford之前提到的关于“ JavaScript，更好的部分”的演讲，您应该已经听说过)。 如果您不完全了解它们，可能会使生活变得非常艰难。

I recall once having gotten stuck in an AngularJS issue with $scope which took me 3 days to debug, only to find it wasn’t even an AngularJS issue, but a JavaScript issue that I caused myself because of failing to understand how this works.

我记得曾经曾经因为$ scope被困在AngularJS问题中，这花了我3天的时间进行调试，却发现它甚至不是AngularJS问题，而是我因无法理解它的工作原理而导致JavaScript问题。

清洁代码 (Clean Code)

It’s strange that I don’t see this talked about as often. I didn’t always care for writing clean code, but honestly it’s one of the things I’m most proud of having learned. This is because everyone loves to complain how their last place had one of the worst, ugliest code base in the world. So why can’t anyone talk about how great their last one was? How their code ended up so clean and well made they were proud of it?

奇怪的是，我没有看到这件事经常被提及。 我并不总是喜欢编写干净的代码，但是老实说，这是我最自豪的一件事。 这是因为每个人都喜欢抱怨自己的最后一个位置是世界上最糟糕，最丑陋的代码库之一。 那么为什么没人能谈论他们的最后一个有多伟大呢？ 他们的代码如何最终变得如此干净整洁，让他们为此感到骄傲？

This is a trend I’d like to change, and I believe a difference can be made if enough people push for it. Strive to make variable and function names understandable in English, even if you have to write a bit more. Not doing so will only lead to you having to manually document it sometime in the future to make it clearer. This will also cause your overall codebase to become harder to understand by new developers and yourself. Yes, yourself. Why yourself? Because if you’re not enforcing clean code, what makes you think your coworkers should enforce it and write clean code for you to easily understand? Let’s lead by example.

这是我想改变的趋势，我相信，如果有足够的人为此努力可以有所作为。 力求使英语中的变量和函数名易于理解，即使您不得不多写一点。 不这样做只会导致您不得不在将来的某个时候手动对其进行整理以使其更加清晰。 这也将使您的整体代码库变得更难被新开发人员和您自己理解。 是的，你自己。 为什么是你自己？ 因为如果您不执行干净的代码，是什么使您认为您的同事应该执行它并编写干净的代码以方便您理解？ 让我们以身作则。

And if that isn’t a good enough incentive, people very often recognize and value clean code writers. You’ll find that by writing clean code your coworkers and friends will enjoy working with you even more, and in turn, you’ll live a happier life.

如果这还不够好，人们通常会认可并重视干净的代码编写者。 您会发现通过编写清晰的代码，您的同事和朋友将更加享受与您的合作，从而使您的生活更加幸福。

jQuery的 (jQuery)

Some of you might notice I also didn’t make much of an emphasis on jQuery. This is because in my experience, I found jQuery did me more harm than good at first. Some of you may not agree, but please let me explain: When I first learned it, the general idea I understood was that jQuery was everywhere and that you could use it for pretty much everything. Because of this, I got used to using jQuery for pretty much anything, and for any problem I encountered, I looked for a solution for it that used jQuery.

你们中的有些人可能会注意到，我也没有过多地强调jQuery。 这是因为根据我的经验，我发现jQuery起初弊大于利。 你们中的某些人可能不同意，但请让我解释一下：当我第一次学习它时，我了解的一般想法是jQuery无处不在，并且您几乎可以将其用于所有东西。 因此，我习惯了将jQuery用于几乎所有东西，对于遇到的任何问题，我都在寻找使用jQuery的解决方案。

Don’t get me wrong, jQuery was awesome in my time using it, so awesome in fact, that I blindly ignored that 90% of what I did with jQuery could be done natively in modern browsers in a similarly easy syntax.

别误会我的意思，jQuery在我使用它的时候很棒，事实上，它是如此出色，以至于我盲目地忽略了90％的jQuery操作都可以在现代浏览器中以类似的简单语法原生完成。

You may now be thinking: “So what’s wrong with that? jQuery doesn’t weight all that much anyway and using it you still end up writing less code than if you did things natively.” But using jQuery over native APIs wasn’t the problem. The problem was that my entire way of thinking and all the solutions to common problems I knew up until that point required jQuery to work. And this became a huge problem when I got my first project and was told jQuery wasn’t a dependency.

您现在可能在想：“那怎么了？ 不管怎么说，jQuery并没有那么重要，与使用本地方法相比，使用它仍然可以减少编写代码的数量。” 但是在本地API上使用jQuery并不是问题。 问题是我的整个思维方式以及直到那时为止我所知道的常见问题的所有解决方案都需要jQuery起作用。 当我得到我的第一个项目并被告知jQuery不是依赖项时，这成为一个巨大的问题。

Using jQuery made me useless without it, and made me completely ignore the native methods and solutions that have always existed. It made all my solutions less portable too, since using them required jQuery.

使用jQuery会使我毫无用处，并使我完全忽略了一直存在的本机方法和解决方案。 由于使用jQuery，因此所有解决方案的可移植性也降低了。

Since then, I’ve strived to not use jQuery unless it is absolutely necessary and truly provides big improvement in efficiency and readability to our codebase (for example, heavy DOM manipulation).

从那时起，我一直努力不使用jQuery，除非绝对必要，并且确实为我们的代码库提供了效率和可读性的大幅提高(例如，繁重的DOM操作)。

Once again, don’t get me wrong, jQuery is great, but if I could go back in time and meet my past self that was just learning web development, I’d heavily advise myself against learning jQuery altogether until I’ve learned how to do things without it. If you are having trouble doing the switch like I did, check out You Might Not Need jQuery.

再一次，不要误会我的意思，jQuery非常棒，但是如果我能回到过去并认识过去的自我，那只是学习Web开发，我强烈建议自己不要学习jQuery，直到我学会了如何去做没有它的事情。 如果您无法像我一样进行切换，请查看您可能不需要jQuery 。

培训班 (Courses)

As for course material; while a lot of CodeSchool’s courses were outstanding (The HTML & CSS branch was specially fantastic), even if a few of their courses on frameworks fell flat a bit flat (AngularJS, BackboneJS, etc.).

至于课程资料； 尽管CodeSchool的许多课程都非常出色(HTML和CSS分支特别出色)，即使他们关于框架的一些课程表现平平(AngularJS，BackboneJS等)。

I also took quite a lot of Pluralsight courses, which I didn’t mention because after all this time, I’ve reached the conclusion that picking their learning path is overall a bad idea and unreliable. Since their courses are made by teachers who aren’t always (in my opinion) very good at teaching, I found their course quality fluctuates wildly since their course quality standards are non-existent. I’ve had courses where even the person giving the course sounded like he was falling asleep. And I honestly don’t have the attention span to keep paying attention on a 6–10 hour course — and a lot of them last that long, if not longer.

我还参加了很多Pluralsight课程，但我没有提到，因为经过这么长时间，我得出的结论是，选择他们的学习道路总体上是一个坏主意，而且不可靠 。 由于他们的课程是由并非总是擅长教学的老师制作的，我发现他们的课程质量起伏很大，因为他们的课程质量标准不存在。 我参加过一些课程，即使参加课程的人听起来也好像他正在入睡。 老实说，我没有足够的注意力去关注6到10个小时的课程，而且很多课程持续的时间很长，甚至更长。

I spent a good 80–100 hours of training in Pluralsight, and I honestly want a good part of it back. Don’t get me wrong, I had a few amazing courses on Pluralsight, but their focus on quantity over quality really made me waste my time. I could have learnt so much more if I had taken courses from better sources like Egghead.io and CodeSchool, where they value more quality of quantity.

我在Pluralsight中度过了80-100个小时的良好培训，老实说，我希望得到其中的很大一部分。 别误会，我在Pluralsight上有一些很棒的课程，但是他们对数量而不是质量的关注确实使我浪费时间。 如果我从更好的资源(如Egghead.io和CodeSchool)那里学习课程，他们会学到更多，他们认为它们更有价值。

The only reason I could ever think of someone using Pluralsight is to take a course that no other website has in some more obscure technology (like Installshield, or Xamarin), or to take a few very specific courses that they know were very well received and reviewed (For example, John Papa’s Angular Fundamentals).

我能想到使用Pluralsight的人的唯一原因是，上了一门其他网站所没有的更晦涩的技术(例如Installshield或Xamarin)，或者上了几门非常具体的课程，他们知道这些课程非常受欢迎，并且评论(例如，John Papa的Angular基础知识)。

Overall, if you want to use Pluralsight, be sure that you are taking courses hand-picked by someone that took them first and that are recognized as high quality and useful.

总的来说，如果您想使用Pluralsight，请确保您所选择的课程是由那些先选好课程并且被认为是高质量和有用的人精心挑选的。

I also recently tried Team Treehouse training and I’ve got to say, I’m amazed at the quality that went into their courses, even rivaling that of CodeSchool, and their course material is highly extensive.

我最近还尝试了Team Treehouse培训，我不得不说，我对他们的课程质量感到惊讶，甚至可以与CodeSchool媲美，而且他们的课程资料非常丰富。

After skimming through the HTML, CSS and JavaScript learning paths there, I see you could easily acquire the foundation of pretty much everything. Don’t believe me? Just look at their learning tracks and tell me it’s not amazing. Sure, it’s a bit expensive at $30 USD a month, but in my opinion it’s incredibly worth it. (I’m paying for it right now to learn WordPress since I need it for a freelance project and the material is great).

在浏览完HTML，CSS和JavaScript学习路径之后，我发现您可以轻松地掌握几乎所有内容的基础。 不相信我吗 看看他们的学习轨迹 ，告诉我这并不奇怪。 当然，每月30美元的价格有点贵，但我认为这绝对值得。 (我现在为学习WordPress付出代价，因为我需要一个自由职业者项目，而且材料很棒)。

关于付费课程的一句话 (A word on paid courses)

I felt a need to speak about this since I’ve noticed the general consensus that you can learn programming without paying a dime and be as competitive as one that paid for a course. While true, I cannot stress enough the value paying for the right course has. Sure, quite a lot of the most valuable course material I’ve written about is free, but a lot of it is also paid. Mainly because sometimes you just can’t beat having someone carefully explain things to you in a visual way.

我觉得有必要谈谈这一点，因为我注意到人们普遍的共识，即您可以不用花一分钱就可以学习编程，并且可以像支付课程费用一样有竞争力。 的确如此，我不能为正确的课程付出足够的压力。 当然，我写过的很多最有价值的课程材料都是免费的，但其中很多也是有偿的。 主要是因为有时候您无法忍受有人以视觉方式向您仔细地解释您的事情。

Yes, there are terrible learning paid courses which I would advise against since their value proposition is questionable (see Pluralsight), but others like Egghead.io, CodeSchool, and Team Treehouse offer outstanding bang-for-your-buck, despite their relatively costly monthly subscription ($25-$30 a month). Plus, they all have free 7–15 day trials so you can see which one works best for you.

是的，有一些可怕的学习付费课程，我建议他们这样做，因为它们的价值主张值得怀疑(请参阅Pluralsight)，但是像Egghead.io，CodeSchool和Team Treehouse之类的其他课程虽然成本相对较高，但还是物有所值每月订阅(每月25至30美元)。 另外，它们都有7-15天的免费试用期，因此您可以查看哪一种最适合您。

If you play your cards right, paying 1–2 months of either of them can easily net you knowledge you would only otherwise get after stumbling upon countless of articles and blog posts over a year. They’re honestly that good.

如果您使用得当，只需支付1-2个月中的任意两个月，便可以轻松地了解到，只有在经历了一年多的文章和博客文章后，您才能获得这些知识。 他们真的很好。

So yes, they are not necessary, but if you can afford at least one month, you can be sure it will give you a strong edge.

因此，是的，它们不是必需的，但是，如果您可以负担得起至少一个月的费用，则可以确定它将为您带来强大的优势。

成功的秘诀 (The secret sauce for success)

I’ve met a lot of developers over the past 2 years I’ve been a web developer. Along my journey, I’ve met a few developers who really stood out — developers who were clearly in a league of their own, and to whom me and everyone else looked up to. I found these individuals shared quite a few characteristics, which I’d like to share with you right now. These are in my opinion the secret sauce to being a successful web developer:

在过去的两年中，我结识了很多开发人员。 在我的旅途中，我遇到了一些真正脱颖而出的开发人员，这些开发人员显然属于自己，并且我和其他所有人都期待他们。 我发现这些人具有很多特征，我现在想与您分享。 在我看来，这些是成为成功的Web开发人员的秘诀：

• Love what you do. This is simply the most important characteristic of them all. If you don’t love what you do (be it CSS Styling or JavaScript), it will truly show in what you do. Those who are passionate about what they do often clearly stand out from the crowd.

  热爱你所做的事。 这仅仅是所有这些中最重要的特征。 如果您不喜欢自己的工作(无论是CSS样式还是JavaScript)，它将真正显示您的工作。 那些对自己的工作充满热情的人通常会在人群中脱颖而出。

• Be generous and share your knowledge. It’s very easy to want to keep that new CSS/JavaScript hack you found that solves the project’s issues a secret, but please don’t. The people who share their knowledge the most are often the most valuable, since they can be placed in any kind of team and improve it’s quality by a huge margin.

  慷慨大方并分享您的知识 。 要将发现的解决项目问题的新CSS / JavaScript hacks保密起来是很容易的，但是请不要这么做。 知识共享程度最高的人通常是最有价值的，因为他们可以被安排在任何类型的团队中，并可以极大地提高其质量。

• Always be on the lookout for new things. Most of the successful developers I’ve met share this common trait. Whether it be by reading blogs, spending lots of time in programming related discussions, or even talking about what’s new in web development during lunch breaks. Being on the lookout for new things all the time allows the best developers to always stay ahead of the curve.

  一直在寻找新事物 。 我遇到的大多数成功开发人员都具有这个共同特征。 无论是通过阅读博客，花费大量时间进行与编程相关的讨论，还是在午餐时间谈论Web开发的新功能。 一直在寻找新事物，使最优秀的开发人员始终处于领先地位。

最短路线 (The shortest route)

Whew, this article took a while to finish (6 hours and counting). We’re almost done! You may be wondering: “Ok, cool story, but what’s the quickest route?” And so, here it is.

简而言之，本文花了一些时间才能完成(6个小时，而且还在继续)。 我们快完成了！ 您可能会想：“好的，很酷的故事，但是最快的路线是什么？” 这样，就在这里。

I’ve organized this in the way that I would take it if I could go back and do things right. I also added a few bonuses, which I would have loved to have had back then. Enjoy!

如果可以回头做正确的事，我将采用这种方式进行组织。 我还添加了一些奖金，那是我本来希望获得的。 请享用！

Java脚本 (Javascript)

1. CodeSchool or Treehouse’s Javascript learning path (paid) OR Codecademy’s Javascript course

   CodeSchool或Treehouse的 Java学习路径(付费)或Codecademy的Java学习课程

2. Eloquent JavaScript

   雄辩JavaScript

3. You Don’t Know JS

   你不懂JS

4. JS: The Right Way

   JS：正确的方法

5. Learn ES6 by Egghead.io

   通过Egghead.io 学习ES6

HTML和CSS (HTML & CSS)

1. CodeSchool or Treehouse’s HTML & CSS learning path(Paid) OR HTML and CSS: Design and Build Websites by John Ducket OR Codecademy’s HTML & CSS course.

   CodeSchool或Treehouse的 HTML和CSS学习路径(付费)或HTML和CSS： John Ducket 设计或构建网站或CodecademyHTML和CSS课程 。

2. Specifics on CSS Specifity by CSS Tricks

   Specifics on CSS Specifity by CSS Tricks

3. Learn CSS Layout

   Learn CSS Layout

4. SMACSS

   SMACSS

5. 9 basic principles of responsive web design by Front

   9 basic principles of responsive web design by Front

6. Responsive Web Design Fundamentals by Google on Udacity (Take if you didn’t use CodeSchool or Treehouse learning path)

   Responsive Web Design Fundamentals by Google on Udacity (Take if you didn't use CodeSchool or Treehouse learning path)

7. Managing Mobile Performance Optimization by Smashing Magazine OR Browser Rendering Optimization and Website Performance Optimization by Google on Udacity

   Managing Mobile Performance Optimization by Smashing Magazine OR Browser Rendering Optimization and Website Performance Optimization by Google on Udacity

8. Web fundamentals by Google

   Web fundamentals by Google

开发者工具 (Developer Tools)

1. Explore and Master DevTools by CodeSchool

   Explore and Master DevTools by CodeSchool

2. Learn Git by Codecademy and Try Github by Codeschool

   Learn Git by Codecademy and Try Github by Codeschool

3. Introduction to Linux Commands by Smashing Magazine

   Introduction to Linux Commands by Smashing Magazine

4. Automate Your Tasks Easily with Gulp.js by Scotch.io

   Automate Your Tasks Easily with Gulp.js by Scotch.io

AngularJS (AngularJS)

1. Design Decisions in AngularJS by Google Developers (Intro to AngularJS)

   Design Decisions in AngularJS by Google Developers (Intro to AngularJS)

2. AngularJS fundamentals by Egghead.io

   AngularJS fundamentals by Egghead.io

3. John Papa’s Angular Styleguide

   John Papa's Angular Styleguide

4. Creating a Single Page Todo App with Node and Angular (MEAN) by Scotch.io

   Creating a Single Page Todo App with Node and Angular (MEAN) by Scotch.io

5. AngularJS application structure by Egghead.io (Paid) OR Scotch.io’s Angular Courses

   AngularJS application structure by Egghead.io (Paid) OR Scotch.io's Angular Courses

ReactJS (ReactJS)

1. Learning React.js: Getting Started and Concepts by Scotch.io

   Learning React.js: Getting Started and Concepts by Scotch.io

2. Intro to webpack by Egghead.io

   Intro to webpack by Egghead.io

3. React Fundamentals by Egghead.io

   React Fundamentals by Egghead.io

4. Leveling Up with React: Redux by CSS Tricks

   Leveling Up with React: Redux by CSS Tricks

后端 (Back End)

1. NodeJS tutorials by NodeSchool.io

   NodeJS tutorials by NodeSchool.io

2. How I explained REST to my Wife

   How I explained REST to my Wife

3. Creating a Single Page Todo App with Node and Angular by Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)

   Creating a Single Page Todo App with Node and Angular by Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)

Bonus: Resources (Bonus: Resources)

Completely optional, but some of my favorite articles and resources which I’ve found over the years which you will probably love if you are interested in their respective topic.

Completely optional, but some of my favorite articles and resources which I've found over the years which you will probably love if you are interested in their respective topic.

• Web Design in 4 minutes. A very creative and original interactive tutorial that teaches you the fundamentals of web design.

  Web Design in 4 minutes . A very creative and original interactive tutorial that teaches you the fundamentals of web design.

• Awwards. Looking for web design inspiration? Look no further.

  Awwards . Looking for web design inspiration? 别再看了。

• Why Hiring is so hard in tech by Eric Elliott. Here Eric is does an amazing job at summarizing how it’s surprisingly hard to find great developers, and how to become one.

  Why Hiring is so hard in tech by Eric Elliott. Here Eric is does an amazing job at summarizing how it's surprisingly hard to find great developers, and how to become one.

• NoSQL database systems mega comparison by Kristof Kovacs. This is a superb comparison between the most popular NoSQL database systems out there. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, they and more are all here.

  NoSQL database systems mega comparison by Kristof Kovacs. This is a superb comparison between the most popular NoSQL database systems out there. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, they and more are all here.

• XSS Game. Cross-site scripting (XSS) bugs are one of the most common and dangerous types of vulnerabilities in Web applications. Using this awesome resource you can learn how to find and exploit XSS bugs, and how to prevent them from happening to your web application.

  XSS Game . Cross-site scripting (XSS) bugs are one of the most common and dangerous types of vulnerabilities in Web applications. Using this awesome resource you can learn how to find and exploit XSS bugs, and how to prevent them from happening to your web application.

• How To Write Unmaintainable Code. Hilarious article on how not to write maintainable, clean code.

  How To Write Unmaintainable Code . Hilarious article on how not 至 write maintainable, clean code.

Bonus: My tools (Bonus: My tools)

I thought it’d also be nice to share some of the tools I discovered (some well known, some not so much) that have made my life easier as web developer so here they are.

I thought it'd also be nice to share some of the tools I discovered (some well known, some not so much) that have made my life easier as web developer so here they are.

• Jetbrains Webstorm: Full featured Web Development IDE. (My editor of choice) Paid, but offers a 1 year free license for students.

  Jetbrains Webstorm : Full featured Web Development IDE. (My editor of choice) Paid, but offers a 1 year free license for students.

• Atom.io: Highly extensible text editor with IDE like features rivaling Webstorm. Free.

  Atom.io : Highly extensible text editor with IDE like features rivaling Webstorm. 自由。

• Sublime Text: Lightning fast text editor with plugins support and an aesthetically pleasing look. (I normally keep Webstorm/Atom installed as IDE for serious work, and Sublime Text installed for quick edits to files.)

  Sublime Text : Lightning fast text editor with plugins support and an aesthetically pleasing look. (I normally keep Webstorm/Atom installed as IDE for serious work, and Sublime Text installed for quick edits to files.)

• caniuse.com: Browser support is critical for websites, and this is the #1 resource at figuring out what features are supported by which browser version and which are.

  caniuse.com : Browser support is critical for websites, and this is the #1 resource at figuring out what features are supported by which browser version and which are.

• Cloud 9: Cloud based development environment and IDE with Git support that runs on Linux. Great for programming remotely and testing out NodeJS or other server side things without needing to install anything on your machine

  Cloud 9 : Cloud based development environment and IDE with Git support that runs on Linux. Great for programming remotely and testing out NodeJS or other server side things without needing to install anything on your machine

• CodePen, Plunker and JSFiddle: Great cloud based front end playgrounds that let you do quick HTML/CSS/JS demos you can share, or work on later on if you create a free account. CodePen is often best for CSS related things because of it’s minimalistic interface and plethora of CSS related features, Plunker for JavaScript demos because of it’s powerful JS features, and JSFiddle for demos that you wish to collaborate with others in real time thanks to it’s live editor sharing collaboration feature.

  CodePen , Plunker and JSFiddle : Great cloud based front end playgrounds that let you do quick HTML/CSS/JS demos you can share, or work on later on if you create a free account. CodePen is often best for CSS related things because of it's minimalistic interface and plethora of CSS related features, Plunker for JavaScript demos because of it's powerful JS features, and JSFiddle for demos that you wish to collaborate with others in real time thanks to it's live editor sharing collaboration feature.

• Vanilla List: A repository of JavaScript plugins and libraries using only vanilla JavaScript (meaning they require no libraries to work, like jQuery)

  Vanilla List : A repository of JavaScript plugins and libraries using only vanilla JavaScript (meaning they require no libraries to work, like jQuery)

• YouMightNotNeedjQuery: You probably don’t. See for yourself.

  YouMightNotNeedjQuery : You probably don't. 你自己看。

• PublicAPIs: Ever wondered what public APIs exist? Look no further!

  PublicAPIs : Ever wondered what public APIs exist? 别再看了！

• Gravit.io: Cloud based design application rivaling adobe illustrator. (Free!) Useful for quick mockups and web design.

  Gravit.io : Cloud based design application rivaling adobe illustrator. (Free!) Useful for quick mockups and web design.

• Adobe Kuler: Webapp to help you create harmonious color combinations for any website. Also has an “Explore” showcase of color palettes built by other designers as well as a ranking system to help inspire you.

  Adobe Kuler : Webapp to help you create harmonious color combinations for any website. Also has an “Explore” showcase of color palettes built by other designers as well as a ranking system to help inspire you.

• Name that color: Stop spending lots of time figuring out how to name your color variables in less/sass and just use their rightful name with this webapp

  Name that color : Stop spending lots of time figuring out how to name your color variables in less/sass and just use their rightful name with this webapp

结论 (Conclusion)

I’d just like to say I really enjoyed writing this, and it makes me really happy to have been finally able to give something back to the incredibly supportive programming community everywhere.

I'd just like to say I really enjoyed writing this, and it makes me really happy to have been finally able to give something back to the incredibly supportive programming community everywhere.

As some of you already noticed, this is my first blog post, but you can be sure I plan to write more. Just don’t expect one every week. Remember: quality over quantity!

As some of you already noticed, this is my first blog post, but you can be sure I plan to write more. Just don't expect one every week. Remember: quality over quantity!

If any of you have any questions left, feel free to leave a comment and I’ll do my best to get back to you ASAP.

If any of you have any questions left, feel free to leave a comment and I'll do my best to get back to you ASAP.

I hope this was useful to you guys, until next time, Best!

I hope this was useful to you guys, until next time, Best!

March ’18 Update: For those curious as to what I’ve been up to, here’s a quick status update!

March '18 Update : For those curious as to what I've been up to, here's a quick status update!

https://medium.com/@sgarcia.dev/status-update-im-still-here-with-cool-stuff-incoming-f031bab49eca

https://medium.com/@sgarcia.dev/status-update-im-still-here-with-cool-stuff-incoming-f031bab49eca

翻译自: https://www.freecodecamp.org/news/my-journey-to-becoming-a-web-developer-from-scratch-without-a-cs-degree-2-years-later-and-what-i-4a7fd2ff5503/

web.g.cs