如何成為前端開發(fā)工程師?

Web開發(fā)人員負(fù)責(zé)許多任務(wù)，從收集需求到設(shè)計(jì)網(wǎng)站，處理網(wǎng)站的后端部分，并使其成功地為用戶服務(wù)，如何成為前端開發(fā)工程師呢？

1、首先確定你的目標(biāo)或道路

成為Web開發(fā)人員的原因有很多，下面列出了一些選擇因素：

你想作為一名Web開發(fā)人員在一家公司工作，這是最普遍的原因。

你想以自由開發(fā)人員的身份來(lái)開始自己的業(yè)務(wù)或代理。

你可以成為其他公司的顧問(wèn)。

你可以創(chuàng)建自己的應(yīng)用來(lái)賺錢。

編碼是你的業(yè)余愛好。

從上述感興趣或目標(biāo)的領(lǐng)域，你可以選擇適用于你的目標(biāo)的正確工具和技術(shù)。

2、Web開發(fā)的基本工具和軟件

計(jì)算機(jī)和操作系統(tǒng)：如果沒(méi)有計(jì)算機(jī)和操作系統(tǒng)，則無(wú)法編寫代碼。要學(xué)習(xí)Web開發(fā)，你不需要任何高端計(jì)算機(jī)，你可以使用任何類型的中型筆記本電腦或臺(tái)式機(jī)。對(duì)于操作系統(tǒng)，可以使用適合你的MacOS，Windows（新版本）或Linux。

文本編輯器/ IDE：毫無(wú)疑問(wèn)，VSCode適用于大多數(shù)情況和大多數(shù)語(yǔ)言。它具有良好的性能，出色的擴(kuò)展性，內(nèi)置的終端功能以及大量功能。在2019年StackOverFlow調(diào)查中，VSCode也是開發(fā)人員的首 選。你還可以選擇其他一些不錯(cuò)的選擇，例如Sublime Text或Atom。如果我們談?wù)揑DE，那么是Visual Studio（ASP.net或C＃），Eclipse和Netbeans（Java）。是不錯(cuò)的選擇。

Web瀏覽器：大多數(shù)開發(fā)人員的首 選是Chrome或Firefox。Chrome速度很快，并且使用V8引擎（JavaScript引擎）。Firefox也取得了長(zhǎng)足的進(jìn)步，其中的一些好東西不在chrome瀏覽器中。兩種瀏覽器都有出色的開發(fā)工具，可以對(duì)Web開發(fā)中的問(wèn)題進(jìn)行故障排除。

終端：你將使用一些系統(tǒng)命令來(lái)使用CLI進(jìn)行很多工作。你可以將默認(rèn)或第三方終端用于你的Web開發(fā)項(xiàng)目。Bash，Zsh，Powershell，Git Bash，iTerm，Hyper這些都是可以使用的選項(xiàng)。

設(shè)計(jì)（可選）：并不是每個(gè)人都需要學(xué)習(xí)。在公司中，有專門的團(tuán)隊(duì)來(lái)制作圖像，徽標(biāo)或草圖，但是如果你是自由職業(yè)者，則可能必須學(xué)習(xí)Adobe XD，Photoshop，Sketch或Figma。

3、從HTML和CSS開始

HTML和CSS是Web開發(fā)的基本構(gòu)建塊。無(wú)論你的Web應(yīng)用程序有多先進(jìn)，或者使用什么框架和后端語(yǔ)言，都必須使用HTML和CSS構(gòu)建前端應(yīng)用程序。因此，這是在Web開發(fā)中要學(xué)習(xí)的第 一件事。

HTML5（語(yǔ)義元素，屬性，文檔類型等）

CSS基礎(chǔ)知識(shí)顏色，字體，位置，盒子模型等。

CSS Grid和Flexbox對(duì)齊內(nèi)容或創(chuàng)建列。

CSS自定義屬性

4、響應(yīng)式布局

你的應(yīng)用程序應(yīng)該在所有類型的設(shè)備（例如智能手機(jī)，平板電腦，臺(tái)式機(jī)，iPad或任何其他屏幕尺寸的設(shè)備）上都可以查看和使用。因此，了解創(chuàng)建響應(yīng)式設(shè)計(jì)或布局非常重要。讓我們來(lái)看一些重要的主題。

了解如何設(shè)置視口

媒體查詢不同的屏幕尺寸。

流體寬度

雷姆單位

移動(dòng)優(yōu)先

5、自定義可重用CSS組件

與其依賴大型的CSS框架（如Bootstrap），不如創(chuàng)建自己的模塊化，可重用的CSS組件以在項(xiàng)目中使用。如果你構(gòu)建自己的定制設(shè)計(jì)，則無(wú)需導(dǎo)入完整的庫(kù)。你創(chuàng)建只需要特定UI的組件。

