Web前端是什麼?大牛推薦的高效學習路線,減少2倍時間

来源:https://www.cnblogs.com/TT485480/archive/2020/04/02/12620799.html
-Advertisement-
Play Games

目前,在移動互聯網行業中較為火熱、勢頭猛烈的當屬Web前端開發。且在2019年招聘旺季中,Web前端開發程式員處於供不應求的狀態,對於0基礎想要從事互聯網行業的小伙伴們,Web前端將會是最合適的入門編程語言。而且根據後期的職業發展規劃來看,只要入門Web前端,在職場上發展個三到五年,基本上都能做到總 ...


目前,在移動互聯網行業中較為火熱、勢頭猛烈的當屬Web前端開發。且在2019年招聘旺季中,Web前端開發程式員處於供不應求的狀態,對於0基礎想要從事互聯網行業的小伙伴們,Web前端將會是最合適的入門編程語言。而且根據後期的職業發展規劃來看,只要入門Web前端,在職場上發展個三到五年,基本上都能做到總監級別。
所以,有很多小伙伴要麼想進入到Web前端開發行業,要麼是工作不太理想的,想要轉行做Web前端開發。那麼,為什麼會有這麼多的人想要學習Web前端?

什麼是web前端?
Web前端,主要是用來開發用戶通過瀏覽器可以瀏覽和使用的Web頁面的。 一般而言,所涉及的內容主要包括W3C中的HTML、CSS和JavaScript這三方面的內容。
HTML+CSS:也就是網站的骨架和樣子,包括你看到的知乎的界面,一段文字,一個圖片,都是一個HTML元素,至於字型大小是多大的,什麼顏色,放在什麼位置,這叫CSS,在HTML5里,CSS還能讓元素運動起來,旋轉,跳躍,只要你想;
Javascript:簡單的說就是頁面的大腦,把後端獲取的數據添加到網頁里,或者讓元素運動起來,或者是改變頁面的CSS,或者是操作HTML元素等等。當然,這些都是最基礎的做法,作為一個前端,還要考慮JS的性能,可維護,可擴展的程度等等;
隨著前端的發展,前端開發所涉及到的內容肯定不僅限於這三方面。分析這三個層面內容的本質可以看到,這三個層面分別涉及Web頁面的結構、Web的外觀視覺表現以及Web層面的交互實現。
因而,歸根結底,Web前端以及Web前端開發可以說是針對Web的結構、行為和表現來進行相應的開發的,也可以說,前端開發主要是做Web端的結構、行為以及表現。

Web前端學習什麼?web前端學習是一個先易後難的過程,主要包括三個要素:HTML、CSS和JavaScript,這就要求前端開發工程師不僅要掌握基本的Web前端開發技術,網站性能優化、SEO和伺服器端的基礎知識,而且要學會運用各種工具進行輔助開發以及理論層面的知識,包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。
Web前端開發後期要懂一些前端框架,如nodejs、Angualrjs、還有bootstrap等,以及ued用戶體驗,後臺開發也要懂一些。
看到這裡,發現web前端要學習太多,想加入web前端行業的同學要抓緊腳步開始了,無論你是有一些基礎知識,還是零基礎小白,這些都沒關係,只要你想學,只等你來,只管相信你自己,肯定能學會!

