weweb前端知乎前端開(kāi)發(fā)需要掌握什么技術(shù)（web前端知乎）

投稿用戶 — Fri, 19 Aug 2022 10:11:54 +0000

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

介紹

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

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

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

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

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

讓我們從網(wǎng)頁(yè)由什么組成的問(wèn)題開(kāi)始。

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

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

網(wǎng)頁(yè)元素

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

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

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

網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)

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

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

HTML

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

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

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

CSS

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

JavaScript

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

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

編寫代碼使其生效的過(guò)程

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

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

軟件開(kāi)發(fā)過(guò)程非常重要

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

源代碼控制

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

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

源代碼控制機(jī)制

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

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

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

W3Schools[4]

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

Stack Overflow[5]

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

NPM JS[6]

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

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

GitHub[7]

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

Udemy[8]

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

hackerrank[9]

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

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

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

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

你應(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 請(qǐng)求和響應(yīng)模型和 REST API 概念。
Working with files and machine resources with JavaScript
async/await and Modules
npm

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

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

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

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

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

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

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

如何選擇合適的工具

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

VS Code[13]

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

ZSH[14]

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

Postman[15]

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

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

計(jì)劃和路線圖

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

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

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

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

HTML + CSS

https://www.youtube.com/user/DesignCourse 一個(gè)很棒的 youtube 頻道，用于討論和教授前端開(kāi)發(fā)
https://www.udemy.com/course/web-design-for-beginners-real-world-coding-in-html-css/ HTML 和 CSS 的好評(píng)初學(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)站有一個(gè)很棒的簡(jiǎn)單教程來(lái)教授基礎(chǔ)知識(shí)。
https://reactjs.org/community/courses.html 然后看看這個(gè)。
https://www.w3schools.com/react/
https://egghead.io/courses/the-beginner-s-guide-to-react

Chrome 開(kāi)發(fā)者工具

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

GitHub

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

結(jié)論

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

謝謝閱讀！

引用鏈接

[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/

精品无码久久午夜福利,色婷婷人成影院WWW,av无码av在线a∨天堂毛片

weweb前端 知乎前端開(kāi)發(fā)需要掌握什么技術(shù)（web前端 知乎）

介紹

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

網(wǎng)頁(yè)元素

網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)

HTML

CSS

JavaScript

編寫代碼使其生效的過(guò)程

源代碼控制

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

W3Schools[4]

Stack Overflow[5]

NPM JS[6]

GitHub[7]

Udemy[8]

hackerrank[9]

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

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

如何選擇合適的工具

VS Code[13]

ZSH[14]

Postman[15]

計(jì)劃和路線圖

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

HTML + CSS

JavaScript

VS Code

Git

NodeJS

npm

HTTP 協(xié)議

ReactJS

Chrome 開(kāi)發(fā)者工具

GitHub

結(jié)論

引用鏈接

weweb前端知乎前端開(kāi)發(fā)需要掌握什么技術(shù)（web前端知乎）