這是一篇為任何想開始前端開發(fā)而沒有編程背景的人寫的文章。最終目標(biāo)是幫助愛好者了解軟件開發(fā)的蓬勃世界，并使他們能夠在這個擁擠的生態(tài)系統(tǒng)中找到自己的方向。其結(jié)果是一個開始學(xué)習(xí)過程的路線圖。

介紹

前段時間，有幾個朋友問我如何成為一名前端開發(fā)人員。我向他們介紹了要走的路，還給了他們一些關(guān)鍵字，例如Git、HTML、CSS等。但后來我發(fā)現(xiàn)，對于沒有任何編程背景的人來說，進(jìn)入這個行業(yè)是有障礙的。他們應(yīng)該首先熟悉生態(tài)系統(tǒng)。

他們很快就會被大量的教育材料所淹沒，對于每個關(guān)鍵字，谷歌都會返回大量的結(jié)果。就像你想買你的第一輛車，有很多不同的車型，有不同的選擇，價格相同。如果你沒有得到任何關(guān)于你的目標(biāo)規(guī)格的建議，你很快就會感到困惑，要么選擇壞的，要么離開商店。

在本文中，我將嘗試為您提供軟件開發(fā)生態(tài)系統(tǒng)的觀點(diǎn)和概述。我還將為您提供一些有用的關(guān)鍵字，以及一些指向?qū)W習(xí)材料和博客文章的鏈接。最后，你會帶著一張學(xué)習(xí)路線圖離開。

在開始之前，我想再次提醒一下，前端開發(fā)是最擁擠的開發(fā)者社區(qū)之一，所以不要害怕大量奇怪的名稱、庫和技術(shù)。目標(biāo)是使您免于被人群淹沒，并為您提供可以幫助您找到方向的知識。

網(wǎng)絡(luò)基礎(chǔ)

讓我們從網(wǎng)頁由什么組成的問題開始。

將網(wǎng)站想象成一本包含一些頁面的書，一本高級書，其中每一頁都由圖像、文本、視頻、音頻和一個名為鏈接的特殊元素組成。在網(wǎng)頁上，我們可以將所有這些元素放在一起，將它們設(shè)置為帶有字體和顏色的書頁，也可以將它們放在不同的布局中。

正是鏈接使網(wǎng)頁不同于一本書。鏈接的作用是幫助您以非順序的順序在頁面之間導(dǎo)航。鏈接可以將訪問者帶到網(wǎng)站的任意頁面。您可以根據(jù)每頁上的鏈接在頁面之間跳轉(zhuǎn)，甚至可以跳轉(zhuǎn)到其他書籍的頁面。

網(wǎng)頁元素

你在網(wǎng)頁上看到的幾乎所有其他東西都是這些基本元素的組合：

• 文本
• 圖片
• 聲音
• 視頻
• 鏈接（導(dǎo)航元素）

網(wǎng)站的目的是提供信息以及特定于業(yè)務(wù)的用戶體驗(yàn)。

網(wǎng)頁開發(fā)技術(shù)

支持 Web 開發(fā)的主要技術(shù)有以下三種：

• HTML（超文本標(biāo)記語言）
• CSS（級聯(lián)樣式表）
• JavaScript（瀏覽器理解的動態(tài)編程語言）

HTML

“超文本標(biāo)記語言 (HTML) 是設(shè)計用于在Web 瀏覽器中顯示的文檔的標(biāo)準(zhǔn)標(biāo)記語言。它可以通過級聯(lián)樣式表(CSS) 等技術(shù)和 JavaScript 等腳本語言來輔助?！?—維基百科

HTML 是一種標(biāo)記語言。這意味著您通過稱為標(biāo)簽的 HTML 元素創(chuàng)建頁面內(nèi)容。每個標(biāo)簽都有自己的特定屬性和行為。

這是HTML 標(biāo)記[1]列表。

CSS

HTML 用于構(gòu)建頁面內(nèi)容。在 CSS 的幫助下，可以根據(jù)布局、顏色、字體和樣式設(shè)置頁面樣式。使用 CSS，我們可以制作可維護(hù)和可擴(kuò)展的樣式。

JavaScript

JavaScript 是一種瀏覽器可以理解的動態(tài)腳本語言。在 JavaScript 的幫助下，網(wǎng)頁可以進(jìn)行交互，例如當(dāng)您單擊按鈕時，您可以向用戶顯示特定數(shù)據(jù)。想想你以前見過的所有登錄按鈕。JavaScript 支持它們以啟用它們的功能和交互。

所以現(xiàn)在我們知道，借助三種技術(shù)，我們可以構(gòu)建網(wǎng)頁。我們將在進(jìn)一步的步驟中研究如何做到這一點(diǎn)。

