如何成為一名Web前端開發(fā)人員?Web開發(fā)人員負(fù)責(zé)許多任務(wù)，從收集需求到設(shè)計(jì)網(wǎng)站，處理網(wǎng)站的后端部分，并使其成功地為用戶服務(wù)。對(duì)于他們來說，保持在Web開發(fā)游戲之上的挑戰(zhàn)變得越來越大。今天，小編給大家講講成為Web開發(fā)人員的完整地圖。

如何成為一名Web前端開發(fā)人員?

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

我們將討論很多技術(shù)，趨勢(shì)和工具，但我們不希望您不知所措，因此你需要首先決定要成為一名Web開發(fā)人員要做什么，因?yàn)檫@將幫助你選擇合適的工具。和學(xué)習(xí)技術(shù)。

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

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

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

你可以成為其他公司的顧問。

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

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

從上述感興趣或目標(biāo)的領(lǐng)域，你可以選擇適用于你的目標(biāo)的正確工具和技術(shù)。如果你的目標(biāo)是成為一名前端開發(fā)人員，則可以選擇前端開發(fā)的工具和技術(shù)。后端和全棧開發(fā)也是如此。

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

計(jì)算機(jī)和操作系統(tǒng)：

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

文本編輯器/ IDE：

毫無疑問，VSCode適用于大多數(shù)情況和大多數(shù)語言。它具有良好的性能，出色的擴(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也取得了長足的進(jìn)步，其中的一些好東西不在chrome瀏覽器中。兩種瀏覽器都有出色的開發(fā)工具，可以對(duì)Web開發(fā)中的問題進(jìn)行故障排除。

終端：

您將使用一些系統(tǒng)命令來使用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ì)來制作圖像，徽標(biāo)或草圖，但是如果您是自由職業(yè)者，則可能必須學(xué)習(xí)Adobe XD，Photoshop，Sketch或Figma。

3、從HTML和CSS開始

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

HTML5(語義元素，屬性，文檔類型等)

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ì)或布局非常重要。讓我們來看一些重要的主題。

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

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

流體寬度

雷姆單位

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

5、自定義可重用CSS組件

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

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

你可以使用變量，嵌套，條件語句來減少CSS的重復(fù)并提高其效率。你還可以為每個(gè)可重用組件創(chuàng)建單獨(dú)的Saas文件。Sass確實(shí)節(jié)省了很多時(shí)間，所以你應(yīng)該在2020年學(xué)習(xí)它。