0基礎怎麼學web前端?新手到大神的進階路線在這!

来源:https://www.cnblogs.com/TT485480/archive/2020/05/06/12834430.html
-Advertisement-
Play Games

結合個人經歷總結的前端入門方法,總結從零基礎到具備前端基本技能的道路、學習方法、資料。由於能力有限,不能保證面面俱到,只是作為入門參考,面向初學者,讓初學者少走彎路。 互聯網的快速發展和激烈競爭,用戶體驗成為一個重要的關註點,導致專業前端工程師成為熱門職業,各大公司對前端工程師的需求量都很大,要求也 ...


結合個人經歷總結的前端入門方法,總結從零基礎到具備前端基本技能的道路、學習方法、資料。由於能力有限,不能保證面面俱到,只是作為入門參考,面向初學者,讓初學者少走彎路。

互聯網的快速發展和激烈競爭,用戶體驗成為一個重要的關註點,導致專業前端工程師成為熱門職業,各大公司對前端工程師的需求量都很大,要求也越來越高,優秀的前端工程師更是稀缺。個人感覺前端入門相對容易,但是也需要系統地認真學習,在打好基礎後堅持學習,成為優秀前端工程師也只是時間問題。

學習任何知識最重要的都是興趣,如果經過一段時間的學習感覺不喜歡,那可能強迫自己學習是很痛苦的,效果也不會好,畢竟這很可能就是以後很多年生存的技能。

不過隨著互聯網行業的發展,前端必然是Web開發人員需要學習的知識,有時候是沒有專業前端工程師一起合作的,所以即使不做專門的前端工程師,掌握基本的前端技能為工作帶來方便。

 

 

 

必備基礎技能

以下是個人覺得入門階段應該熟練掌握的基礎技能:

HTML4,HTML5語法、標簽、語義。

CSS2.1,CSS3規範,與HTML結合實現各種佈局、效果。

Ecma-262定義的javascript的語言核心,原生客戶端javascript,DOM操作,HTML5新增功能。

一個成熟的客戶端javascript庫,推薦jquery。

一門伺服器端語言:如果有伺服器端開發經驗,使用已經會的語言即可,如果沒有伺服器端開發經驗,熟悉Java可以選擇Servlet,不熟悉的可以選PHP,能實現簡單登陸註冊功能就足夠支持前端開發了,後續可能需要繼續學習,最基本要求是實現簡單的功能模擬。

在掌握以上基礎技能之後,工作中遇到需要的技術也能快速學習。

基本開發工具

恰當的工具能有效提高學習效率,將重點放在知識本身,在出現問題時能快速定位並 解決問題,以下是個人覺得必備的前端開發工具:

文本編輯器:推薦Sublime Text,支持各種插件、主題、設置,使用方便

瀏覽器:推薦Google Chrome,更新快,對前端各種標準提供了非常好的支持

調試工具:推薦Chrome自帶的Chrome develop tools,可以輕鬆查看DOM結構、樣式,通過控制台輸出調試信息,調試javascript,查看網路等

輔助工具:PhotoShop編輯圖片、取色,fireworks量尺寸,AlloyDesigner對比尺寸,以及前面的到的Chrome develop tools,

FQ工具:lantern, 壁虎漫步

小編也在前端混了有幾年,整理了一些學習資料,對web開發技術感興趣的同學,歡迎加入新建的Q群:603985993,不管你是小白還是大牛我都歡迎,希望大家誠心交流!還有大牛整理的一套高效率學習路線和教程與您免費分享,與企業需求同步。好友都在裡面學習交流,每天都會有大牛定時講解前端技術!

 

 

學習方法和學習目標

方法:

入門階段反覆閱讀經典書籍的中文版,書籍中的每一個例子都動手實現併在瀏覽器中查看效果。

在具備一定基礎之後可以上網搜各種教程、demo,瞭解各種功能的實際用法和常見功能的實現方法。

閱讀HTML,CSS,Javascript標準全面完善知識點。

閱讀前端牛人的博客、文章提升對知識的理解。

善用搜索引擎。

目標:

熟記前面知識點部分的重要概念,結合學習經歷得到自己的理解。

熟悉常見功能的實現方法,如常見CSS佈局,Tab控制項等。。

入門之路

在整個學習過程中HTML CSS JavaScript會有很多地方需要互相結合,實際工作中也是這樣,一個簡單的功能模塊都需要三者結合才能實現。

動手是學習的重要組成部分,書籍重點講解知識點,例子可能不是很充足,這就需要利用搜索引擎尋找一些簡單教程,照著教程實現功能。以下是一些比較好的教程網址

可以搜索各大公司前端校招筆試面試題作為練習題或者他人總結的前端面試題還有個人總結的面試題(帶參考答案)。

原生javascript是需要重點掌握的技能,在掌握原生javascript的基礎上推薦熟練掌握jQuery,在實際工作中用處很大,這方面的書籍有《Learning jQuery》或者去jQuery官網。

建一個https://github.com/賬號,保存平時學習中的各種代碼和項目。

有了一定基礎之後可以搭建一個個人博客,記錄學習過程中遇到的問題和解決方法,方便自己查閱也為其他人提供了幫助。