關於學習web前端的誤區和學習建議:
1.只看教程,不動手實戰
這個可以說是學習的最大的一忌,也是提醒過最多的一個註是事項!網上的教程有許多許多,各個語言,各個知識點,各方面的都有,javascript,html5,css3等的一些,隨便一搜就一大把,畢竟互聯網最大的優勢之一就是資源共用!但是很多人看教程就只是看教程,不動手實操。即使博客的教程,視頻教程再好,自己不動手實操,寫代碼,這樣的學習方式,記憶根本不深刻,容易遺忘,到頭來,可能什麼都沒學會!而且有些教程,如果沒有跟著動手實操,可能會蒙圈。
個人建議:要挑覺得適合自己的教程,也要動手實操,寫代碼。即使不是邊看教程編寫代碼!在看完了教程之後,一定要自己動手實操!過程中,可能會遇到些問題,但是這樣才會學習到更多,記憶也更加牢固!
2.只學框架或者庫
這個情況,針對javascript現在沒有以前嚴重了,在以前還是jquery傲視群雄的時候。很多人會在聊天的時候會說:有了jquery,為什麼還要學js?有了vue,為什麼還要學js?面對這樣的提問,我那時候沒有回答,心裡想:jquery或者vue就是用js實現的,不會js,學jquery或者vue第一學得吃力,第二學jquery或者vue肯定不會很深入。而且,萬一有時候,項目不允許用jquery或者vue,那就基本不會寫代碼了。這時候,如果學習其它的框架或者庫,基本又等於重新學一門語言了。
個人建議:先把基礎(html+css+js)打牢,再學其他框架或者庫。雖然在會js的情況下,我不敢說學js的框架或者庫就是查文檔,查API。但至少學js框架或者庫可以不會那麼吃力!
3.只顧著寫代碼
這個就是我之前的一個習慣,只顧著寫代碼,不知道:耦合,實例化,繼承等專業術語,和別人交流,無限蒙圈!根本不知道別人在說什麼!互聯網的技術更新的速度非常的快,隔三差五就發佈一個框架,一個庫,一個工具。雖然不是每一個更新的技術都需要學習。但是如果只顧著寫代碼,不瞭解新的技術。這樣很容易使自己停止不前,失去競爭力。
個人建議:在寫代碼之餘,要確保自己是不是瞭解代碼,對代碼有沒有一個認識。以及多點留意消息,看下有沒有什麼技術更新!如果覺得更新的技術很實用,或者自己有興趣,可以多瞭解下!畢竟互聯網是一個做到老,學到老的一個領域,技術更新的很快,如果跟不上流行的趨勢,說不定自己會被淘汰呢!
4.太早接觸複雜項目
這個情況,比較普遍,無論是在學校或者是現在的培訓機構。很多學習前端的人,基礎沒打牢,就在那裡揚言要做一個大項目,我聽到的有的人想做知乎,有的人想做世紀佳緣等等一些偉大的目標!但是全部人都是連網站的業務流程和邏輯都沒弄清,最後越搞越亂,就放棄了!之前的偉大目標都成了爛尾樓,作用最多就是一個代碼練習的作用!花了大量的時間,做了一件沒很大的實際意義的事情!
個人建議:從簡單到複雜,複雜的網站,都是有很多簡單的模塊。不妨先從簡單的功能做起,做完了一個功能再往裡面加功能!現在所處的公司就是這樣,開發的後臺管理系統,開發幾個月了,從一個只有員工的登錄註冊的功能,然後再逐一加功能,到現在項目逐漸完善!
5.好高騖遠,急於求成
這個情況就是多見於培訓機構出來的人。我不知道是不是所有城市都是這樣,但是廣州這邊,給我的感覺就是這樣。就是目標不切實際,對自己也不夠認識!之前在群聊的時候,在金三銀四那段時間,很多人找工作,聊天的時候也遇到過很多培訓機構的人。簡歷上是各種精通,剛畢業在培訓機構培訓幾個月,要麼就是自帶兩三年工作經驗,要麼就是說自己培訓了幾個月,技術水平和市面上兩三年的人差不多。總之就是把自己吹得無所不能!但是一齣題,就十問九不知。問閉包是什麼,不知道;問原型是什麼,不知道。問繼承是什麼,還是不知道。
上面所說的,只是一個錶面的現象,更重要的就是,好高騖遠這個情況,很有可能會導致自己難以找到工作!因為一些企業認為最高只能給你4000工資,但是你自己卻認為自己有實力拿到9000以上的工資。這樣情況,很難找到工作!給人的印象也不好!更重要的是,這可能會影響自己的職業選擇!
個人建議:從實際出發,評估自己。想下自己會什麼,能給企業帶來什麼!也可以停下別人的建議,和對比下別人的技術水平和工資,或者是上網找一些面試題,看下自己能不能完成那些面試題!最後評估下自己,認為自己處於什麼位置!一個人學習會有迷茫,動力不足那麼儘管來聯繫我吧,帶你起飛!

