導讀對于那些希望通過第一份開發工作進入Web開發世界的人來說，您需要了解的知識數量可能會讓人不知所措：HTML、CSS、JavaScript、版本控制、構建工具....

對于那些希望通過第一份開發工作進入 Web 開發世界的人來說，您需要了解的知識數量可能會讓人不知所措：HTML、CSS、JavaScript、版本控制、構建工具、框架、命令行名單還在繼續……，我來為大家講解一下關于請簡述一下你認為做得最好的項目?跟著小編一起來看一看吧!

請簡述一下你認為做得最好的項目

對于那些希望通過第一份開發工作進入 Web 開發世界的人來說，您需要了解的知識數量可能會讓人不知所措：HTML、CSS、JavaScript、版本控制、構建工具、框架、命令行。名單還在繼續……

但永遠不要害怕！在這篇文章中，我想通過概述 10 項技能為您提供一些指導，這些技能將幫助您在 2020 年找到第一份開發工作。對于每項技能，我都會建議一個動手實踐的項目想法，以幫助您入門和將您指向SitePoint 庫中的適當資源以供進一步閱讀。

讓我們潛入。

1. 了解您的代碼編輯器

作為一名編碼員，您將花費大量時間在您選擇的編輯器上。這就是為什么您應該努力了解它可以做什么以及如何正確配置它。使用哪個編輯器的主題很快就會引起爭議，但如果您剛剛開始，我建議您查看VS Code（如果您關心隱私，請查看VSCodium）。

VS Code 附帶了許多很酷的功能，例如Emmet 縮寫、智能感知、各種鍵盤快捷鍵和Git 集成。也有擴展的數百個（如果不是千人），您可以安裝自定義您的工作流程。

項目理念

在您的機器上安裝 VS Code 并承諾使用它。花一些時間研究您選擇的語言的流行擴展，并至少安裝其中三個。您還應該安裝Prettier并將其配置為在保存時格式化您的代碼，以及ESLint，它將在 VS Code 的控制臺中顯示 JavaScript linting 錯誤。對于獎勵積分，您可以打印出您平臺的鍵盤快捷鍵參考表，并嘗試每周記住兩個或三個快捷鍵。

進一步閱讀

作為參考，我會推薦Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers。這個最新的指南涵蓋了所有基本的 VS Code 組件，包括工作區的編輯功能、代碼重構和鍵綁定等高級功能，以及與 Grunt、Gulp、npm 和其他外部工具的集成。第二章，介紹你的用戶界面，以及第九章，與擴展工作，應該特別關注的。

2. 建立聯系表格

如果您正在構建 Web 應用程序，那么遇到 HTML 表單只是時間問題。它們是網絡體驗的重要組成部分，而且它們可能很復雜。例如，您需要使它們易于訪問，并且需要確保它們在不同的瀏覽器和較小的屏幕上都能很好地呈現。在不破壞其可用性的情況下始終如一地設計它們也可能是一個挑戰。

表單是訪問者訪問您網站的重要組成部分。即使您的訪客以您所提供的東西出售，破損甚至布局不當的表格也足以讓他們棄船。這意味著你失去了轉換。

項目理念

構建和設計聯系表單。專注于表單字段的對齊，突出的CTA，并確保表單在瀏覽器和設備上都能很好地預覽。嘗試包含各種表單控件，例如<select>元素和復選框，同時保持布局簡單優雅。

您可能還想將完成的表單上傳到CodePen，這是一個在線社區，用于測試和展示用戶創建的 HTML、CSS 和 JavaScript 代碼片段。在申請工作時，精心策劃的 CodePen 帳戶可能會用作迷你投資組合。

進一步閱讀

表單設計模式為不同類型的表單提供了十種方法——注冊表單、預訂表單、登錄表單等等。向專業人士學習，了解如何讓您的表單既吸引人又可供所有人使用。如果您正在尋找該項目的快速入門，我建議您閱讀第一章的第一部分，其中涵蓋了諸如標簽、占位符、樣式和輸入類型等內容。

