1. Web前端工程師的入門指南-教你如何成為一名web前端開發工程師
今天小編要跟大家分享的文章是關於Web前端工程師的入門指南-教你如何成為一名web前端開發工程師。經過如此多的試驗和測試，而不是說你從頭開始創建了所有內容，接著，你在網頁上創建了第一個登錄表單時，你感覺如何?經過了多次更改後，將布局分配給第一個Web應用程序時感覺如何?當成功處理了數千個用戶的操作時，你感覺如何？
大多數Web開發人員都經歷了上述所有階段，最初可能會對其中某些感到沮喪，但是當他們看到自己的網站正在運行並且人們在世界各地使用它時，總體感覺確實令人興奮和驚奇。Web開發人員負責許多任務，從收集需求到設計網站，處理網站的後端部分，並使其成功地為用戶服務。每年，行業中都會涌現出新技術和工具，以提高開發人員的工作效率，並為用戶提供更好的網站。對於他們來說，保持在Web開發游戲之上的挑戰變得越來越大。今天，我們將討論要在2020年成為Web開發人員的完整地圖。這將是針對所有開發人員(前端，後端和全棧)的實用指南。
1、首先確定你的目標或道路
我們將討論很多技術，趨勢和工具，但我們不希望您不知所措，因此你需要首先決定要成為一名Web開發人員要做什麼，因為這將幫助你選擇合適的工具。和學習技術。成為Web開發人員的原因有很多，下面列出了一些選擇因素：
·你想作為一名Web開發人員在一家公司工作，這是最普遍的原因。
·你想以自由開發人員的身份來開始自己的業務或代理。
·你可以成為其他公司的顧問。
·你可以創建自己的應用來賺錢。
·編碼是你的業余愛好。
從上述感興趣或目標的領域，你可以選擇適用於你的目標的正確工具和技術。如果你的目標是成為一名前端開發人員，則可以選擇前端開發的工具和技術。後端和全棧開發也是如此。
2、Web開發的基本工具和軟體
·
計算機和操作系統：如果沒有計算機和操作系統，則無法編寫代碼。要學習Web開發，你不需要任何高端計算機(如果你擁有的話，那麼更好)。你可以使用任何類型的中型筆記本電腦或台式機。對於操作系統，可以使用適合你的MacOS，Windows(最新版本)或Linux。
·文本編輯器/
IDE：毫無疑問，VSCode適用於大多數情況和大多數語言。它具有良好的性能，出色的擴展性，內置的終端功能以及大量功能。在2019年StackOverFlow調查中，VSCode也是開發人員的首選。你還可以選擇其他一些不錯的選擇，例如Sublime
Text或Atom。如果我們談論IDE，那麼是Visual
Studio(#或C#)，Eclipse和Netbeans(Java)。是不錯的選擇。
·
Web瀏覽器：大多數開發人員的首選是Chrome或Firefox。Chrome速度很快，並且使用V8引擎(JavaScript引擎)。Firefox也取得了長足的進步，其中的一些好東西不在chrome瀏覽器中。兩種瀏覽器都有出色的開發工具，可以對Web開發中的問題進行故障排除。
·終端：您將使用一些系統命令來使用CLI進行很多工作。您可以將默認或第三方終端用於您的Web開發項目。Bash，Zsh，Powershell，Git
Bash，iTerm，Hyper這些都是可以使用的選項。
·設計(可選)：並不是每個人都需要學習。在公司中，有專門的團隊來製作圖像，徽標或草圖，但是如果您是自由職業者，則可能必須學習Adobe
XD，Photoshop，Sketch或Figma。
3、從HTML和CSS開始
HTML和CSS是Web開發的基本構建塊。無論您的Web應用程序有多先進，或者使用什麼框架和後端語言，都必須使用HTML和CSS構建前端應用程序。因此，這是在Web開發中要學習的第一件事。
·HTML5(語義元素，屬性，文檔類型等)
·CSS基礎知識顏色，字體，位置，盒子模型等。
·CSSGrid和Flexbox對齊內容或創建列。
·CSS自定義屬性
4、響應式布局
您的應用程序應該在所有類型的設備(例如智能手機，平板電腦，台式機，iPad或任何其他屏幕尺寸的設備)上都可以查看和使用。因此，了解創建響應式設計或布局非常重要。讓我們來看一些重要的主題。
·了解如何設置視口
·媒體查詢不同的屏幕尺寸。
·流體寬度
·雷姆單位
·移動優先
5、自定義可重用CSS組件
與其依賴大型的CSS框架(如Bootstrap)，不如創建自己的模塊化，可重用的CSS組件以在項目中使用。如果您構建自己的定製設計，則無需導入完整的庫。您創建只需要特定UI的組件。的新趨勢最近還出現了有助於更有效地編寫CSS代碼的代碼。如果你已經了解CSS，那麼您無需在學習Saas上花費很多精力。Saas是CSS預處理程序，可為標准CSS添加更多功能並使其更加高效。你可以使用變數，嵌套，條件語句來減少CSS的重復並提高其效率。你還可以為每個可重用組件創建單獨的Saas文件。Sass確實節省了很多時間，所以你絕對應該在2020年學習它。
6、CSS框架
學習CSS框架的普及程度不如去年，但對於不擅長設計的開發人員而言，仍然非常相關或有用。有許多流行的CSS框架可供使用，其中一些如下。
·Bootstrap是最流行的CSS框架。學習引導程序也有助於學習其他框架。
·Tailwind
CSS是其他正在流行的框架，與其他框架幾乎沒有什麼不同。它是一組實用程序類，因此您可以創建自己的按鈕和其他看起來與其他按鈕確實不同的東西。它們也是高度可定製的。
·物化
·布爾瑪
7、前端必須語言：JavaScript
學習HTML和CSS之後，接下來需要學習的是Vanilla
Javascript。對開發人員來說，掌握javascript基本知識非常重要。您將在伺服器端語言(例如PHP，Python或#)中使用大量javascript，並且如果您想與React，Angular，NodeJS，Vue或任何其他javascript框架或庫一起使用，則非常需要學習這種語言。以下是你應該在javascript中涵蓋的一些重要主題
·JavaScript基礎知識(變數，數據類型，函數，條件等)
·DOM(文檔對象模型)
·JSON(JavaScript對象表示法)
·提取API(請求/響應/Ajax)
·如果您想轉向React，Vue，Angular或其他框架，現代JS(ES6)概念對於學習非常重要。
8、一些重要工具
Web開發中將使用一些工具。這些工具將幫助你進行調試，提高生產率，管理代碼，與其他開發人員合作以及類似的東西。讓我們討論其中一些工具。
·
Git(版本控制)和Github是您肯定會在2020年學習的最受歡迎的工具。Git在與其他開發人員協作和管理代碼方面有很多幫助。您還可以選擇其他一些選項，例如GitLab，Bitbucket和其他一些選項。
·
了解如何使用瀏覽器開發工具。無論是chrome還是firefox，您都應該知道如何使用不同的選項卡，例如元素選項卡，javascript控制台，用於請求和響應的網路選項卡，應用程序選項卡以及其他用於不同目的的選項卡。
·大多數IDE或文本編輯器都具有添加擴展名或插件的功能，這對提高生產力和構建Web應用程序非常有幫助。例如，Visual
Studio代碼中的VSCode擴展可幫助下載擴展，例如實時伺服器或實時saas編譯器以與React一起使用。
·Emmet是另一個很棒的工具，它允許您編寫非常快速的HTML和CSS，這有助於提高開發人員的生產力。
·
學習使用javascript軟體包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或庫(例如React)，那麼這些軟體包管理器將使用很多，但是對於其他語言(例如Python或Php)，您將使用不同的軟體包管理器。
·
如果要在前端安裝NPM軟體包，則必須使用Webpack或Parcel。如果要創建自己的模塊，或者要將一個javascript文件帶到另一個javascript文件，則默認情況下不能僅使用瀏覽器來執行此操作，因此需要Webpack或Parcel對其進行捆綁。
9、基本部署
此時，一旦你知道應該為前端開發學習什麼工具或技術，就需要知道如何在Internet上部署前端網站。如果你正在為小型企業構建一些小型應用程序，登錄頁面或個人站點，則無需學習AWS或DevOps，僅因為它們具有光澤和新潮。你將使事情變得更加復雜而不是簡單。你需要在2020年學習一些部署工具和步驟。
·域注冊(Namecheap，Google等)
·託管託管(InMotion，Hostgator，Bluehost等)
·靜態主機(Netlify，Github頁面)
·SSL證書。
·FTP，SFTP(文件傳輸協議)非常適合小型應用程序。
·SSH(安全外殼)，用於高級應用程序。
·CLI和Git。
到目前為止，我們討論的任何工具，技術趨勢或步驟都是前端開發的一部分。您尚不知道該框架，但可以為個人和小型企業構建網站，也可以構建適合移動設備的布局。您還可以使用到目前為止討論的工具或技術來部署小型應用程序或項目。如果您想申請工作，那麼學習一些前端框架(如React，Vue或Angular)將是很棒的。
10、前端框架和狀態管理
框架使您可以進行更高級的前端開發。框架為您提供了許多優勢，例如可重用的組件，更有條理的UI或頁面交互。這對於協作更好，也有助於編寫簡潔的代碼。另外，了解狀態管理。每個框架都有不同的方法。以下是2020年的一些流行框架和狀態管理器。
·React：React庫是最流行的Web開發學習方法，與其他框架和庫相比，它相當容易。React開發人員還有很多工作要做。您可以將Rex和
ContextAPI與Hooks一起使用以進行狀態管理。
·Vue：
Vue也越來越受歡迎，開發人員也更喜歡學習Vue。與React和Angular相比，Vue最容易學習。VueX是為視圖而構建的狀態管理器。
·Angular：此框架通常在大型組織中使用。它具有相當陡峭的學習曲線。用Angular學習
TypeScript也很好。它允許您使用可選的靜態類型並支持ES2015的功能。NGRX和Services是可以學習此框架的良好狀態管理器。
可選學習：
·
如果您具有這三個框架之一的知識，那麼您還可以使用Svelte，它是一個JavaScript編譯器，可讓您生成純凈的原始JS代碼並幫助您輕松構建用戶界面。
·
了解伺服器端渲染。NextJS(React)和NuxtJS(Vue)是允許您在伺服器上運行React和Vue的框架。兩者都有很好的功能，例如更好的SEO，文件系統路由，自動代碼拆分，靜態導出，JS中的CSS和許多其他功能。
·靜態網站生成器：Gatsby(反應式)和Gridsome(Vue)
我們已經討論了所有大多數前端開發工具和技術。現在讓我們討論成為後端開發人員或全棧開發人員的語言和技術。
11、伺服器端語言(選擇一種)
您應該至少了解一種伺服器端語言。要在2020年選擇一種語言，下面提供了一些選項...
·NodeJS(不是語言，而是運行時環境)
·Python(非常適合初學者)
·Java(適合大型組織)
·Php(適合自由職業)
·Ruby(2020年少兩極)
·C#
·Go
注意：無論你喜歡學習哪種伺服器端語言，都要確保你了解使用該語言的數據結構和演算法。數據結構和演算法將幫助您為用戶呈現數據，並將幫助您優化Web應用程序中的代碼。我們特別建議您專注於使用數組和字元串(最重要)。你將同時使用這兩種方法。
12、伺服器端框架(選擇一項)
一旦學習了自己選擇的一種伺服器端語言，就可以使用其中一種語言框架。您可以選擇以下給出的選項之一...
·Node.js_Express，Koa，Adonis，Feather.js，Nest.js
·Python：Django，Flask，
·Java：SpringMVC，Grails
·PHP：Laravel，Symfony，Codeignitor，Slim
·Ruby：Sinatra上的RubyonRails
·C#：ASP.NETMVC
·Go：Revel
13、資料庫(選擇一項)
大多數Web應用程序都需要一個存儲數據的地方。在某些情況下，某些技術或某些語言可以與某些資料庫配合使用。例如：在Mern堆棧中，M代表MongoDB，而在LAMP堆棧中M代表MySQL，但完全取決於您要為應用程序選擇哪個資料庫。我們將討論2020年一些流行的資料庫。
·關系資料庫：RDBMS仍然是最受歡迎的資料庫。最喜歡使用PostgreSQL，MySQL，MSSQL。
·NoSQL：MongoDB，RethinkDB，CouchDB
·雲資料庫：Firebase，AzureCouldDB，AWS
·輕量級和緩存：Redis，SQLlite，NeDB
在學習資料庫時，您還將學習RDBMS，ORM(對象關系映射器)或ODM(對象數據映射器)的SQL(結構化查詢語言)。GraphQL
：(可選)您可以了解現在流行的GraphQL。這是API的查詢語言。它具有類似於JSON的簡單語法，並且相當容易實現。
14、CMS：內容管理
您絕對應該了解內容管理系統，尤其是如果您是自由職業者。CMS用於將內容添加到您的網站或應用程序。客戶能夠更新自己的內容非常好。
·
傳統CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enro(Javascript)
·其他CMS：DEDECMS，帝國CMS，PHPcms，Prismic.io，Strati。
15、部署和DevOps
託管全棧應用程序或後端應用程序比僅前端應用程序要復雜一些，尤其是當您擁有資料庫時。確保您知道如何使用CLI進行部署。了解有關用於部署應用程序的以下內容。
在大多數公司中，有不同的團隊從事DevOps的工作。因此，擁有有關DevOps的知識完全是可選的。您可以了解到，如果您正在從事自己的項目。
·SSH(安全外殼)
·Web伺服器環境：NGINX，Apache
·應用程序託管：Linode，Heroku，AWS，Azure，Now。
·虛擬化：Docker，Vagrant
·測試：單元，功能，集成等
·負載平衡，監視，安全性。
以上所有技術工具都足以使您成為前端，後端或全棧開發人員。根據最終目標選擇正確的工具和技術。
以上就是小編今天為大家分享的關於Web前端工程師的入門指南-教你如何成為一名web前端開發工程師的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴和正在學習web前端知識的夥伴們有所幫助，想要了解更多web前端相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利，成為一名優秀的web前端開發工程師！
英文|#/how-to-become-a-web-developer-in-2020-a-complete-guide/翻譯|web前端開發(ID：web_qdkf)
2. Web前端開發工程師要掌握的前端開發工具
今天小編要跟大家分享的文章是關於Web前端開發工程師要掌握的前端開發工具。市面上有許多前端開發工具可以加速Web開發工作。本文是對Web
開發工具的一次精選匯總，分別介紹了每款工具的關鍵特性，並已附上下載鏈接。下面來和小編一起看一看吧！
1.NoviBuilder
NoviBuilder是一個拖放式構建器，它對於經驗豐富的Web
開發人員而言是一個不錯的選擇。它為開發人員提供了訪問源代碼的許可權，並允許開發人員在Web設計中進行多項更改。你能用它完全控制你的Web
項目，並且可以充分利用它的各項功能。盡管這款工具對於初學者來說可能很難入門，但在它的眾多優勢面前這一不足也就不值一提了。
特性：
·高級代碼編輯器
·附加應用集成
·多種預制主題
·拖放界面
·電商功能支持
·預覽工具
下載鏈接：
#/
2.ONESubscription
ONESubscription是一款很有用的Web
開發工具包，包含了眾多高質量的數字產品。它提供了大批高品質的部件，可以打造出功能完善的博客、在線商店、登錄頁面等各種網站。總的來說，它能為你提供數以千計的主題和模板、多種插件和圖形元素、附加服務以及其他許多好處。
特性：
·對所有部件提供專業支持
·定期更新
·安全性(如果你訂閱後尚未從資料庫中下載任何內容，則可以在訂閱開始後的14天內輕松取消訂閱)
·無使用限制的年度許可證
·很多有用的服務(例如模板定製或安裝)
下載鏈接：
#/
3.CreativeTim
CreativeTim提供了基於Bootstrap的設計元素，可幫助開發者加快開發工作。這款工具可以用來創建Web和移動應用。
特性：
·提供了最簡單的開發上手途徑，也就是預制的示例頁面;
·這款工具可以幫助你節省時間，並且讓你專注於業務模型;
·提供易於使用的管理模板
·管理面板可幫助你節省大量時間
·提供預制的設計塊和元素
訂閱鏈接：
#/2JMju8g
4.Npm
Npm是JavaScript的Node包管理器。開發人員可以用它尋找可重用的軟體包，然後用各種方式將這些包組合出強大的產品。這款Web
開發工具是一個命令行實用程序，用來與軟體包的存儲庫交互。
特性：
·在存儲庫中發現並重用超過470,000個免費代碼包
·在團隊內鼓勵代碼發現和重用
·發布和控制名稱空間的訪問許可權
·使用相同的工作流程管理公共和私人代碼
下載鏈接：
#/
5.TypeScript
TypeScript是一種開源前端腳本語言。它是JavaScript
的嚴格語法超集，添加了可選的靜態類型。它是專門為開發大型應用程序而設計的，並可以編譯為JavaScript。
特性：
·TypeScript支持其他JS庫
·可以在任何運行JavaScript的環境中使用Typescript
·它支持包含現有JavaScript庫的類型信息的定義文件，例如C/C++頭文件;
·可跨瀏覽器、設備和操作系統移植;
·它可以在任何運行JavaScript的環境中運行
下載鏈接：
#/index.html#download-links
6.CodeKit
Codekit是一款前端Web開發工具。它可以支持開發人員更快地構建網站，它可以合並JS代碼、對JS代碼進行瘦身，還能檢查
JavaScript代碼的語法，它還可以優化圖像。
特性：
·注入CSS更改而無需重新載入整個頁面
·合並腳本以減少HTTP請求。
·瘦身代碼以減小文件大小
·自動正確處理大多數語言
下載鏈接：
#/
7.WebStorm
WebStorm為JavaScript提供了智能編碼輔助。它為Angular、React.js、Vue.js和Meteo
提供了高級編碼輔助，它還可以幫助開發人員在處理大型項目時提升編程效率。
特性：
1.WebStorm幫助開發人員在處理大型項目時提升效率
2.它提供了一些內置工具，用於調試、測試和跟蹤客戶端和Node.js應用程序;
3.它與流行的Web開發命令行工具集成
4.Spy-js內置工具可用來跟蹤JavaScript代碼
5.它提供了一個統一的UI，能夠與許多流行的版本控制系統協作;
6.可以高度定製，以完美適應各種編碼風格;
7.它為客戶端代碼和Node.js應用提供了內置的調試器
下載鏈接：
#/Webstorm/download/#section=windows
8.HTML5Boilerplate
HTML5Boilerplate幫助開發人員構建響應快、健壯和適應性強的Web應用或網站。它是一組可下載的文件，它提供了一個十分完善的
HTML模版，完善到所有的頁面似乎都應該遵守這個規則。
特性：
·它讓開發人員可以使用HTML5元素
·它的設計遵從漸進增強原則
·它的Normalize.css可用於CSS規范化，還提供了常見的錯誤修復;
·它提供了Apache伺服器配置以提高性能和安全性
·它提供了GoogleUniversalAnalytics代碼段的優化版本
·它可以防止控制台語句在較舊的瀏覽器中導致JavaScript錯誤
·提供大量內聯和隨附文檔
下載鏈接：
#/
9.AngularJS
AngularJS是前端開發人員的另一款必備工具。它是一個開放源代碼的Web應用程序框架，它能幫助開發人員擴展Web應用程序的HTML
語法，它還提供了可訪問、可讀和表達性強的開發環境，從而簡化了前端開發流程。
特性：
·它是一個開源項目，完全免費，並被全球成千上萬的開發人員使用;
·它提供了創建RICH互聯網應用的能力
·它提供了基於MVC使用JavaScript編寫客戶端應用程序的選項
·它會自動處理JavaScript代碼，使其兼容各種瀏覽器。
下載鏈接：
#/
10.Sass
Sass是最可靠、最成熟也是最強大的CSS擴展語言。這款工具可用來輕松擴展站點現有CSS的功能，例如變數、繼承和嵌套等。
特性：
·使用它的前端工具編寫任何代碼都非常簡單明了
·支持語言擴展，例如變數、嵌套和混合(mixins);
·提供了用於處理顏色和其他值的許多有用函數
·高級功能，例如庫的控制指令;
·它提供了具有良好格式、可自定義的輸出。
下載鏈接：
#/
11.Backbone
Backbone.js提供了具有鍵值綁定和自定義事件的模型，來為Web應用程序提供結構。
特性：
·Backbone.js允許開發人員開發單頁應用程序
·Backbone.js有一個簡單的庫，用於分隔業務和用戶界面邏輯;
·這款工具使代碼變得簡單、系統和組織化。它可以充當任何項目的骨幹;
·它負責管理數據模型和用戶數據，並在服務端顯示這些數據;
·它允許開發人員創建客戶端Web應用程序或移動應用程序。
下載鏈接：
#/
12.Grunt
Grunt是NodeJS
上流行的任務運行器。它很靈活，用戶很多，當涉及到任務自動化用途時，它是開發人員的首選工具，它提供了許多打包的插件來執行常見任務。
特性：
·它的工作流程非常簡單，只需編寫一個設置文件即可;
·它讓開發人員只需最少的步驟就能自動執行重復性任務;
·它有一個簡單直接的方法，並提供了JS版本的任務，JSON版本的配置;
·Grunt內置許多用於擴展插件和腳本功能的任務
·它能加快開發流程並提高項目效率
·Grunt的生態系統非常龐大，因此用戶可以輕松為任何事情設置自動化流程;
·這款Web開發工具減少了執行重復任務時出錯的概率。
下載鏈接：
#/
13.Jasmine
Jasmine是一款行為驅動的JavaScript框架，用於測試JavaScript代碼。它不依賴於其他任何JavaScript
組件，這款開源工具不需要DOM。
特性：
·低開銷，無外部依賴;
·開箱即用，測試代碼所需的一切都打包好了;
·使用相同的框架運行瀏覽器測試和Node.js測試。
下載鏈接：
#/index.html
14.CodePen
CodePen是一個面向前端設計人員和開發人員的Web
開發環境。它的宗旨是提供更快、更順暢的開發環境。開發人員可以用它構建和部署網站，並構建測試用例。
特性：
·可以用它來構建組件，以備今後使用;
·它包含一些很棒的功能，可以提高CSS開發人員的開發效率;
·允許實時查看和實時同步
·預填充API功能允許添加鏈接和演示頁面，而無需編寫任何代碼。
下載鏈接：
#/
15.Foundation
Foundation是支持任何設備、介質和可訪問性的前端框架。這個響應式前端框架使開發人員可以很容易地設計響應式網站、應用和電子郵件。
特性：
·它提供了最干凈的標記，而不會犧牲效用和性能;
·可以自定義構建以包含或刪除某些元素，它定義了列的大小、顏色和字體大小;
·更快的開發和頁面載入速度
·Foundation針對移動設備進行了真正的優化
·適用於所有級別開發人員的可定製性
·它將響應式設計提升到了新的水平，並為平板電腦提供了開發人員迫切需要的中等網格。
下載鏈接：
#/sites/download.html/
16.SublimeText
SublimeText是非開源的跨平台源代碼編輯器。這款應用開發工具原生支持許多編程語言和標記語言。
特性：
·命令面板功能允許匹配的按鍵調用任意命令
·同時編輯功能允許對多個區域應用相同的交互更改
·提供基於Python的插件API
·允許開發人員針對項目定製首選項
·與TextMate的許多語言語法兼容
下載鏈接：
#/
17.GridGuide
GridGuide是另一款重要的前端開發工具。它允許在設計中創建像素級精確的網格，這是一個簡單的工具，可以提供非常有價值的工作流程。
特性：
·添加基於畫布、畫板和選定圖層的參考線;
·快速向邊緣和中點添加輔助線
·允許為其他畫板和文檔創建重復的指南
·幫助用戶創建自定義網格
下載鏈接：
#/
18.Chrome開發工具
Chrome開發工具是Chrome內置的一組調試工具。這些工具使開發人員可以進行各種測試，從而輕松節省大量時間。
特性：
·它允許添加自定義CSS規則
·用戶可以查看邊距、邊框和填充;
·它可以幫助開發人員模擬移動設備
·可以將開發工具用作編輯器
·打開開發工具後，用戶可以輕松禁用瀏覽器的緩存。
下載鏈接：
#/devtools
19.Modaal
Modaal是前端開發插件，可提供高質量、靈活和可訪問的modal。
特性：
·針對輔助技術和屏幕閱讀器進行了優化
·完全響應，隨瀏覽器寬度縮放;
·具有SASS選項的可定製CSS
·提供全屏和視口模式
·為畫廊打開和關閉modal提供鍵盤控制
·靈活的關閉選項和方法
下載鏈接：
https://github.com/humaan/Modaal
20.Less
Less是用來擴展對CSS語言支持的預處理器。它允許開發人員使用一些讓CSS更易維護和擴展的技術。
特性：
·它可以免費下載和使用
·它提供了高級樣式語法，可讓Web設計人員/開發人員創建高級CSS;
·它可以在瀏覽器開始渲染網頁之前輕松地編譯為標准CSS
·編譯的CSS文件可以上傳到生產Web伺服器
下載鏈接：
#/
21.Meteor
Meteor是一個全棧JavaScript
框架，它由一系列庫和軟體包組成。它在設計理念上對比了參考的框架和庫的優點，以簡化應用程序的原型製作流程。
特性：
·它提升了應用程序的開發效率
·它帶有一些內置功能，包含一些前端庫和基於NODE.js的伺服器;
·它可以大大加快項目的開發速度
·它提供MongoDB資料庫和Minimongo，它們完全用JavaScript編寫;
·實時重新載入功能允許開發時只刷新所需的DOM元素
下載鏈接：
#/install
22.jQuery
jQuery是一種廣泛使用的JavaScript庫。它使前端開發人員能夠專注於各種層面的功能上，它能簡化諸如HTML文檔遍歷、操作和
Ajax之類的事情。
特性：
·QueryUI有助於製作高度交互的Web應用程序
·它是開源的，可以免費使用;
·它提供了強大的主題機制
·它非常穩定且易於維護
·它提供了廣泛的瀏覽器支持
·可以幫助開發人員創建出色的文檔
下載鏈接：
#/download/
23.Github
GitHub是一個受開發人員工作方式啟發的Web開發平台。這款工具使開發人員可以查看代碼、管理項目和構建軟體。
特性：
·輕松協調，保持一致並使用GitHub的項目管理工具完成工作;
·它為開發工作提供了正確的工具
·簡單的文檔和高質量的編碼
·讓所有代碼集中在一處
·開發人員可以直接從存儲庫託管其文檔
下載鏈接：
https://github.com/
原文鏈接：
#/front-end-Web-development-tools.html
以上就是小編今天為大家分享的關於Web前端開發工程師要掌握的前端開發工具的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
文章來源：作者|MahipalNehra譯者|王強
3. 前端開發常用哪些工具軟體
下面我介紹五款比較常用的前端開發工具，具體哪一款最好用，因人而異，大家可以根據自己的情況，選擇一款個人認為最好用的web前端開發工具。
1、Sublime Text
Sublime Text憑借其漂亮的用戶界面和極其強大的功能，被譽為「神級」代碼開發工具。
2、StackBlitz
據Chime Nnamdi所說，這是所有用戶最喜歡的在線集成開發環境工具（IDE）。主要原因在於其將用戶最喜愛和最常用的集成開發環境——Visual Studio代碼帶到了網路上。
3、Visual Studio
Microsoft Visual Studio，簡稱VS，是微軟公司的開發工具包系列產品，是目前最流行的Windows平台應用程序的集成開發環境(IDE)。
4、WebStorm
WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。已經被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScript IDE」等。
5.CanIUse
該在線工具非常方便，它可以讓用戶知道當前實現的功能是否與期望對接的瀏覽器兼容。
4. 學習Web前端開發要學習什麼會用到哪些工具
今天小編要跟大家分享的文章是關於學習web前端開發要學習什麼?會用到哪些工具。准備學習web前端知識的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對小夥伴們有所幫助。
一、前端工程師的主要職責：
前端工程師在不同的公司有不同的功能，但性質相似。
1、網站設計與網頁界面開發
2、做網站界面開發
3、Web界面開發，前端數據綁定，前台邏輯
4、設計、開發、數據
二、web前端開發中需要掌握的技術：
1、學習HTML，這是最簡單，最基本的前端的學習都是需要不斷的學習，學一天停一停相當於白學。
2、學習CSS，CSS這里說的不包括CSS3Web前端開發工程師裡面我們看到的，一個可以使用HTML或CSS+
CSS+DIV的界面布局，所以CSS是用來協助HTML布局和顯示，我們稱之為「CSS樣式」，為什麼說DIV+CSS?因為我說div是HTML主要用於布局的，所以div是這個東西的核心!CSS必須配合部。CSS必須掌握浮、位置、寬度和高度，以及最大值和最小值，以100%，溢出，邊緣、填充等。這些都是與布局相關的樣式。
3、JS。你覺得還過的去，看看JS是可怕的，事實上，JS入門很簡單，不需要很多東西，只要根據ID或名稱DOM或」風格，或價值，然後以一個ID或名稱元標簽，或額外的數據，在HTML，這是對數據的操作有關系，那麼數據邏輯的影響，無非是一個跳躍，彈框，隱藏什麼，這一切都是結合其他應用，代碼一點都不難，將這些基本的JS。網路其他好。然後多看一些，不是什麼問題。
4、學習jQuery，相當於封裝一組JS插件的JS。其目的是操作更方便，編寫更少的代碼，jQuery條目也非常簡單。這些都是切入點，要學會像JS，只是改變了JQ代碼。剩下的就跟網路一樣。
5、最好是指出背景語言，如java，php，為什麼?因為我們是前台介面數據，從後台到點，如果後台代碼，你知道如何與後台數據交互是最好的，它節省了時間，也可以使前端代碼更加規范。否則，可能是因為你回來了，無法忍受的數據，然後前端代碼再次重寫，這將是可怕的。
6、研究CSS3+
HTML5，畢竟是專門做IT的，在工作中，只有在自己的網站需要改變風格，網站風格問題的時候。但是，如果你准備從事專業戰線，最好是學習。
以上6點，基本上是一個web前端開發工程師掌握的技術，我也試著講述一下自己的經驗，但是我們不認為上面的6點只是我說的那麼簡單，沒有，他們正在使用，這是在這樣的一個火中，因為堅強!我說的就是這么簡單，你覺得原因很難祛除，萬事開頭難，我說的是方法和技巧的入門，需要了解的東西。除了告訴你一個秘密，不要以為代碼很難敲，現在什麼語言都有自動提示代碼功能，只需要輸入一個字元，兩個字元，後面的代碼就會彈出，讓你選擇!你害怕什麼?所以不要害怕你糟糕的英語。
三、web前端開發中需要用到的工具：
最常用的是Dreamweaver，我們推薦使用dreamweavercs6，很多問題像以前CS6，CS6是目前最強大的，至少在DW更方便的可視化編程，可以看邊敲代碼的效果，並自動提示代碼功能。有一個ediplus，這是這是一個字體顏色的記事本等，我用這個，因為我覺得DW佔用太多的內存，使電腦卡，所以我用寫ediplus代碼，代碼有沒有自動提示，我不知道，你可以網路是否有插件。Eclipse可以寫java，php和上面的各種代碼!zendstudio是專寫PHP，但上述2個工具是比較專業的，這是由我們的專業開發人員使用，所以你可以看到，PS圖像處理軟體是沒有必要的。
四、web前端開發展望：
web前端開發的前景是非常好的。我們不在乎我們做什麼網站或者我們在做什麼項目。現在我們都在關注用戶體驗。人們說，如果你的網站界面看起來不錯，你的網站和項目將成功3/4。所以現在很多人說Web前端的開發前景略好於後端開發。但我做一個比較，前端開發技術的學習上，後端開發技術開發技術還了解到，前、後端開發薪酬肯定是遠遠高於前面，但後面的開發技術在一定程度上會有一個很大的瓶頸，因此早期的中級程序員，前端開發後端開發更好，那麼高級程序員。
以上就是小編今天為大家分享的關於學習web前端開發要學習什麼?會用到哪些工具的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們學習成功！
5. 前端開發需要學習什麼應該怎麼學
目前前端開發主要通過自學和報班學習兩種途徑學習，自學的難度高一些。
自學的話，要先規劃好自己要學哪些知識，從哪裡入手，有困難如何解決。機構學的話，就要選一個靠譜的機構。近幾年，前端的發展還是非常好的，市場需求大，加上學習起來也相對簡單，有眾多人選擇並學習。
學習的內容包括：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
想要系統學習，你可以考察對比一下開設有IT專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能，建議實地考察對比一下。
祝你學有所成，望採納。
6. 寫前端用哪個軟體好
編寫代碼的軟體有不少：WebStorm、Sublime、HBuilderX、Editplus和Dreamweaver等。
每個軟體各有優缺點。
我自己主要用Dreamweaver這個軟體，用習慣了；有時用一下 HBuilderX
7. 前端開發常用又好用的幾個軟體
正所謂「工欲善其事必先利其器」，一名合格的Web前端開發工程師自然會用到不少能使其工作高效的工具。下面，就給大家分享Web前端學習需要了解的十款HTML5開發工具。
1、Lungo
Lungo是一款基於HTML5的開發框架，專為想要設計、構建和共享跨設備應用的開發者而准備。支持開放的Web標准，如HTML5、CSS3和JavaScript；支持手機、電視以及桌面設備。擁有強大的JavaScript API：開發WebAPP應用有很多種方式，而不是一味的優化。Lungo提供了一個強大的API，這樣你可以完全掌控自己的WebAPP應用程序。
2、Animatron
Animatron是一款簡單而又強大的在線工具，通過它，你可以創建出令人驚嘆的的HTML5動畫和互動內容。使用非常直觀的Animatron編輯器去設計和發布完美的移動產品，同時也可以到處播放的電影和信息圖表等，從桌面瀏覽器到移動設備，無需編碼，所見即所得。
9、Eclipse
Eclipse的本身只是一個框架平台，但是眾多插件的支持使得Eclipse擁有其他功能相對固定的IDE軟體很難具有的靈活性。許多軟體開發商以Eclipse為框架開發自己的IDE。Eclipse最初是由IBM公司開發的替代商業軟體Visual Age for Java的下一代ide開發環境，2001年11月貢獻給開源社區，現在它由非營利軟體供應商聯盟Eclipse基金會（Eclipse Foundation）管理。
10、DevExtreme
DevExtreme是專為你的移動世界精心准備的，一個跨平台開發的HTML5/JS框架，可以構建iOS、Android、Tizen和Windows Phone 8應用程序，是Visual Studio開發人員開發跨平台移動產品的優選工具。
以上就是為大家分享的十款HTML5開發必備的工具，相信這些工具一定會讓你幫你在從事Web前端開發過程中提高效率，打開一扇新的大門。
8. 前端專業平時都是用的什麼軟體
前端一般用的是Dreamweaver，ps，Fireworks這幾個軟體，還有的公司用其他軟體，這個根據使用環境來說，還有不少軟體。
9. 前端需要學習哪些軟體多嗎
前端開發要學的內容主要有：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。
web前端工程師是程序員裡面入行門檻較低的一個職業，有意轉行web前端的小夥伴可以對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，建議實地考察對比一下。
祝你學有所成，望採納。
北大青鳥學生課堂實錄
10. 現在前端一般用什麼軟體
1、Adobe Dreamweaver CS6
Dreamweaver CS6是世界頂級軟體廠商Adobe推出的一套擁有可視化編輯界面，用於製作並編輯網站和移動應用程序的網頁設計軟體。由於Dreamweaver支持代碼、拆分、設計、實時視圖等多種方式來創作、編寫和修改網頁，對於初級人員，你可以無需編寫任何代碼就能快速創建Web頁面。其成熟的代碼編輯工具更適用於Web開發高級人員的創作！
2、Adobe Edge
Adobe Edge是一個用HTML5、CSS、Java開發動態互動內容的設計工具。它的一個重要功能是web工具包界面，用於方便確保在不同瀏覽器中架構的一致性，此外，Adobe Edge還將整合TypeKit這樣的字體服務。通過Edge設計的內容可以兼容iOS和Android設備，也可以運行在火狐、Chrome、Safari和IE9等主流瀏覽器上。
3、DevExtreme
DevExtreme Complete Subion是性能最優的HTML5,CSS和Java移動開發框架，可以直接在Visual Studio集成開發環境，構建iOS，Android，Tizen和Windows Phone 8應用程序。DevExtreme包含 PhoneJS 和 ChartJS 兩個原生UI組件，並且提供源代碼。目前，DevExtreme支持VS2010/2012/2013集成開發環境，兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移動平台，是Visual Studio開發人員開發跨平台移動產品的首選工具。
4、JetBrains WebStorm
WebStorm 是jetbrains公司旗下一款JS開發工具。被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaS IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。
5、Sencha Architect
在開發移動和桌面應用的工具中，Sencha的定位是HTML5可視化應用開發。開發團隊可以在一個單一集成的環境中完成應用的設計、開發和部署。開發者還可以開發Sencha Touch2和Ext JS4 Java應用，並實時預覽。
6、Initializr
Initializr 是製作 HTML5 網站最好的入門輔助開發工具，你可以使用提供的特色模板快速生成網站，也可以自定義，Initializr 會為你生成代碼簡潔的可定製的網頁模板。
7、HTML5demos
想知道你的瀏覽器是否支持 HTML5 Canvas 嗎？想知道 Safari 是否可以運行簡單的 HTML5 聊天客戶端嗎？HTML5demos 會告訴你每一個HTML5特性在哪些瀏覽器中支持。
8、HTML5 Tracker
想了解 HTML5的最新動向嗎? 使用 HTML5 Tracker 吧，它可以跟蹤 HTML5 最新修訂信息。
9、HTML5 visual cheat sheet
想要快速超找一個標簽或者屬性嗎？看看這個非常酷的速查手冊吧，每個Web開發人員的必備。
10、Switch To HTML5
Switch To HTML5 是一個基礎而實用的模板生成工具。如果你開始一個新項目，可以到這里獲取免費的 HTML5 網站模板。
11、HTML5 Test
你瀏覽器准備好迎接 HTML5 革命了嗎？HTML5 Test 將告訴你。這個網站會為你當前使用的瀏覽器生成一份對video、audio、canvas等等特性的支持情況的完整報告。
12、Lime JS
LimeJS 是一個 HTML5 游戲開發框架，用於快速構建運行於觸屏設備和桌面瀏覽器的游戲。非常棒的HTML5開發工具，一定要用用試試。
以上就是向大家推薦12款優秀的HTML5開發工具。希望能幫到大家。