6.看到難點就逃避
這一點,相信很多人都有感觸,就在開發上,遇到上一個或者幾個自己覺得沒辦法實現的需求或功能。千方百計地想著逃避,比如:這個功能不是很重要,不做可以嗎?這個功能我從來沒弄過,搞不定的。這個功能外包給別人做吧,我們做不了!很多一些逃避話語。大家可以想下,如果每次都是逃避,那麼時間一久,自己技術水平是不是還停留在基礎那個階段?以後要怎麼提升自己的技術水平。
個人建議:迎難而上。在web前端開發這塊,如果遇上了難題是正常的,如果沒遇到難題就是見了鬼!面對難題,我們應該是挑戰難題,而不是逃避!大家都想提升自己的技術水平,挑戰難題不就是一個很好的提升技術水平的實戰機會嗎?如果完成了之前認為不可能完成的難題,這樣就是一個技術水平提升的見證!不是嗎?我也覺得,每天就寫簡單的業務代碼,不探索新知識,不挑戰難題,這樣做開發也沒多少意思!
7.能用就行,不想優化
這個也是一個很常見的情況,很多人認為寫的代碼能用就行,能實現需求就行!根本不管日後的優化。在開發項目或者開發插件上,雖然我也是提倡:先實現,再優化這個方式!但是並不代表我開發完了就完了,不會再想優化!如果不試著去優化自己的代碼,不探索寫代碼的更好方式,以後別說編寫高質量,簡潔的代碼了,因為自己把學習編寫高質量,簡潔的代碼的一個重要途徑給封鎖了。還有一個就是,項目上,有些問題可能是潛在的,就是現在看著項目沒出現什麼問題,但並不代表以後不會出現問題。反而在項目開發完了之後,試著去優化自己的代碼,探索更好的實現方式,試著編寫出高質量,簡潔的代碼。這樣難道不是一個很好的學習過程嗎?至於優化代碼的方式,很多很多(比如常說的:代碼過於重覆,是否引入設計模式?網站性能一般,可否進行優化?),優化這一塊,也不是說一步就優化到最好的,而是至少不會比以前差!關於優化,我之前也發過一些資源。很容易找到,網上的資源更是很多!大家挑著看便是!
8.不懂不問和不懂立刻問
不懂不問,這個大家都知道,就是遇到問題,從不問同事或者通過其他方式咨詢別人。就是自己在那裡苦思冥想,嘗試各種解決方案。這樣的方式,最壞的結果就是最終還是解決不了問題,讓同事來詢問開發情況。最好的結果問題解決了,但是解決問題所花的時間會肯定很多。
不懂立刻問,這個就是詞面的意思。遇到問題馬上問別人。自己沒怎麼思考或者根本不思考。這樣能解決問題,但是這樣會導致自己可能會頻繁的問同事,會搞得同事很不耐煩。如果把同事的耐心磨沒了,可能回答的語氣可能不會很好。這樣不僅影響同事之間的關係,還會讓自己之後不敢再請教同事,有讓自己處於上面所說的不懂不問的風險。
個人建議:適時請教。遇到不懂的問題,先自己結合上下文思考下,想下以前有沒有遇到這個問題,解決不了去網上找解決方案,如果還沒有解決問題,這個時候再問別人,問同事或者通過其它渠道問別人。這樣自己有了思考,解決問題的時候記憶也很深刻,也不會頻繁的打擾同事!
9.不懂裝懂
這個次面上跟上面的差不多,但實際上不一樣!不懂裝懂就是去問別人的時候,實際上別人的講解並沒有完全聽懂,可能是礙於面子或者是因為不好意思打擾別人那麼久,或者擔心打擾別人太久,所以裝作很懂。但是這樣可能忽悠得了一時,很快又會露出馬腳。這樣會搞得隔一會又要去問別人同樣的問題,這樣反而會搞得別人更加尷尬,更加為難!自己也會打擾別人更多的時間!
個人建議:如果有問題去問別人,只要你問的人不是一個非常沒有耐心的人。他都會耐心的解答你的問題!所以,當問別人問題的時候,一定要確保自己是已經弄懂了問題的緣由,同事一遍沒解釋清楚,自己直接回答不明白,相信很多人都會再詳細的解釋一遍。如果擔心同事工作忙或者其它原因,可以挑一個合適的時間!我現在問同事就是,要麼不問,要問就切底弄懂!當然了,我的同事都很有耐心,每次我有什麼問題,他們都會耐心解答,甚至是擴展開來講!
10.沒理清楚需求就寫代碼
很多人在接到需求之後,第一反應就是寫代碼,即使是在自己沒把需求理清楚之前也是照樣寫代碼。另一種情況就是,很多人是邊寫代碼,邊想需求。這個開發方式,萬一自己對需求理解有誤!可能會導致自己寫的代碼,很大一部分都要修改,甚至是全部刪除重寫。沒理清楚需求就寫代碼這個情況,發生的概率應該挺大的,但是一般來說很難發現這個情況,畢竟程式員對代碼的增刪改查是再正常不過了!我本身也不知道,就是在一次的技術分享中,老大提出來的,他的建議就是對於一些稍微複雜一點的需求,先理清楚需求,簡單畫個流程圖,然後在代碼裡面,先寫上一點註釋,再開始動手寫代碼!對於這一點,我現在就是在執行當中!除非需求真的很簡單,否則我都會在草稿本上簡單畫一下流程圖。比如下麵這個,這個已經是我畫的流程圖裡比較簡單的一個了。根據流程圖,寫好註釋,再寫代碼,這樣會比較有條理,代碼也清晰,日後的返工也可能會有,但是不會像以前那麼多!在開發時間上,效率上,都得到了一個提升!