3. 熟悉客戶端驗證

如果不了解 JavaScript，您將無法在 2020 年成為 Web 開發人員：它是世界上最流行的編程語言之一，坦率地說，它是一項必備技能。

在前端，它用于各種各樣的任務，例如為網頁制作交互式元素（滑塊、地圖、圖表、菜單、聊天小部件等），并通常增強用戶體驗。該語言的一個相當不錯的特性是它可以操縱DOM，為用戶提供有關操作的即時反饋，而無需重新加載頁面。這使網頁感覺更快速且響應更快。

項目理念

在這個項目中，您應該采用您在第二步中構建的聯系表單，并通過客戶端驗證對其進行擴充。

使用正確的輸入類型會讓你有很多方法，但也會嘗試添加一些自定義驗證。您應該以直觀的方式顯示錯誤消息并避免使用警報框。如果這一切聽起來有點太簡單了，為什么不添加一個提出問題的字段，以確保用戶不是機器人。

進一步閱讀

如果您是 JavaScript 編程領域的新手，或者只是想要快速簡單的桌面參考，請查看JavaScript：新手到 Ninja，第 2 版。這個 JavaScript 編碼的分步介紹將向您展示如何解決實際問題和開發更豐富的 Web 應用程序。您需要特別注意第八章，它向您展示了如何使用 JavaScript 與 HTML 表單交互。

4. 使用 Fixer API 制作貨幣轉換器

過去，JavaScript 被認為是一種玩具語言——適用于菜單和動畫，但不是很多。雖然在 2000 年代初可能就是這種情況，但在 2020 年，事實并非如此。

如今，整個應用程序都是用 JavaScript 編寫的。新的工具和框架的引入和開發速度很快，自 ES2015（又名 ES6）到來以來，語言本身發生了很大的變化。跟上這些變化很重要，并且很好地了解 JavaScript 的功能以及它在整個 Web 開發圖景中的位置。

項目理念

制作一個允許用戶將一種貨幣轉換為另一種貨幣的應用程序。用戶應輸入金額，選擇實際貨幣，選擇所需貨幣，然后應用程序應從Fixer API獲取匯率。用戶界面應動態更新，無需任何類型的頁面刷新。

盡可能使用現代 JavaScript 功能。使用 vanilla JavaScript 或React 之類的庫來完成項目以處理 UI 更新。

進一步閱讀

JavaScript：最佳實踐是一系列文章，這些文章著眼于現代 JavaScript 以及該語言如何演變以允許您編寫干凈、可維護和可重用的代碼。我建議閱讀“現代 JavaScript 應用程序剖析”、“使用現代 JavaScript 語法”和“現代 JavaScript 中的流控制”。

5. 設計您自己的投資組合網站

在您作為 Web 開發人員的職業生涯中，您可能會發現自己在同一個項目中與設計師一起工作。雖然設計和開發可以被視為獨立的學科，但牢牢掌握設計過程將緩解這種關系，并使您與同事保持良好的關系。

或者，您可能想作為一名自由職業者獨自完成項目，從設計到部署。在這種情況下，一個看起來一般的網站不會削減它。您需要為客戶提供引人注目但功能強大的設計，以幫助他們實現業務目標。

項目理念

設計你自己的作品集網站——你在互聯網上展示自己和展示你的技能的地方。花一些時間研究什么是好的投資組合設計，然后用鉛筆和紙或使用您選擇的線框圖工具模擬您自己的設計。

在設計方面，請注意布局、您將使用的顏色和排版。在內容方面，考慮您需要哪些頁面（提示：您可以包含聯系表格）以及如何展示您自己和您的作品。互聯網上有很多站點可以為您提供有關包含哪些內容的提示。

進一步閱讀

好的我明白了。設計很難。但這并不需要……