編寫代碼使其生效的過程

在這一點(diǎn)上，我將為您提供整個軟件開發(fā)過程的廣泛而簡單的視角，從您開始編寫第一行代碼到您將 Web 應(yīng)用程序上線。這個過程在任何軟件開發(fā)平臺上都有所相同，包括 Android 和 iOS。

為您提供此概述的目的是表明軟件開發(fā)過程不僅僅是編寫代碼。在其中，您會聽到很多與流程其他部分相關(guān)的奇怪和新詞。

軟件開發(fā)過程非常重要

記住這個事實(shí)：整個過程是迭代的。每次將應(yīng)用程序上線時，您都應(yīng)該監(jiān)控用戶或利益相關(guān)者的請求和反饋，然后計劃更改。

源代碼控制

如果您在團(tuán)隊(duì)中工作，甚至單獨(dú)工作，您需要了解的一件事就是源代碼控制。軟件開發(fā)發(fā)生在迭代中，并且在每次迭代中，您都會添加新功能或修復(fù)錯誤。為了跟蹤源代碼的變化，我們需要一種機(jī)制。源代碼控制工具是跟蹤代碼庫更改并允許團(tuán)隊(duì)中代碼庫協(xié)作的方法。

Git[2] 是開發(fā)人員最常用的源代碼控制工具之一。正如Web Development Glossary[3]中所述，“Git 是一個分布式版本控制系統(tǒng)，用于在開發(fā)過程中跟蹤源代碼的更改。它是為協(xié)調(diào)程序員之間的工作而設(shè)計的，但它可用于跟蹤任何文件集的更改。它的目標(biāo)包括速度、數(shù)據(jù)完整性以及對分布式非線性工作流的支持。”

源代碼控制機(jī)制

軟件開發(fā)生態(tài)系統(tǒng)

這是一個有趣的話題。我們將了解一些重要的平臺，這些平臺可以幫助您與他人交流、學(xué)習(xí)和分享您的挑戰(zhàn)。技術(shù)行業(yè)，尤其?是軟件行業(yè)的溝通對所有參與者都至關(guān)重要。科技行業(yè)發(fā)展迅速，其中一個原因是該行業(yè)的溝通和知識共享精神。

在本主題中，我將為您提供一些指向技術(shù)知識中心的鏈接，尤其是那些用于前端開發(fā)的知識中心。

W3Schools[4]

W3Schools 是開始學(xué)習(xí) JavaScript、HTML 和 CSS 的良好參考之一。它還涵蓋了一些其他主題，例如 React 和 SQL。這是開始使用命名主題的好地方。

Stack Overflow[5]

如果您對特定案例有疑問，可以在 Stack Overflow 中找到答案。這是一個網(wǎng)站，任何在開發(fā)過程中遇到他們不知道如何解決的問題的開發(fā)人員都會首先查看問題和答案。這是一個知識共享和交流平臺。我想其他行業(yè)的人會羨慕我們擁有這個了不起的平臺。

NPM JS[6]

如果您正在尋找任何 JavaScript 或 TypeScript 庫或工具，這里就是將它們保存為存儲庫的地方。將來，您將經(jīng)常使用該網(wǎng)站。這是一個參考和存儲庫，您將使用它來構(gòu)建自己的解決方案并避免重新發(fā)明輪子。

軟件開發(fā)通過將大問題分解為小問題、使用小塊解決方案（代碼）并將它們組合起來解決更大的問題來解決問題。

GitHub[7]

有幾個云源控制平臺，但這個很特別，因?yàn)槟梢哉业酱罅苛餍械拈_源項(xiàng)目和庫。此外，幾乎所有的 npm 包源代碼都托管在 GitHub 上。將 GitHub 視為共享代碼的平臺。

Udemy[8]

Udemy 是科技行業(yè)的教育平臺之一，可幫助開發(fā)人員提高技能。這個平臺上有大量與前端開發(fā)相關(guān)的不同課程，您可以瀏覽和選擇。 還有其他平臺，如Coursera、Edx、Lynda等，您可以在其中找到與前端開發(fā)相關(guān)的課程。

hackerrank[9]

該平臺通過引入您需要找到答案的挑戰(zhàn)來幫助您提高編程技能。這些挑戰(zhàn)幫助你學(xué)習(xí)編程、算法和數(shù)據(jù)結(jié)構(gòu)。這是一個非常有用的平臺，可以提高您的編程技能。

前端開發(fā)技術(shù)

在這里，我們將看看用于前端開發(fā)的不同技術(shù)。實(shí)際上，最重要的是要學(xué)習(xí) JavaScript。其余的是可以簡化您的開發(fā)的庫或框架，但最終，它們是基于瀏覽器理解的語言 JavaScript 的庫和框架。

