原文鏈接：https://mail.qq.com/cgi-bin/readtemplate?t=safety&check=false&gourl=https%3A%2F%2Fwww.freecodecamp.org%2Fnews%2Fweb-development-2020%2F&subtemplate=gray&evil=0

前端部分原文+翻譯如下（百度翻譯，對不順暢的語序做調整，基本不太需要，百度翻譯已經很發達了~），轉載請注明出處（本文的鏈接），謝謝

Web Development in 2020: What Coding Tools You Should Learn

Quincy Larson The teacher who founded freeCodeCamp.org.

Today one of my favorite teachers, Brad Traversy, published an overview of what he recommends you learn to become a web developer in 2020.

Brad cuts through a lot of the hype you hear on social media. His advice is practical and realistic. And I agree with him on pretty much everything he recommends you learn.

The main thing Brad emphasizes - and that I always emphasize - is don't feel daunted or let yourself get overwhelmed.

Remember: freeCodeCamp's curriculum covers most of these tools, and it has helped more than 40,000 people get jobs as developers. When in doubt, just focus on that.

I've summarized Brad's main insights below for your convenience. This said, I encourage you to watch his full video, which I've embedded below. He adds a lot of detail way beyond what these notes convey. It's a 73-minute watch.

2020年的網路發展：你應該學習哪些的編碼工具

今天，我最喜歡的一位老師，Brad Traversy發表了一篇關于他推薦的，你如何在2020年學習成為一名web開發人員的概述

布拉德刪掉了很多你在社交媒體上聽到的炒作，他的建議是切合實際的，我同意他對你的建議，

布拉德強調的最主要的事情——我也一直強調——是不要感到膽怯或者讓自己不知所措，

請記住：freeCodeCamp的課程涵蓋了這些工具的大部分，它幫助超過40000人獲得了作為開發人員的作業，有疑問的時候，集中精力，

為了您的方便，我在下面總結了布拉德的主要見解，這就是說，我鼓勵你看他的完整視頻，我已經嵌入下面，他在這些說明之外添加了很多細節，這是個73分鐘的視頻，

Web Development in 2020: An Overview

The main goal of the video is to give you familiarity with some of the more mainstream web development tools available to web developers.

"I'm not trying to overwhelm you with technologies. These are just options that you have... There are a lot of technologies out there. When you hear something like Nuxt or Gatsby I want you to know what it is. And then you can choose if you want to learn it or not."

Brad starts by encouraging people to first ask what they want to do. Do you want to work on a product company? Or work as a consultant? Do you want to freelance? Or build a product of your own?

A lot of his advice about what to learn boils down to what your goals are. And he frames a lot of his tool suggestions in this light.

As a starting point, he recommends learning what he calls "The Necessities."

2020年網路發展綜述

本視頻的主要目的是讓您熟悉一些可供web開發人員使用的更主流的web開發工具，

“我不是想用科技壓倒你，這些只是你的選擇，，，有很多技術，當你聽到Nuxt或Gatsby這樣的話，我想讓你知道是什么，然后你可以選擇你是否想學，”

布拉德首先鼓勵人們先問他們想做什么，你想在一家產品公司作業嗎？或者做顧問？你想做自由職業者嗎？還是自己做產品？

他對學習什么的很多建議歸結為你的目標是什么，他從這個角度提出了很多工具建議，

作為起點，他建議學習他所說的“必需品”

One counter-intuitive thing he points out: you don't need a fancy computer for web development. "It's not like game engine development or something like that, so you can use a mid-range laptop or desktop, or even in some cases a lower-end computer."

He uses MacOS, Windows 10, and Linux for cloud servers and even for some of his media servers.

He is a big fan of VS Code for his editor, and uses Chrome and its built-in DevTools for browser-based debugging. This said, he thinks Firefox has come a long way as well and is a viable alternative.

He recommends starting with standard HTML and CSS, and learning newer CSS tools like Flexbox and Grid.

He says learning responsive web design in 2020 should be a given. "Every serious project that you create should look good and be completely usable on all devices."

Instead of relying on CSS frameworks like Bootstrap, he recommends you practice building your own modular CSS components that you can then re-use throughout your project.

This said, he says you may encounter these as you work on projects for different employers.

他指出，有一點與直覺相反：你不需要一臺花哨的計算機來進行網路開發，”這不像游戲引擎開發之類的，所以你可以使用中端筆記本電腦或臺式機，甚至在某些情況下使用低端電腦，”

他將MacOS、Windows 10和Linux用于云服務器，甚至用于他的一些媒體服務器，