如果你現在也在學習web前端,在入門學習前端的過程當中有遇見任何關於學習方法,學習路線,學習效率等方面的問題,你們都可以申請加入我的web前端學習交流群:600610151,裡面聚集了一群熱愛學習web前端技術的朋友,其中不乏有正在從事web前端開發技術崗位的大佬,歡迎你來一起交流web前端技術。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 動畫運行的原理 任何程式的動畫原理都是一樣的,即:視覺暫留,視覺暫留又叫視覺暫停,人眼在觀察景物時,光信號傳入大腦神經,需經過一段短暫的時間,光的作用結束後,視覺形象並不立即消失,這種殘留的視覺稱“後像”,視覺的這一現象則被稱為“視覺暫留”。 電影就是依靠視覺暫留,在感官上電影是連續的。使動畫有流暢 ...
  • 轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 原文出處:https://dzone.com/articles/cross-platform-mobile-development-2020-trends-and 多年來,跨平臺移動開發已經獲得了最流行軟體開 ...
  • 一、註釋​ 1.JavaScript中的註釋 (1)單行註釋 //我是單行註釋 (2)多行註釋 /*我是多行註釋*/ /** *我是多行註釋 */ (3)註釋文化 2.常見的 (1)彈窗 例如:window.alert(""); (2)控制台輸出 例如:console.log("優秀"); cons ...
  • 同源策略 瀏覽器中有兩個安全機制,一個瀏覽器沙盒(Sandbox),另一個就是同源策略(Same Origin Policy,簡稱SOP) ,下麵介紹同源策略。同源是指 、`同功能變數名稱 同埠`,必須三同,缺一不可。下麵列舉了一些例子,為方便讀者瞭解哪些是屬於同源,下麵列舉一些案例: 根據這個策略,a. ...
  • 在單頁應用中常常要用到路由。 傳統的頁面跳轉是瀏覽器請求新的頁面,渲染整個新的頁面。 單頁應用是把要跳轉的頁面的以組件的形式集成在當前頁面中,跳轉時瀏覽器不用發起新請求,因為目標頁面是當前頁面的一部分,直接顯示目標頁面那一部分即可。 demo 在單頁應用中使用路由 1、下載路由插件 npm inst ...
  • transition 代表 過度/opacity 代表 透明度/transform 代表 旋轉/1S代表1秒時間/這段代碼的意思是 該元素的透明和旋轉如果發生變化時會有1秒的過度效果。也就是漸隱漸顯,和旋轉的動畫。 transition主要包含四個屬性值:執行變換的屬性transition-prop... ...
  • 學了十幾天小程式雲開發,自己寫了個小項目練練手,本想著寫完之後發佈上線,讓別人也可以體驗該小程式,結果只有我一個人使用,真的是服了 覺得小程式還是沒有flutter,RN等原生開發來的舒服,也沒有H5混合式開法來的爽,(前提是不企業認證)也就這樣了,自己寫的項目自己欣賞吧, 下麵是失敗原因: 這原因 ...
  • 幾天持續的學習微信小程式,觀摩官方文檔,以下踩過的坑要避免了..... 1,小程式 wxml 標簽中使用 Object.keys().length 的方法失效 在 wxml 中使用了對象是否為空來作為判斷來顯示頁面信息的,而後在 js 的某個點擊事件中用官方的 setData() 方法給 data ...