的新趨勢(shì)最近還出現(xiàn)了有助于更有效地編寫CSS代碼的代碼。如果你已經(jīng)了解CSS，那么你無(wú)需在學(xué)習(xí)Saas上花費(fèi)很多精力。Saas是CSS預(yù)處理程序，可為標(biāo)準(zhǔn)CSS添加更多功能并使其更加高效。

你可以使用變量，嵌套，條件語(yǔ)句來(lái)減少CSS的重復(fù)并提高其效率。你還可以為每個(gè)可重用組件創(chuàng)建單獨(dú)的Saas文件，Sass確實(shí)節(jié)省很多時(shí)間。

6、CSS框架

學(xué)習(xí)CSS框架的普及程度不如去年，但對(duì)于不擅長(zhǎng)設(shè)計(jì)的開發(fā)人員而言，仍然非常相關(guān)或有用。有許多流行的CSS框架可供使用，其中一些如下。

Bootstrap是最 流行的CSS框架。學(xué)習(xí)引導(dǎo)程序也有助于學(xué)習(xí)其他框架。

Tailwind CSS是其他正在流行的框架，與其他框架幾乎沒(méi)有什么不同。它是一組實(shí)用程序類，因此你可以創(chuàng)建自己的按鈕和其他看起來(lái)與其他按鈕確實(shí)不同的東西。它們也是高度可定制的。

7、前端必須語(yǔ)言：JavaScript

學(xué)習(xí)HTML和CSS之后，接下來(lái)需要學(xué)習(xí)的是Vanilla Javascript。對(duì)開發(fā)人員來(lái)說(shuō)，掌握javascript基本知識(shí)非常重要。你將在服務(wù)器端語(yǔ)言（例如PHP，Python或ASP.net）中使用大量javascript，并且如果你想與React，Angular，NodeJS，Vue或任何其他javascript框架或庫(kù)一起使用，則非常需要學(xué)習(xí)這種語(yǔ)言。

如果你想轉(zhuǎn)向React，Vue，Angular或其他框架，現(xiàn)代JS（ES6）概念對(duì)于學(xué)習(xí)非常重要。

8、一些重要工具

Git（版本控制）和Github是你肯定會(huì)在2020年學(xué)習(xí)的最 受歡迎的工具。Git在與其他開發(fā)人員協(xié)作和管理代碼方面有很多幫助。你還可以選擇其他一些選項(xiàng)，例如GitLab，Bitbucket和其他一些選項(xiàng)。

了解如何使用瀏覽器開發(fā)工具。無(wú)論是chrome還是firefox，你都應(yīng)該知道如何使用不同的選項(xiàng)卡，例如元素選項(xiàng)卡，javascript控制臺(tái)，用于請(qǐng)求和響應(yīng)的網(wǎng)絡(luò)選項(xiàng)卡，應(yīng)用程序選項(xiàng)卡以及其他用于不同目的的選項(xiàng)卡。

大多數(shù)IDE或文本編輯器都具有添加擴(kuò)展名或插件的功能，這對(duì)提高生產(chǎn)力和構(gòu)建Web應(yīng)用程序非常有幫助。例如，Visual Studio代碼中的VSCode擴(kuò)展可幫助下載擴(kuò)展，例如實(shí)時(shí)服務(wù)器或?qū)崟r(shí)saas編譯器以與React一起使用。

9、基本部署

此時(shí)，一旦你知道應(yīng)該為前端開發(fā)學(xué)習(xí)什么工具或技術(shù)，就需要知道如何在Internet上部署前端網(wǎng)站。如果你正在為小型企業(yè)構(gòu)建一些小型應(yīng)用程序，登錄頁(yè)面或個(gè)人站點(diǎn)，則**學(xué)習(xí)AWS或DevOps，僅因?yàn)樗鼈兙哂泄鉂珊托鲁薄Ｄ銓⑹故虑樽兊酶訌?fù)雜而不是簡(jiǎn)單。你需要在2020年學(xué)習(xí)一些部署工具和步驟。

域注冊(cè)（Namecheap，Google等）

托管托管（InMotion，Hostgator，Bluehost等）

靜態(tài)主機(jī)（Netlify，Github頁(yè)面）

SSL證書。

FTP，SFTP（文件傳輸協(xié)議）非常適合小型應(yīng)用程序。

SSH（安全外殼），用于高級(jí)應(yīng)用程序。

CLI和Git。

到目前為止，我們討論的任何工具，技術(shù)趨勢(shì)或步驟都是前端開發(fā)的一部分。你尚不知道該框架，但可以為個(gè)人和小型企業(yè)構(gòu)建網(wǎng)站，也可以構(gòu)建適合移動(dòng)設(shè)備的布局。你還可以使用到目前為止討論的工具或技術(shù)來(lái)部署小型應(yīng)用程序或項(xiàng)目。如果你想申請(qǐng)工作，那么學(xué)習(xí)一些前端框架（如React，Vue或Angular）將是很棒的。