他非常喜歡編輯器的VS代碼，并使用Chrome及其內置的DevTools進行基于瀏覽器的除錯，這就是說，他認為火狐也取得了長足的進步，是一個可行的選擇，

他建議從標準的HTML和CSS開始，學習Flexbox和Grid等新的CSS工具，

他說，在2020年學習回應式網路設計應該是一種必然，”您創建的每個重要專案都應該看起來很好，并且在所有設備上都完全可用，”

他建議您練習構建自己的模塊化CSS組件，然后在整個專案中重用這些組件，而不是依賴于Bootstrap這樣的CSS框架，

這就是說，他說，當你為不同的雇主做專案時，可能會遇到這些問題，

He specifically mentions Tailwind, which I hadn't heard of before. Tailwind is a bit different from other CSS frameworks. It's focused on "utility classes" that you can combine to accomplish what you want with the design.

It's no surprise that Brad recommends getting really good with JavaScript.

他特別提到了Tailwind，這是我以前沒聽說過的，Tailwind與其他CSS框架有點不同，它關注的是“實用類”，您可以將它們結合起來，以實作您想要的設計，

布拉德建議要真正精通JavaScript，這并不奇怪，

Learning at a Practical Pace

Throughout Brad's guide, he repeatedly emphasizes the need for practicality.

Yes - there are best practices for everything. But in many cases, there is a good enough way that will help you move faster and get more done, without getting mired in tools.

One of the most interesting (and perhaps heretical) things he says:

"There's no need to learn DevOps and AWS and all these things for a small site. A hosting site or a managed hosting site like InMotion or Hostgator is fine. It allows you to do [deployment] right in the browser. There's no need to overcomplicate things."

He argues that even in 2020, there's something to be said for using familiar tools.

以實際的速度學習

在布拉德的指南中，他反復強調實用性的必要性，

是的-每件事都有最佳實踐，但在很多情況下，有一個足夠好的方法可以幫助你更快地行動，完成更多的作業，而不會陷入工具的泥潭，

他說的最有趣（也許是異端）的一句話是：

“對于一個小網站來說，沒有必要學習DevOps和AWS以及所有這些東西，托管站點或托管托管站點（如InMotion或Hostgator）可以，它允許您在瀏覽器中執行[部署]，沒有必要把事情復雜化，”

他認為，即使是在2020年，對于使用熟悉的工具也有一些話要說，

For people new to web development, Brad recommends first getting to the point of being able to work as a basic front end web developer. This will allow you to build websites for local businesses as a freelancer.

"Hipsters will say you definitely need to use a front end framework. I don't think that is true. If you want to render templates on the server without using a front end framework, I think that's absolutely fine, but there are many many jobs that are looking for something like React or Vue."

But once you're ready to tackle front end frameworks, he recommends you explore React, Vue, and Angular. "Try all three and figure out which one you like the best."

He also gives a nod to Svelte - which isn't a framework, but rather a compiler. But he says it's probably too new to try and pick up in 2020.

And he discusses the increasing popularity of Server Side Rendering. File system-based routing means you don't have to create a complicated routing file. Instead, you can just put the files in the directory you want them to be in.

The two popular Server Side Rendering tools are Next.js (for React) and Nuxt.js (the Vue option).

Another emerging trend is Static Site Renders, which he says you don't need to learn but you should be aware of. For example, Gatsby sites are extremely fast and don't need a server.

對于剛接觸到web開發的人，Brad建議首先能夠作為一個基本的前端web開發人員作業，這將允許你作為一個自由職業者為當地企業建立網站，

“Hipsters （嬉皮士）時尚人士會說，你肯定需要使用前端框架，我不認為那是真的，如果您想在服務器上呈現模板而不使用前端框架，我認為這是完全可以的，但是有許多作業正在尋找React或Vue之類的內容，”

但一旦您準備好處理前端框架，他建議您探索React、Vue和Angular，”三個都試一下，找出你最喜歡哪一個，”

他還贊揚了Svelte——它不是一個框架，而是一個編譯器，但他說，這可能是太新的嘗試，并在2020年回升，

他還討論了服務器端渲染的日益流行，基于檔案系統的路由意味著您不必創建復雜的路由檔案，相反，你可以把檔案放在你想要的目錄中，

兩種流行的服務器端呈現工具是Next.js（用于React）和Nuxt.js（Vue選項），

另一個新興的趨勢是靜態網站呈現，他說你不需要學習，但你應該知道，例如，Gatsby站點速度非常快，不需要服務器，

標籤：其他

上一篇：30張圖解：鍵入網址后，到網頁顯示，其間發生了什么？

下一篇：一篇長文說 git 基礎