如果您在設計過程中苦苦掙扎，《美麗網頁設計原理》是一本很棒的書。它將引導您完成從概念到完成的示例設計，并在此過程中教您許多實用技能。

從第一章開始，閱讀什么是好的設計，然后從那里開始學習。就我個人而言，我在一周內從頭到尾閱讀了這本書，但您也可以在閑暇時深入了解其他章節并了解布局、顏色、紋理、排版和圖像。

6. 編寫您自己的投資組合網站

JavaScript 并不是唯一快速發展的技術；CSS 的世界也有很多變化。語言的進步意味著我們現在可以輕松地制作復雜的布局、在 CSS 代碼中聲明變量、創建動畫、有條件地應用 CSS（使用@supports）等等——在過去，我們會求助于黑客（或 JavaScript）來實現。

如果您在 2020 年編寫 CSS，您應該了解所有這些現代技術以及何時使用它們——尤其是用于創建布局的 Flexbox 和 CSS Grid。您還應該掌握現代 CSS 工具（例如Houdini）、預處理器和我們可以使用的豐富框架。

項目理念

在上一個項目中，您設計了自己的作品集網站。現在是時候動手編寫代碼了。使用現代 CSS 來布置站點，并花時間研究一些最近引入的度量單位，例如vw和vh。例如，如果您想包含全屏啟動圖像，這些將非常方便。

此外，包括您之前創建的聯系表單并使用 CSS 添加幾個最小動畫。例如，您可以在用戶將鼠標懸停或單擊時設置發送按鈕的動畫。

進一步閱讀

CSS Master，第 2 版向您展示了如何編寫更好、更高效的 CSS，以及如何利用前端開發人員可用的大量新的尖端 CSS 功能。您還將學習掌握可以改進工作流程的工具。

要特別注意的第五章，這將有助于您使用最近推出的創建復雜的布局multicolumn，Flexbox和Grid模塊。

7. 性能很重要！使用 Lighthouse 審核您的網站

如今，網站緩慢幾乎沒有任何借口。人們不耐煩。沒有人愿意等待 15 秒來加載您的高清圖像。您的用戶只想直接訪問您的內容。

即使你覺得一切正常，也不要忘記另一半是如何生活的。并非每個人都擁有配備 100Gbit 以太網連接的高端 MacBook Pro。您的許多訪問者將在智能手機上瀏覽您的網站，可能是在不穩定的 3G 網絡上。作為 Web 開發人員，您的工作是為所有訪問者提供他們的技術允許的最佳體驗。

項目理念

谷歌瀏覽器附帶了一個名為Lighthouse的出色工具，它對頁面的性能、可訪問性、最佳實踐和 SEO 進行審核。它將為您提供有關如何解決它發現的任何問題的各種提示。

您應該對新創建的投資組合網站運行此工具，并盡最大努力確保每個類別都處于綠色狀態。Lighthouse 將允許您為網站的移動版和桌面版生成報告。你應該檢查這兩個。

如果您尚未創建投資組合網站，請針對您擁有的其他網站運行它。

進一步閱讀

實用的簡短書籍Jump Start Web Performance提供建議、技巧和最佳實踐，以提高您網站的性能和響應能力。這些范圍從快速、五分鐘的配置更改到主要的網站大修。它詳細介紹了使用 Lighthouse以及一般的 Chrome DevTools運行審計。本書后面的章節將有助于解決審計強調的任何問題。

8. 了解您的終端

作為 Web 開發人員，命令行正在成為我們工作流程中越來越重要的一部分。我們使用它來從 npm 安裝包、測試 API 端點、將提交推送到 GitHub 等等。如果您可以向潛在雇主展示對命令行的熟悉程度，那無疑會增加您的機會。

能夠使用終端的另一個優點是它打開了編寫腳本的大門。這將允許您自動執行各種日常任務（例如文件操作或部署站點），從長遠來看，這可能會真正節省時間。

項目理念