一周排行
    -Advertisement-
    Play Games
  • 基於.NET Framework 4.8 開發的深度學習模型部署測試平臺,提供了YOLO框架的主流系列模型,包括YOLOv8~v9,以及其系列下的Det、Seg、Pose、Obb、Cls等應用場景,同時支持圖像與視頻檢測。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runti... ...
  • 十年沉澱,重啟開發之路 十年前,我沉浸在開發的海洋中,每日與代碼為伍,與演算法共舞。那時的我,滿懷激情,對技術的追求近乎狂熱。然而,隨著歲月的流逝,生活的忙碌逐漸占據了我的大部分時間,讓我無暇顧及技術的沉澱與積累。 十年間,我經歷了職業生涯的起伏和變遷。從初出茅廬的菜鳥到逐漸嶄露頭角的開發者,我見證了 ...
  • C# 是一種簡單、現代、面向對象和類型安全的編程語言。.NET 是由 Microsoft 創建的開發平臺,平臺包含了語言規範、工具、運行,支持開發各種應用,如Web、移動、桌面等。.NET框架有多個實現,如.NET Framework、.NET Core(及後續的.NET 5+版本),以及社區版本M... ...
  • 前言 本文介紹瞭如何使用三菱提供的MX Component插件實現對三菱PLC軟元件數據的讀寫,記錄了使用電腦模擬,模擬PLC,直至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1. PLC開發編程環境GX Works2,GX Works2下載鏈接 https:// ...
  • 前言 整理這個官方翻譯的系列,原因是網上大部分的 tomcat 版本比較舊,此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎,輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 1、jQuery介紹 jQuery是什麼 jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的JavaScript代碼庫(或JavaScript框架)。jQuery設計的宗旨是“write Less,Do More”,即倡導寫更少的代碼,做更多的事情。它封裝 ...
  • 前言 之前的文章把js引擎(aardio封裝庫) 微軟開源的js引擎(ChakraCore))寫好了,這篇文章整點js代碼來測一下bug。測試網站:https://fanyi.youdao.com/index.html#/ 逆向思路 逆向思路可以看有道翻譯js逆向(MD5加密,AES加密)附完整源碼 ...
  • 引言 現代的操作系統(Windows,Linux,Mac OS)等都可以同時打開多個軟體(任務),這些軟體在我們的感知上是同時運行的,例如我們可以一邊瀏覽網頁,一邊聽音樂。而CPU執行代碼同一時間只能執行一條,但即使我們的電腦是單核CPU也可以同時運行多個任務,如下圖所示,這是因為我們的 CPU 的 ...
  • 掌握使用Python進行文本英文統計的基本方法,並瞭解如何進一步優化和擴展這些方法,以應對更複雜的文本分析任務。 ...
  • 背景 Redis多數據源常見的場景: 分區數據處理:當數據量增長時,單個Redis實例可能無法處理所有的數據。通過使用多個Redis數據源,可以將數據分區存儲在不同的實例中,使得數據處理更加高效。 多租戶應用程式:對於多租戶應用程式,每個租戶可以擁有自己的Redis數據源,以確保數據隔離和安全性。 ...