經常實用Google搜索英文資料應該經常找到來自http://stackoverflow.com/的高質量答案,與到問題可以直接在這裡搜索,如果有精力,註冊一個賬號為別人解答問題也能極大提高個人能力。

經典書籍熟讀之後,可以打開前面必備基礎技能部分的鏈接。認真讀對應標準,全面掌握知識。

繼續提高

有了前面的基礎之後,前端基本算是入門了,這時候可能每個人心中都有了一些學習方向,如果還是沒有。可以參考前面必備技能部分提到的那兩個項目,從裡面選一些進行發展學習。以下是一些不錯的方面:

Grunt:前端自動化工具,提高工作效率

less css:優秀的CSS預處理器

bootstrap:優秀的CSS框架,對沒有設計師的團隊很不錯,與less結合使用效果完美

requirejs:AMD規範的模塊載入器,前端模塊化趨勢的必備工具

Node.js:JavaScript也可以做後臺,前端工程師地位更上一步

AngularJS:做Single Page Application的好工具

移動端web開發:智能手機的普及讓移動端的流量正在逐步趕超PC端

Javascript記憶體管理:SPA長期運行需要註意記憶體泄露的問題

High Performance JavaScript(Build Faster Web Application Interfaces)

Best Practices for Speeding Up Your Web Site:重要技能

語言基礎

JavaScript:

作用域鏈、閉包、運行時上下文、this

原型鏈、繼承

NodeJS基礎和常用API

CSS:

選擇器

瀏覽器相容性及常見的hack處理

CSS佈局的方式和原理(盒子模型、BFC、IFC等等)

CSS 3,如animation、gradient、等等

HTML:

語義化標簽

其他

有些東西不是考敲碼就能弄好的,我參與實習的時候感受到了很多,這些是我遇到的也是我感覺自己做的不好的地方

對於業務的思考:我個人這方面非常欠缺,所以放在最前面,在敲碼前要多思考業務

交流和溝通能力:這個非常重要,前端同時需要與項目經理、產品、交互、後臺打交道,溝通不善會導致很多無用功,延緩項目。

知識管理、時間管理:input和output的平衡,output是最好的input。如何做好分享,參與社區,做好交流,作好記錄。

對新技術的渴望,以及敢於嘗試。

入門書

入門可以通過啃書,但書本上的東西很多都已經過時了,在啃書的同時,也要持續關註技術的新動態。這裡推幾本我覺著不錯的書:

《JavaScript高級編程》:可以作為入門書籍,但同時也是高級書籍,可以快速吸收基礎,等到提升再回來重新看

《JavaScript權威指南》:不太適合入門,但是必備,不理解的地方就去查閱一下,很有幫助

《編寫可維護的JavaScript》和:

《Node.js開髮指南》:不錯的Nodejs入門書籍

《深入淺出Node.js》:Nodejs進階書籍,必備

《JavaScript非同步編程》:理解JS非同步的編程理念

《JavaScript模式》和《JavaScript設計模式》:JavaScript的代碼模式和設計模式,將開發思維轉變到JavaScript,非常好的書

《JavaScript框架設計》:在用輪子同時,應當知道輪子是怎麼轉起來的,講解很詳細,從源碼級別講解框架的各個部分的實現,配合一個現有框架閱讀,可以學到很多東西

《Dont make me think》:網頁設計的理念,瞭解用戶行為,非常不錯

《CSS禪意花園》:經久不衰的一部著作,同樣傳遞了網頁設計中的理念以及設計中需要註意的問題

《高性能JavaScript》和《高性能HTML5》:強調性能的書,其中不只是性能優化,還有很多原理層面的東西值得學習

《HTML5 Canvas核心技術》:我正在讀的一本書,對於canvas的使用,動畫的實現,以及動畫框架的開發都非常有幫助

《HTTP權威指南》:HTTP協議相關必備,前端開發調試的時候也會經常涉及到其中的知識

《響應式Web設計》:技術本身不難,重要的是響應式網頁的設計理念,以及移動先行的思想

《JavaScript語言精粹》:老道的書,也是普及JavaScript的開發思維的一本好書,非常適合入門

一些不錯的網站

github:沒啥好說的,多閱讀別人的源碼,多上傳自己的源碼,向世界各地的大牛學習

codepen:感受前端之美的必選之地,裡面有很多酷炫的效果和優秀的插件

echojs:快速瞭解js新資訊的網站

stackoverflow和segmentfault:基本上各種問題都能在上面獲得解答

google web fundamentals:每篇文章都適合仔細閱讀

static files:開放的CDN,很好用

iconfont:阿裡的矢量圖標庫,非常不錯,支持CDN而且支持項目

html5 rocks: 一個不錯的網站,很多瀏覽器的新特性以及前沿的技術,都能在這上面找到文章

css tricks:如何活用CSS,以及瞭解CSS新特性,這裡可以滿足你

JavaScript 秘密花園 JavaScript初學必看,非常不錯

w3cplus:一個前端學習的網站,裡面的文章質量都挺不錯的