請記住，JavaScript 是最重要的。學(xué)習(xí) JavaScript 極大地幫助您更好地閱讀和理解庫和框架。

你應(yīng)該學(xué)習(xí)的 JavaScript 概念：

• Lexical Structure
• Expressions
• Types
• Variables
• Functions
• this
• Arrow functions
• Loops
• Scopes
• Arrays
• Template literals
• Semicolons
• Strict mode
• ECMAScript 6, 2016, 2017
• JSON
• Nodejs. 它是在服務(wù)器或任何獨(dú)立于瀏覽器的機(jī)器上運(yùn)行 JavaScript 的環(huán)境。
• HTTP 請求和響應(yīng)模型和 REST API 概念。
• Working with files and machine resources with JavaScript
• async/await and Modules
• npm

接下來要學(xué)習(xí)的是熟悉HTML[10]和CSS3[11]。HTML 和 CSS 組合是您工作的視覺方面。嘗試了解它們的結(jié)構(gòu)和要領(lǐng)。其余的是不同類型的實(shí)現(xiàn)，如果您了解 HTML 和 CSS，對您來說會很容易。

學(xué)習(xí)JQuery[12]，這是一個 JavaScript 庫，旨在簡化 HTML DOM 樹的遍歷和操作，以及事件處理、CSS 動畫和 Ajax。它是免費(fèi)的開源軟件。

現(xiàn)代前端庫和框架

注意：以下定義取自維基百科和其他在線資源。

• AngularJs “AngularJS 是一個基于 JavaScript 的開源前端 Web 框架，主要由 Google 和個人社區(qū)維護(hù)。它是最流行的前端開發(fā)框架之一?！?—維基百科。
• ReactJs “ React 是一個用于構(gòu)建用戶界面的 JavaScript 庫。它由 Facebook 和個人開發(fā)者社區(qū)維護(hù)?！?—維基百科。 ReactJs 也是最受歡迎的之一，周圍有一個很大的社區(qū)。
• VueJs “Vue 是一個開源的 Model-View-ViewModel JavaScript 框架，用于構(gòu)建用戶界面和單頁應(yīng)用程序。它由 Evan You 創(chuàng)建，由他和來自 Netlify 和 Netguru 等不同公司的其他活躍核心團(tuán)隊(duì)成員維護(hù)?！?—火星媒體

首先，只關(guān)注一個。作為一名初級開發(fā)人員，你有很多工作機(jī)會——但我再次強(qiáng)調(diào) JavaScript，因?yàn)樗悄阒R的核心結(jié)構(gòu)。

要找到一份初級 Web 開發(fā)人員的工作，首先，請?jiān)L問 LinkedIn 等網(wǎng)站。搜索與前端開發(fā)相關(guān)的工作，看看最需要哪些關(guān)鍵字和庫，然后去學(xué)習(xí)它們。

如何選擇合適的工具

您需要一些工具來編寫、執(zhí)行和調(diào)試代碼。以下是我對基本工具的建議。（注：以下定義取自維基百科和其他在線資源。）

VS Code[13]

“Visual Studio Code 是微軟為 Windows、Linux 和 macOS 開發(fā)的源代碼編輯器。它包括嵌入式 Git 和對調(diào)試、語法高亮顯示、智能代碼完成、片段和代碼重構(gòu)的支持?！?—維基百科。

ZSH[14]

“Z shell是一個 Unix shell 或 CLI，可以用作交互式登錄 shell 和 shell 腳本的命令解釋器。ZSH 支持插件并為您提供了許多有助于輕松使用 CLI 的功能”——維基百科。

Postman[15]

“Postman 是一個流行的 API 客戶端，它使開發(fā)人員可以輕松地創(chuàng)建、共享、測試和記錄 API。這是通過允許用戶創(chuàng)建和保存簡單和復(fù)雜的 HTTP/s 請求以及讀取他們的響應(yīng)來完成的。” — DZone。

這些是必需品，但肯定有大量的瀏覽器插件和 VS Code 可以簡化您的開發(fā)生活。

計劃和路線圖

為了實(shí)現(xiàn)一個目標(biāo)，你應(yīng)該有一個計劃和一個路線圖。在本節(jié)中，我將嘗試為您提供成為前端開發(fā)人員的最低路線圖。您可以在兩個月或一年內(nèi)完成路線圖——這完全取決于您。你在這個職業(yè)發(fā)展上投入的時間是一個關(guān)鍵因素。

你可以通過開始 Udemy ReactJs 課程來學(xué)習(xí)前端開發(fā)，但是在求職面試中，你會遇到很多新的和未知的問題和關(guān)鍵詞。我的目標(biāo)是幫助你作為一名真正的開發(fā)人員從根本上學(xué)習(xí)前端開發(fā)。還要記住，要學(xué)習(xí)一些東西，你需要做一些事情，所以你需要從零開始編寫代碼。

