網頁開發一直在不斷演進,每年一月,我都喜歡停下腳步重新評估並觀察這個生態系統。

問題是:2022年初學者應該從哪裡開始學習,才能學到能找到工作的技能呢?

地圖有變嗎?與去年有不同嗎?

變革似乎需要很長的時間,但它們可以很微妙,有時候從一年到另一年事情會徹底變化,你甚至都意識不到。

因此,我開始撰寫這篇文章,指導您如何在網頁開發領域中導航。

對於想要跟上生態系統並保持相關性的開發人員來說,這也是很有用的。有什麼新東西你一定要學嗎?

讓我們開始吧。

先說一下,這是一個高度主觀的路線圖。這不是一個列出了1000種不同技術的路線圖,然後就讓你淚流滿面地愁眉苦臉。

讓我為您挑選最好的技術,相信我,這樣您就可以停止無休止的分析,並繼續前進。

在網頁開發中,我們有3條路線:

  • 前端開發人員
  • 後端開發人員
  • 全棧開發人員

這些角色之間的界線有點模糊。在這篇文章中,我將聚焦於全棧開發人員,這是我最喜歡的專業化領域——在這個領域中,您不需要專攻前端或後端,而是能夠創建出所有展示出來的內容。

積極忽略

首先,讓我們從我們將忽略的內容開始。

在這個路線圖中,我將忽略像UI/UX工程師、可訪問性和其他重要主題這樣更專業的範疇。這些完全是不同的職業,有自己獨特的學習路徑。

您不可能從一開始就假設您需要學習所有東西。

積極排除。

我們將忽略使用Web技術進行移動開發。那是一個完全不同的領域。我們還將忽略一切不屬於網頁開發的趨勢,而是不同類型的開發專業化,比如AI、數據科學、web3等等。

深入研究5個核心技術

我建議深入研究一組核心的5個技術:

  1. HTML
  2. CSS
  3. JavaScript
  4. React
  5. Next.js

這些5個技術按順序是您需要掌握的5個東西。

您可以用一只手數清楚。

其中3個是基礎。HTML、CSS、JavaScript。您無法避免它們。這些是我們的工具。

HTML定義了內容 CSS定義了我們希望內容呈現的樣子 JavaScript定義了行為

React是我在這裡的首個選擇。

React是一種簡化創建用戶界面的技術。

它以許多不同的方式讓我們的生活更輕鬆。

HTML、CSS和JavaScript沒有其他替代品,但您可以選擇使用其他東西,比如Svelte、Vue、Angular,但我選擇了React。

但是React非常流行,它有一個悠久的歷史和遺產,使它成為事實上的標準。它被使用得如此廣泛,以至於您可以找到一切,每個庫,大量的教程和課程,需要幫助時也不用擔心。

您可以賭一個替代品,但您還可以看看工作市場和React帶來的機會,並選擇它。

現在我們需要最後一個組件。一個網絡應用程序框架。

我們選擇了React,所以我們需要選擇一個與React配合的網絡應用程序框架。

在React和HTML/CSS/JavaScript三者之上,我選擇了Next.js,它可以讓React-based網站和應用程序的服務和前端無縫集成。

所以,我們共同使用的3個核心技術是HTML/CSS/JavaScript,最上面的是非常流行的UI庫React,再加上一個非常流行的框架Next.js。

現在還有更多的東西可以添加到這5個選擇中,但您需要從某個地方開始。

通過這5個選擇,您已經排除了很多其他可能分散注意力、讓您在成為網頁開發者的道路上分心的東西。

讓我再強調一下這個排除。至少在開始時忽略TypeScript。我知道你會一直聽到它,但它對你的旅程並不重要,你可以在未來的任何時候添加它。

JavaScript讓事情變得簡單得多,這對於保持動力至關重要。

從HTML和CSS開始