安裝并熟悉Bash shell。這將成為 macOS 和許多 Linux 發行版的標準配置。在 Windows 上，您需要為 Linux 啟用稱為 Windows 子系統的功能，您可以在此處閱讀有關內容。

承諾使用 Bash 整整一周，并使用它來執行您可以執行的任何任務。這些可能包括瀏覽文件系統、處理文件、編輯文件、讀取日志、啟動服務或安裝程序。您還應該研究別名，這是常用命令的快捷方式。

提示：如果您已經對 Bash 感到滿意，您可能想嘗試使用 Zsh 作為替代方案。我進入這里。

進一步閱讀

如果離開舒適的 GUI 會讓您感覺不舒服，請查看Bash 快速入門指南。本書將為您全面介紹 Bash，讓您熟悉它的命令結構，并讓您快速掌握一些基本命令。

對于勇敢的人，本書后面的章節將向您介紹 shell 腳本，并演示即使是 shell 中的簡單編程結構也可以加速和自動化任何類型的日常命令行工作。

9. 將您的項目置于版本控制之下

現在我們已經掌握了一些終端知識，是時候看看Git——用于在開發過程中跟蹤源代碼更改的版本控制軟件。由于其分支功能，Git 使多人可以輕松地在一個項目上進行協作。如果您意識到自己無意中引入了一個錯誤，那么您也可以輕松地將代碼回滾到以前的狀態。

實際上，您申請的任何職位都希望您了解版本控制。現在是獲取這些知識的好時機。

項目理念

在您的機器上安裝 Git 并熟悉其基本命令。將您在項目四中創建的貨幣轉換器應用程序置于版本控制之下，然后創建一個GitHub帳戶并將其上傳給全世界（當然是從命令行）。

對于那些不熟悉 GitHub 的人來說，它是一個基于 Web 的平臺，開發人員可以在其中存儲他們的項目并與其他志同道合的開發人員進行互動。當您來申請工作時，擁有一個可以為潛在雇主指明方向的 GitHub 帳戶將是有利的。

進一步閱讀

Jump Start Git針對幾乎沒有或沒有 Git 經驗的初級開發人員，將引導您完成設置，以及構成成功 Git 工作流程的基本命令和步驟。

請務必查看第二章，其中介紹了遠程存儲庫以及如何將您的代碼推送到 GitHub。

10. 構建你的第一個節點應用程序

正如我之前提到的，JavaScript 無處不在。它支持大多數（如果不是全部）前端應用程序，但它也可以以Node.js的名義在服務器上運行。在進入當今的就業市場時，至少了解如何在服務器上編寫 JavaScript（包括 Node 的執行模型）是一項理想的技能。

項目理念

我們將對此采取稍微不同的策略，因為我想向您介紹我的教程“使用 Node、Bootstrap 和 MongoDB 構建簡單的初學者應用程序”。

從頭開始，我演示了如何使用 Node.js 構建一個簡潔的 Web 應用程序，但不是關注最終結果，而是關注您在構建真實世界時可能遇到的一系列事情應用程序。這些包括路由、模板、處理表單、與數據庫交互甚至基本身份驗證。

對于這個項目，您應該按照我的教程進行操作，調整最終結果以滿足您的需求。您還應該將您的代碼置于版本控制之下并將其推送到您的 GitHub 個人資料。

進一步閱讀

與其說是閱讀，不如說是一種資源：SitePoint 論壇。這是一個潛在的棘手項目，因此如果您遇到困難，請隨時過來尋求幫助。

結論

這樣你就知道了——幫助你在 2020 年找到第一份開發工作的十項技能。雖然不是詳盡無遺，但我希望這篇文章能幫助你在不斷變化的 Web 開發世界中定位自己，并給你一些想法接下來要學什么。

并且不要忘記，閱讀教程很棒，但不能替代實際構建的東西。一個活躍的 GitHub 帳戶會給你的下一個雇主留下更深刻的印象，而不是你讀過的內容列表。