學(xué)習(xí)資料

以下是每個主題的頂級課程和教程列表。那里有大量的內(nèi)容，但這些都是好的開始。只需從每個主題中選擇一兩個即可。

HTML + CSS

• https://www.youtube.com/user/DesignCourse 一個很棒的 youtube 頻道，用于討論和教授前端開發(fā)
• https://www.udemy.com/course/web-design-for-beginners-real-world-coding-in-html-css/ HTML 和 CSS 的好評初學(xué)者課程
• https://egghead.io/playlists/css-fundamentals-238ce697 適合初學(xué)者的 CSS
• https://www.coursera.org/specializations/web-design HTML 和 CSS 的另一門好課程

JavaScript

• https://www.udemy.com/course/javascript-basics-for-beginners/
• https://www.udemy.com/course/javascript-for-beginners-introduction-learn-fast-easy/
• https://www.udemy.com/course/modern-javascript/
• https://www.coursera.org/learn/javascript-jquery-json
• https://www.edx.org/course/javascript-introduction
• https://www.edx.org/course/programming-for-the-web-with-javascript

VS Code

• https://egghead.io/browse/tools/vscode 這是您了解更多關(guān)于 IDE 和 VsCode 的好地方。

Git

• https://www.udemy.com/course/git-going-fast/
• https://gist.github.com/nicowilliams/a6e5c9131767364ce2f4b3996549748d
• https://egghead.io/browse/tools/git
• https://www.udemy.com/course/git-complete/

NodeJS

• https://www.w3schools.com/nodejs/default.asp
• https://nodejs.dev/learn/introduction-to-nodejs
• https://www.youtube.com/watch?v=TlB_eWDSMt4
• https://www.youtube.com/user/programmingwithmosh
• https://www.udemy.com/course/the-complete-nodejs-developer-course-2/

npm

• https://www.udemy.com/course/understanding-npm/
• https://www.tutorialspoint.com/nodejs/nodejs_npm.htm
• https://www.w3schools.com/nodejs/nodejs_npm.asp

HTTP 協(xié)議

• https://egghead.io/courses/understand-the-basics-of-http

ReactJS

• https://reactjs.org/tutorial/tutorial.html 這是最好的起點(diǎn)。React 網(wǎng)站有一個很棒的簡單教程來教授基礎(chǔ)知識。
• https://reactjs.org/community/courses.html 然后看看這個。
• https://www.w3schools.com/react/
• https://egghead.io/courses/the-beginner-s-guide-to-react

Chrome 開發(fā)者工具

• https://egghead.io/browse/tools/chrome-devtools

GitHub

• https://egghead.io/browse/platforms/github

結(jié)論

寫這篇文章的動機(jī)是幫助沒有編程背景的熱心人學(xué)習(xí)軟件開發(fā)，尤其是 Web 前端開發(fā)。這里討論的內(nèi)容是您在學(xué)習(xí)任何庫或框架之前應(yīng)該學(xué)習(xí)的基本知識。在選擇任何高級教育材料之前，您需要非常了解 JavaScript + HTML + CSS。然后一切都變得容易多了，你會很快學(xué)會任何前端框架。

謝謝閱讀！

引用鏈接

[1] HTML 標(biāo)記: https://www.w3schools.com/TAGS/default.ASP
[2] Git: https://git-scm.com/
[3] Web Development Glossary: https://books.google.ca/books?id=nYjhDwAAQBAJ&pg=PT101&lpg=PT101&dq=s+goals+include+speed,+data+integrity,+and+support+for+distributed,+non-linear+workflows.&source=bl&ots=8iV6gquLBx&sig=ACfU3U2E-OmUydwQiMArK3yDjR7M8-Zj-w&hl=en&sa=X&ved=2ahUKEwib0JWuqM_pAhWRVN8KHYeYBoAQ6AEwAHoECAkQAQ#v=onepage&q=s%20goals%20include%20speed%2C%20data%20integrity%2C%20and%20support%20for%20distributed%2C%20non-linear%20workflows.&f=false

[4] W3Schools: https://www.w3schools.com/
[5] Stack Overflow: https://stackoverflow.com/
[6] NPM JS: https://www.npmjs.com/
[7] GitHub: https://github.com/
[8] Udemy : https://www.udemy.com/
[9] hackerrank: https://www.hackerrank.com/
[10] HTML: https://www.w3schools.com/html/
[11] CSS3: https://css-tricks.com/
[12] JQuery: https://jquery.com/
[13] VS Code: https://code.visualstudio.com/
[14] ZSH: https://ohmyz.sh/
[15] Postman: https://www.postman.com/