此時,開始學習並進行實驗。學習HTML,創建網頁。閱讀我的[HTML手冊](https://flaviocopes.com/page/html-handbook/)。多做練習。Codepen是一個很好的工具。

只是不要被“我使用CSS完成了這個”吸引住,有些人用CSS做了一些不可能的事情。我不知道他們是怎麼做到的,這是藝術(如果您喜歡,那很好,但在我們的旅程中不是很有用)。

至於CSS,學習基礎知識。閱讀我的[CSS手冊](https://flaviocopes.com/page/css-handbook/)。並立即開始學習Tailwind,這是一種非常實用且流行的將CSS應用於您的網頁的方法。

CSS可能很復雜,但Tailwind使它變得更簡單。相信我,我從事CSS已有 20 年,使用Tailwind讓我終於能夠在每個項目上都處理好事情。這也是其他很多人的感受。

您應該使用HTML和CSS/Tailwind創建哪些項目呢?嗯,從您的愛好和興趣開始。創建一些隨機的網頁,看看它們在瀏覽器中如何顯示。

創建一個有關狗的網頁,有關足球、橄欖球、棒球的網頁,有關您最喜歡的Netflix系列、最喜歡的音樂家的網頁,等等。重要的是進行實驗。

在HTML和CSS/Tailwind上別太花哨。它們是兔子洞。關於這兩者有很多東西要學。熟悉它們,使用它們來完成任務。

熟悉像VS Code這樣的編輯器,以及終端和Bash shell的基礎知識。學習Git來管理版本。它將為您節省很多時間和麻煩。

添加JavaScript

現在是學習JavaScript的時候了。下載並閱讀我的JavaScript初學者手冊

HTML和CSS定義了內容和呈現方式,而JavaScript是一門程式語言。

使用JavaScript,我們可以開始玩樂。

基礎知識有點……無聊並且可能會令人困惑,因為有很多理論和新概念。但這是您在網頁開發中最常使用的東西。因此,掌握它是至關重要的。

逐步將JavaScript添加到您的網頁中。

使用JavaScript,您將能夠為您的網頁添加一些互動性。您將探索DOM,這是瀏覽器讓我們與頁面上的元素進行交互的方式。

您將創建您的第一個表單。

在創建第一個表單之後,您將需要將表單數據發送到某個地方

想像一下,您建立了一個電子報註冊表單。您想要將電子郵件發送到某個地方以便存儲它。

Node.js

現在是時候學習如何創建一個簡單的後端了。

到目前為止,我們一直在前端工作,這意味著顯示在瀏覽器中的東西

當涉及到數據時,我們必須創建一個API,這個API在特定的位址上監聽,您將數據發送到該位址。

我們使用一個叫做Node.js的工具在服務器上運行JavaScript程序。

需要注意的一點是,基於歷史原因,JavaScript是唯一一種可以在瀏覽器內運行的編程語言。

因此,在瀏覽器內,我們沒有任何選擇。但在瀏覽器外,於遠程服務器上,我們可以使用任何編程語言。例如Python、Java、Ruby、Go。那為什麼要選擇JavaScript呢?

因為您已經了解了JavaScript。與同時學習2種不同的語言相比,更好地掌握一種編程語言是更好的選擇。

而且由於在前端和後端都使用JavaScript,您可以做一些非常炫酷的事情,正如您稍後在Next.js中將看到的那樣。

創建一個使用Node.js的簡單API,並將您的表單數據發送到該API。

數據庫

現在您將希望將這些數據存儲在某個地方。這就是您將開始使用數據庫的地方。

有許多不同種類的數據庫。我建議您選擇PostgreSQL,因為它是最靈活的,並且是您真正可以始終使用的數據庫。

提示:此時我建議忽略MongoDB。很多教程使用它,但如果您只想學習一個數據庫以優化時間利用率,那就選擇一個SQL數據庫,而且在選擇SQL數據庫時,選擇最好的SQL數據庫-PostgreSQL。

將您的Node應用程式連接到數據庫,學習如何存儲和檢索數據。

React

現在是學習React的時候了,請閱讀我的React初學者手冊,並開始使用您的第一個React應用程序。

從簡單的開始。嘗試用React做與您之前在HTML中做的相同的事情。學習JSX,這是“React的HTML”。

學習Next.js

一旦您學會這些概念,將Next.js加入其中。

Next.js很有用,因為React是一種創建用戶界面的好方法,但故意忽略了許多其他諸如服務器端渲染、提供動態數據、路由、靜態網站生成、代碼劃分等高級概念,而您在任何稍微複雜的網站或網絡應用程序中始終需要這些概念。

在構建應用程序時,您將意識到自己需要什麼。

Next.js手冊是Next.js的一個不錯的介紹。

在達到這個階段之後,您可以開始使用Next.js創建基本上任何東西。學習如何創建API路由,這樣您就不必再直接使用Node.js,Next.js將以“無伺服器”方式處理您的API的部署。

進行大量項目的實踐

進行大量的項目,獲得信心和經驗。不斷迭代。

每年我都在https://bootcamp.dev上舉辦一個訓練營,我們在其中工作了15個不同的應用。

實踐就是一切。在某一刻,跟隨教程已經不重要了。重要的是在項目上取得進展,並學習如何解決問題。

開始建立您的項目庫。從小型項目開始,然後逐漸進行更複雜的項目。

將您做的每件事都分享到Twitter上,與其他開發人員交朋友。

學習如何調試,學習如何進行測試,如何保護您的應用程序。掌握Git以及如何在Vercel和其他雲服務提供商上部署應用程序。

繼續去嘗試並犯錯。再洗滌和重複。

找到您的“北極星”項目。讓您激動的事。打造屬於您自己的SaaS(軟體即服務)產品。在您的Next.js網站上建立一個產品並出售它。使用Next.js創建一個電子商務網站。無論你的北極星是什麼。

保持專注。忽略一時的熱門和“下一個大東西”。

現在,您可以選擇是在這個堆疊中成為專家,還是成為通才。不要在不同的框架之間跳來跳去,專注於您已經了解的知識。

在您感覺準備好了之後,您可以尋找一份工作,或者您可以創建自己的工作。創建一個軟體產品並獨立銷售。開始自由工作並在互聯網上宣傳自己作為React/Next.js開發人員。找一家當地的公司需要開發人員。向一家代理公司詢問是否需要幫助。在一家當地公司受聘或者在一家大公司或FAANG進行面試。找一份遠程工作。

現在,您是一位受人高度重視的專業人士。公司對像您這樣的人有非常深刻的需求。

天空是極限。