eb前端開發技術人才越來越吃香,而且web前端領域劃分越來越細,對技術的需求越來越高,想學習web前端的人也是越來越多。那么,如何學習web前端知識?從哪開始?轉型成為web前端工程師需要學些什么?小白到高手需要多久?
1.轉型web前端需要學什么
第一階段:你要從最基礎的HTML/CSS開始,簡單地說,HTML就是一堆非常簡單的標簽,而CSS則是把你畫畫的流程用英語按一定的格式寫出來。然后你需要理解常用HTML標簽的意思,學會各種CSS的屬性,還有CSS的盒模型、優先級、選擇器……
第二階段:Java學習,你要是想在網頁上實現交互效果,比如輪播圖、點擊按鈕后播放動畫等等,那么就必須學會Java。Java是一門完整、強大、熱門的編程語言,瀏覽器的各種交互效果都由它來做到的。你先要了解一些基礎的Java概念(變量、函數、基本類型)后,然后學習jQuery(Java代碼庫的一種),并且通過jQuery繼續使用CSS的選擇器。
2.轉職成為web前端
專精HTML/CSS的前端從業人員也就是前端重構。這里要提一下,有一個職業對于這塊很有優勢,那就是設計師。不管是UI設計師,還是平面設計師,在頁面上如何寫頁面,也知道怎么做的更好,并且更加理解Web世界,做出更“系統化”的設計。關于CSS的知識,你需要理解文檔流、浮動流等各種定位的方式與原理,理解CSS 的繼承復用思想、理解瀏覽器的差異、兼容等。關于HTML的知識,你需要學習語義化、可訪問性與結構的合理,以及“結構與樣式的分離”等。
你會愛上CSS 3的酷炫屬性,可以做出響應式網頁設計,用transiton和animation做補間動畫與關鍵幀動畫,用transform做縮放、旋轉、3D變換,還有圓角、漸變、陰影、彈性盒……掌握了以上的這些,你完全可以利用你的設計功底和web前端知識,做出微信的H5頁面、一些有趣的網頁,或者個人的網站。
3.如何提升前端技能
如果你還想做出更厲害的交互效果,越來越喜歡編程,建議你成為一個前端工程師/全棧式UI設計師。這時,你必須學會以軟件工程師的角度思考。你需要踏踏實實學習編程語言,深入理解作用域、對象、類、封裝、繼承、面向對象編程、事件偵聽、事件冒泡等一大堆編程概念,需要了解瀏覽器,學習DOM、BOM、CSSOM的API,甚至還有學習一些網絡原理,包括域名、URL、DNS、HTTP請求……
小編是一個有著5年工作經驗的架構師,關于web前端,自己有做材料的整合,一個完整學習web前端的路線,學習材料和工具。需要的伙伴可以私信我,發送“前端”等3秒后就可以獲取領取地址,免費送給大家。對于學習web前端有任何問題(學習方法,學習效率,如何就業)都可以問我。希望你也能憑自己的努力,成為下一個優秀的程序員!
如果你還處于迷茫階段或者是一個小白,那你不要著急著手開始學習,因為沒有目的和方法的學習,只會走彎路。這時候,建議你先深入了解有關前端方面的所有資訊,包括前景、就業、行業發展、技術囊括、職業等等,這樣才能有目的和方向的學習。
新民 編譯自 Hackernoon
量子位 出品 | 公眾號 QbitAI
在當前社會,技術日新月異,一個全棧工程師不及時學習新知識,掌握AI技能,再過兩年就算不上“全棧”了。
產品發燒友、前端小哥Shival Gupta在意識到這一點后,通過兩個多月的探索,掌握了基本的AI技能,并在Hackernoon上發文分享了自己的學習歷程。
量子位搬運過來,各位可以參考他的學習思路。
大家給初學者的建議,通常是通過吳恩達的Coursera課程來入門。
這樣開始很好,但是我在聽課時很難保持專注。不是說這個課程不好或存在其他問題,而是我真的非常討厭專心聽課。我習慣于通過實踐來學習,所以為什么不這么做呢?
讓我們開始動手實現神經網絡吧。
我沒有直接跳到神經網絡,因為還需要熟悉一些基礎內容。我先嘗試熟悉這個領域的所有專有名詞,為下一步的語言學習作鋪墊。
也就是說,第一項任務不是學習,而是熟悉這個領域。
我是個用JavaScript和Nodejs做開發的前端工程師,暫時也不想轉后端,于是就找到了一個叫做nn的簡單神經網絡模塊,并用它來實現一個帶有虛擬輸入的“與”門。
我選擇了這樣一個問題:對于任意三個輸入X、Y和Z,輸出為X和Y的“與”運算結果。
以下是實現代碼:
var nn=require('nn') var opts={ layers: [ 4 ], iterations: 300000, errorThresh: 0.0000005, activation: 'logistic', learningRate: 0.4, momentum: 0.5, log: 100 } var net=nn(opts) net.train([ { input: [ 0,0,1 ], output: [ 0 ] }, { input: [ 0,1,1 ], output: [ 0 ] }, { input: [ 1,0,1 ], output: [ 0 ] }, { input: [ 0,1,0 ], output: [ 0 ] }, { input: [ 1,0,0 ], output: [ 0 ] }, { input: [ 1,1,1 ], output: [ 1 ] }, { input: [ 0,0,0 ], output: [ 0 ] } ]) // send it a new input to see its trained output var output=net.send([ 1,1,0]) console.log(output); //0.9971279763719718
選擇這個問題,是受一份9行代碼構建神經網絡教程的啟發。地址:https://medium.com/technology-invention-and-more/how-to-build-a-simple-neural-network-in-9-lines-of-python-code-cc8f23647ca1
在我看來,上面的構建過程讓我對接下來的學習充滿了信心。當輸出值為0.9971時,我意識到這個網絡學會了如何實現一個“與”運算,并忽略無關的額外輸入。
這正是機器學習的主旨。通過向計算機程序輸入一組數據,并調整程序的內部參數,使它能夠以從訓練集觀察到的誤差減小方式,來得到對新問題的答案。
后來我才知道,這種方法也被稱為梯度下降(gradient descent)。
△ 梯度下降示意圖
在我實現了我的第一個AI程序后,我充滿信心,想知道作為一個開發人員,還可以用機器學習來做什么。
1. 我解決了若干個關于監督學習的問題,如回歸和分類。
2. 基于非常有限的數據集,我嘗試使用多變量線性回歸來預測哪個團隊將贏得某場給定的IPL電子競技比賽,實際的預測效果很差,但是我覺得很酷。
3. 我試用了Google機器學習云的一些demo,了解當前AI可以做什么。
地址:https://cloud.google.com/products/machine-learning/
4. 我偶然發現了AI Playbook(文末鏈接5),這是一個由安德森-霍洛維茨風險基金整理的干貨網站,確實是針對開發人員和創業者的最方便資源之一。
△ AI Playbook。地址:http://aiplaybook.a16z.com/
5. 我開始在Youtube上觀看Siraj Rawal的精彩視頻,這是一個以深度學習和機器學習為核心的專欄。
視頻地址:
https://www.youtube.com/channel/UCWN3xxRkmTPmbKwht9FuE5A
6. 我讀了HackerNoon上一篇講《硅谷》劇組怎樣用Tensorflow做劇中那個Not Hotdog應用的。這是深度學習中我們最容易上手的一個例子。
HBO真的做了這個App(限美國、加拿大):
https://www.seefoodtechnologies.com/nothotdog/
文章地址:
https://medium.com/@timanglade/how-hbos-silicon-valley-built-not-hotdog-with-mobile-tensorflow-keras-react-native-ef03260747f3
7. 我讀了Andrej Karpathy的博客(https://karpathy.github.io/),他是特斯拉的AI主管。雖然我無法理解里面的一些內容,這讓我很頭疼,但是我發現,在多花一些時間以后,我對這些概念有了一定理解。
8. 帶著信心,我開始通過復制和粘貼來逐行實現一些深度學習教程中的代碼,并在我自己的電腦上運行代碼,嘗試訓練相關模型。很卡……因為大多數模型需要很長的訓練時間,我也沒有GPU。
漸漸地,我將編程語言從Javascript轉換到了Python,并在Windows機器上安裝了Tensorflow。
這整個過程集中在被動地接受知識和建立知識庫上,因此當我遇到一個實際的用戶問題時,可以利用已有知識來解決。
正如喬布斯說過,你只能通過回溯過去理解其中的關聯。
作為電影“Her”的狂熱粉絲,我想構建一個聊天機器人。我設法在兩個小時內學會了Tensorflow的使用,并將這個經歷和我對用戶需求的理解整理成了一篇文章。
在做這個聊天機器人之前,我對NLP的了解僅僅限于概念層面。
嘗試了市面上眾多聊天機器人之后,我發現,它們在本質上只是圖形用戶界面的替代品。如果在圖形用戶界面上操作超過兩步點擊,用聊天機器人的用戶體驗會比較好,反之,用聊天的形式就顯得多余了。
開始構建聊天機器人的時候,我先給自己確定了兩條原則:
1. 聊天機器人應該說人話,也就是說它得理解自然語言;
2. 要用聊天機器人解決圖形UI中需要兩步以上操作的問題。
經過分析,我選擇構建一個通過自然語言命令找到正確日期的聊天機器人。比如說你可以問它“6天以后是幾號?”、“下個9月過完之后再過5周”之類的。
架構是這樣的:
然后,我跟著網上的一份教程,(地址:https://chatbotsmagazine.com/contextual-chat-bots-with-tensorflow-4391749d0077),用基礎的NLP技能和基于softmax的神經網絡,不到兩小時就構建了一個查詢意圖分類器。
在確定了用戶的意圖之后,系統會對字符串進行語法分析并輸入,然后返回我想要查詢的日期。
說真的,并不難。如果你用Facebook Messenger Platform、Telegram的Bot Platform,或者api.ai、wit.ai、recast.ai等等工具,可能比我還快。
更多關于構建聊天機器人的心得,見這個鏈接::
https://hackernoon.com/i-built-a-chatbot-in-2-hours-and-this-is-what-i-learned-f5dbb4ba5fcc
在我的AI學習之旅中,這篇文章具有里程碑式的意義。
它讓我在Twitter和LinkedIn上交到了很多朋友,他們長期深入地和我討論AI技術的發展,甚至可以在我遇到困難時幫我一把。我收到了一些關于咨詢項目的Offer,更讓我開心是,開始有一些年輕的開發人員和AI初學者來問我是如何入門AI的。
這也促使了我寫下這篇文章,希望能幫助更多的人從我的經歷中得到線索,并開始他們的學習之路。
萬事開頭難。
這絕不是一件簡單的事。
我最開始時用的是Javascript,后來突然換成Python,并學會如何用Python編程。
當我的模型在i7電腦無法訓練,或是經過數小時訓練,只返回一個無用結果時,我會感到煩躁。
學習AI的過程與學習一個Web框架不同。
這項技能要求你明白在微觀層面計算是如何進行的,并確定最為影響輸出結果的內容是代碼還是數據。
AI也不只是一個學科。這是一個總括性術語,其適用范圍可從簡單的回歸問題到未來的殺手機器人。與其他學科一樣,你可能要選擇AI中比較熱門的領域,如計算機視覺、自然語言處理,或者其他具有潛在發展空間的方向。
在和AI金融公司Atlantis Capital的Gaurav Sharma的交流中,他對我說:
在人工智能時代,“聰明”意味著某些完全不同的東西。我們要求人們去完成非常關鍵、具備創造性和有個人見解的任務,和那些需要高情感投入的工作。
對于計算機是如何突然學會自主決策的,你要為之著迷。你應該堅持的兩個關鍵原則是耐心和求知欲。
這是一個非常漫長的旅程,很累也很刺激。
但最重要的是,所有旅程都是相同的,千里之行始于足下,想上手AI就開始動手吧。
原文地址:https://hackernoon.com/how-i-started-with-learning-ai-in-the-last-2-months-251d19b23597
— 完 —
誠摯招聘
量子位正在招募編輯/記者,工作地點在北京中關村。期待有才氣、有熱情的同學加入我們!相關細節,請在量子位公眾號(QbitAI)對話界面,回復“招聘”兩個字。
量子位 QbitAI
?'?' ? 追蹤AI技術和產品新動態
幾年Web前端框架層出不窮,比如 React, Vue, AngulaJS等吸引了大量的注意力,前端技術發展勢頭迅猛,各大互聯網公司也越來越重視前端開發,前端開發再也不是過去那種按照設計圖做靜態網頁,再隨便寫點jQuery的職位了。現在,市場上對于前端開發的需求越來越大,我們經常聽說前端開發入門難度低,但學習前端開發究竟需要多長時間呢?學多長時間就能找到工作賺到錢?結合了周邊同事和自身的經驗來談談學習網頁開發到底需要花多長時間。
Note:一定要下定決心,并且要堅持。
1. 網頁設計的基本概念和理論知識(10天)
在學習制作網頁之前,必須掌握網頁設計的基本概念和理論知識。什么是靜態網頁?什么是動態網頁?網頁的整體布局是什么?網頁設計的原則是什么?網頁基本構成要素是哪些?基礎的網頁設計概念都不了解,那么對于之后要制作網頁更是難上加難。我認為利用10天時間了解網頁設計的基本概念和理論是必不可少的,時代在不斷變化,網頁設計也會更新換代。所以了解基礎知識是為了之后設計制作打好基礎。當然,還需要了解基礎的SEO知識。網上的視頻教程個人建議還是少看,一本好的書絕對讓你受益匪淺。推薦幾本好書供大家學習:
制作網頁設計
1. HTML AND CSS: DESIGN AND BUILD WEBSITES, BY JON DUCKETT
如何讓網頁設計更加功能化
2. JAVASCRIPT AND JQUERY: INTERACTIVE FRONT-END WEB DEVELOPMENT, BY JON DUCKETT
前端開發
3. LEARNING WEB DESIGN: A BEGINNER’S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS, BY JENNIFER NIEDERST ROBBINS
可用性:
4.DON’T MAKE ME THINK, REVISITED: A COMMON SENSE APPROACH TO WEB USABILITY, BY STEVE KRUG
2. CSS+HTML+JavaScript(1個月)
相對來說, HTML是最簡單的,只是標簽語言, 格式規范; CSS相對來說復雜一些, 有瀏覽器的兼容問題等。但二者組合就能實現很多頁面效果, 里面涉及的變化太多了。如果你只會基礎語法, 而沒有實際去寫過, 那樣是很難真正掌握的。我在這里說說我的經驗吧,我一開始學習的Bootstrap,簡單點說,就是給現有電商項目套上Bootstrap做的響應式皮膚。Bootstrap確實挺好上手,靠著官網的手冊,基本上遇到的問題都能自己解決。
JavaScript 也沒有那么難,你要知道Brendan Eich創建JavaScript語言一共就用了10天時間,所以它的語法并不復雜,相信你很快就能掌握基本語法。你可能還需要學習一些常見的庫的API,這個可以根據你的需求來安排,你要用到什么庫,就學習它的文檔。
我覺得最好的網頁開發學習資料就是 Mozilla Developer Network(https://developer.mozilla.org)的文檔了,涵蓋了HTML, CSS, JavaScript的方方面面,不論是初學還是老手查閱都是非常有用的,推薦給大家。
3. 開始制作網站(1個月)
了解了基本的知識,做了一些小練習之后,我認為最重要的是盡早參與實際項目,這樣才能得到真正的鍛煉。使用 Jekyll + GitHub Pages 為自己搭建一個靜態博客是一個很好的開始,只需要簡單的配置,不需要任何后臺開發,幾乎完全是前端開發。
建站的時間取決你自己對網站完成的滿意度,如果參考模板, 那么幾個小時內就可以搞定了;如果是要獨立開發一個新的網站又要內容全面好看,1個月是跑不掉的,甚至需要更長時間。
4. 工具軟件學習(半個月)
工具的掌握程度完全靠個人的領悟能力和學習,網上有很多關于以下這些工具的教學視頻,跟著學會事半功倍的。需要學習的基本軟件:
編輯器:Sublime Text
初學者我不建議立即使用強大的 IDE,先使用編輯器有利于學習。Sublime Text 是一款我個人非常喜歡的編輯器,界面優雅,操作流暢,自動支持語法高亮,還有豐富的插件,你也可以試試。
設計出圖、切片:Photoshop
Adobe Photoshop,簡稱“PS”,是由Adobe開發和發行的圖像處理軟件,Photoshop主要處理以像素所構成的數字圖像,使用其眾多的編修與繪圖工具,可以有效地進行圖片編輯工作,PS有很多功能,在圖像、圖形、文字、視頻、出版等各方面都有涉及。Photoshop非常專業,也稍顯復雜,是專業的平面圖片設計人員必須掌握的一款工具。作為前端開發,你需要跟設計師緊密配合,學習一些 PS 知識會對你之后的開發更有幫助。
原型設計:Mockplus(時間成本最低)
是一款上手非常簡單的網頁原型設計工具,通過拖拽就你完成一個簡單的交互,項目類型諸多,有自由項目,網頁項目,自定義項目,當然還有APP項目。網頁項目最大的尺寸為3000*6000,你可以任意設計都沒問題。200個封裝組件和3000個圖標可供使用,最近新出的格子功能更是方便使用,減少了很多重復設計的時間。
掌握一些原型設計知識絕對非常有必要,這是我投入最少卻收益最多的事情之一,我強烈建議你嘗試一下Mockplus,對之后在團隊工作的溝通會非常有幫助。
5. 學習設計知識(持續)
前端開發是一個直接面向用戶的職位,跟后端開發不一樣,你的成果是用戶直接可以看到的,我認為提高自己的審美,多掌握一些設計方面的知識,把握當下流行趨勢和動向也是很有必要的。而這一過程是不能用具體時間來衡量的,需要不斷持續吸收新的東西才能設計出理想的網站。這里有15個最好的網頁設計博客資源可供大家每日閱讀,我個人還是最喜歡medium。UI設計資源網站相信大家都了解了,dribbble和behance等都是每日必逛,必定是受益良多。
總結:
軟件開發是一個需要持續學習的過程,盡管前端開發入門難度低,但是近幾年來前端開發的復雜度越來越高,對個人素質的要求也越來越高。本文只是針對想要入門前端開發而找不到方向的人,經過這個過程后,你可以找到一個初級的開發職位了。不論做什么事情,學習是根本,希望這篇文章能幫助到新手。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。