node school:一個不錯的node學習網站

learn git branch:一個git學習網站,交互很棒

前端亂燉:一個前端文章分享的社區,有很多優秀文章

正則表達式:一個正則表達式入門教程,非常值得一看

各路大牛的博客:這個太多了,就不貼了,知乎上有很全的

各種規範的官方網站,不懂得時候讀規範

前端的定位

前端的定位關乎到你需要吸收什麼樣的知識和技能,決定在技術世界里你對什麼需要格外敏感。如果你認為前端僅僅停留在切頁面,實現交互和視覺的要求,那你對前端的認識還停留在初級階段。

阿裡終面的時候我問了考官這麼個問題:前端技術日新月異,範圍越擴越寬,標準越來越豐富,似乎任何一個觸角都能伸出很遠。怎麼給前端一個合適的定位?考官給我分析了半天,然後總結成一句話,就是用戶和網站的聯結者,用戶體驗的創造者(原話不是這樣,但大體是這個意思)。

也就是說前端的終極目標其實就是創造用戶體驗,提升用戶體驗,以用戶體驗為中心。不管你是從交互設計上下手,還是從性能優化出發,或者改進工作流提升工作流效率,最終都是為了創造和提升用戶體驗,最終都要體現到用戶體驗這一點上來。我認為這個總結非常有道理(當然“用戶體驗”這個詞太寬泛了,並且不僅僅是前端工程師的範疇,比如開發後臺的時候對一個數據處理過程進行優化,提升了整體性能,這也是對用戶體驗的一個提升)。

現在的前端工程師做到一定階段不可避免會接觸到很多比切頁面、實現視覺要求、實現交互等更深入的問題,比如前端自動化、圖像編程、性能優化等等,再往後推一點就是PHP/JSP/ASP/nodeJs,過去後端模板一般屬於後端的範疇,現在隨著前端架構的演進,可能會讓你去寫後端模板的代碼,需要用到後端語言(PHP/Java/C#等),這就是所謂大前端(然而這與前端的定位並不是相背離的,大前端處理的依然是與用戶接觸的部分,仍然是對用戶體驗的優化)。

可能最常見或者被談論最多的就是node,其實這幾種技術選型都可以,bat三家據說百度用PHP比較多,阿裡用node比較多。

以上是我對前端以及衍生出來的技術路線的一些淺薄理解,學習一個領域掌握它的整體上的走向和趨勢還是挺重要的。


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

-Advertisement-
Play Games
更多相關文章
  • 我是前端小白一枚,為了鞏固知識和增強記憶,開始整理相關的知識,方便以後複習和麵試的時候看看。OK,讓我們進入正題~ 先說說淺拷貝和深拷貝的理解吧,個人是這樣理解的:兩個對象A、B, A有數據B為空,B複製了A,我們修改A,如果B中的數據跟著變化了,那就是淺拷貝,如果沒有變化,那就是深拷貝。說明B另開 ...
  • 操作DOM 由於HTML文檔被瀏覽器解析後就是一棵DOM樹,要改變HTML的結構,就需要通過JavaScript來操作DOM。 始終記住DOM是一個樹形結構。操作一個DOM節點實際上就是這麼幾個操作: 更新:更新該DOM節點的內容,相當於更新了該DOM節點表示的HTML的內容; 遍歷:遍歷該DOM節 ...
  • 當面試官問道你高度塌陷時,人們第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; } 對,沒錯,這是一個完美的解決方案,但是我們有考慮過這個方案的 ...
  • 一、函數參數的解構賦值 二、函數預設參數 2.1 基本方式 2.2 可以預設實參 2.3 預設實參的覆蓋 但如果傳入實參,那麼就會把預設的覆蓋。 2.4 預設值可以是函數 三、箭頭函數 語法:參數= 函數體 單行語句可以省略花括弧,如果還是return語句,還可以省略return關鍵字。 多行語句不 ...
  • 登高遠眺 天高地迥,覺宇宙之無窮 基礎技術 "使用 JavaScript 框架的代價" 作者從 JavaScript 下載時間、解析時間、執行時間、記憶體占用四個角度評測了 jQuery、Angular、React、Vue 四個框架,最終得出結論:「框架不值得」,應該選擇原生 JavaScript 或 ...
  • 在實際工作或面試中,我們經常會遇到“數組去重”問題,接下來就是使用js實現的數組去重的多種方法: 1.將數組的每一個元素依次與其他元素做比較,發現重覆元素,刪除 var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5]; console.log(arr); // ...
  • 一、什麼是json? json的全稱為:JavaScript Object Notation,是一種輕量級的數據交互格式。它基於 ECMAScript (歐洲電腦協會制定的js規範)的一個子集,採用完全獨立於編程語言的文本格式來存儲和表示數據。【以上來自於百度百科】 簡單來說:json就是一種在各 ...
  • hello,我是愛學編程的小圓子。好久沒更新了呢,emmmmmmm....... 今天我們來學function function_name(...) {} function是觸發事件的時候觸發{}裡面的代碼的代碼 廢話不多說,上模板 <!DOCTYPE html> <html> <head> <me ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...