前端小白前端小白階段的項目都是在哪裡找的~?

12-29

在大三下最後一天終究想明白自己想幹嘛，放棄了考研，目前在學校留校鑽研前端中，剛把基礎htmlcss看完，感覺暑假找到實習已經無望。招聘都說要一定經驗的人，所以特別想問問前端小白階段你們這些項目都在哪裡找到的，哪怕是基本的psd圖片對應的代碼也行，自己看書沒有經驗找工作要求經驗這種看不見的方向好可怕。ps,有沒有收留經驗少但認真好學的哪怕工資很少的實習或項目的大牛們可以聯繫我(????ω????)謝謝~

收藏的乾貨都拿出來啦

Free Code Camp - http://www.freecodecamp.com/

目前有9個zipline項目都是純前端，還有好多教學。

百度前端學院 - https://github.com/baidu-ife/ife

現在正進行中。找不到組就自己做吧，都沒那麼難的。

http://thecodeplayer.com/

和上面兩個不太一樣，是實時代碼，觀察實時變化，推薦~

最終目的是學習，不要所有項目都只用一種技術，這次用了angular，感覺熟悉了很多，下個就用React等等。

前言

現在前端發展日新月異，前端工程化、模塊化、組件化等模式和思想也愈來愈成熟，基本上只會寫頁面已經不足以找到一份實習了。我覺得初學前端的同學需要重視JS基礎，別太依賴jQuery、Vue等類庫或框架，用原生JS實現一些Demo練練手。當然，最後還是需要熟悉使用一個框架的，推薦在Vue和React中選擇。

在學習前端基礎的同時，可以多逛逛很多優秀的技術社區，比如掘金或者SegmentFault來拓寬技術視野，對於激勵自己以後的學習和發展也很有幫助。

練手項目

項目的話，必須推薦百度的IFE前端技術學院啊，組隊線上刷項目push到GitHub，然後相互review評分，同一個功能需求代碼的實現方式可能會有很多，可以多看看其他團隊的代碼實現並取其精華。

還有FreeCodeCamp社區(全球的非盈利編程學習社區，線上刷題線下面基)，成都FCC線下沙龍做的挺不錯。下面是咱面基的照片。

FCC線上也會有很多階段性的項目可以練手

上來就推薦新手看紅寶書或犀牛書這樣真的不太好，視頻學習更易於理解，學習曲線更平滑，如果想深入學習就可以去看書了。

視頻的話，國外有Treehouse、Youtube，國內我會看慕課網

最近慕課網也推出了付費實戰課程，我買過一期HTML5閱讀器的實戰，一些基礎的東西可能要自己看書看文檔，但是一些開發思路和解決問題的方案還是需要有人帶，老師算是大牛，有很豐富的項目開發經驗，現在課程更新使用Vue重構，還長了一倍的價格，哈哈，我覺得挺值。

我的項目

當自己看了基礎寫過Demo、跟著大牛走了幾遍項目（或者Github上看過一些源碼），基本上就能開始想想自己可以把之前學的東西整合起來做個什麼項目了。

我是從用jQuery做Todo應用開始的，然後就是寫了一些小插件（原生JS插件、jQuery/Zepto插件）；在FCC上補基礎，做了些比較入門的JS演算法題；搭建個人博客的時候，把WordPress換成了Jekyll，苦於沒有滿意的主題模板，就乾脆自己擼了一套博客主題；學習Vue，做了個購物車項目；沉迷王者農藥無法自拔，在微信上線了王者圖鑑小程序...

學習資源

最後，分享下我自己覺得不錯的學習資源吧：

按著慕課網的Web前端工程師路徑走一遍
搭配入門書籍《DOM編程藝術》和Mozilla 開發者網路文檔，要重視基礎的學習！
可以開始嘗試著寫靜態網頁了，同時需要理解HTML語義化和學習CSS布局、BFC等知識。寫頁面可能會接觸到各種奇技淫巧，知識點也會比較凌亂，建議多寫筆記和看W3C文檔查缺補漏，這是個慢慢積累的過程。
上CodePen看看各種炫酷的demo，有喜歡的就Fork吧，學習別人的代碼是如何寫的，自己模仿著來。而且使用codepen在線coding炒雞方便！
學習使用Git，並成為全球最大同性交友網站的一員~
參加百度前端技術學院或者FCC，動手做做上面的小項目，順帶讓Github一片綠
有了一點學習前端的經驗後，嘗試像我一樣搭建一個獨立博客吧~ 不懂後台伺服器資料庫？沒關係，用Jekyll或者Hexo這類靜態博客框架吧，再自己寫一套主題也算個人小項目了！
有空逛逛掘金、SegmentFault等技術社區，拓寬視野
代碼量上來了就可以深入編碼規範了
英語好的同學可以去Codecademy、StackOverflow
跟上前端開發的最新前沿
保持不斷進取和敬畏技術的心

我收藏的工具類資源：

Iconfont-阿里巴巴矢量圖標庫很不錯的圖標資源站，新版已經上線快支持一下！
Color Hunt ColorDrop 配色站，萌萌的
Regexper 正則表達式可視化，學正則的利器
BootCDN 國內免費的CDN

希望對同在學習前端的你有所幫助。

百度前端學院
baidu-ife/ife · GitHub
以下我我完成作業的情況
Gaohaoyang/baidu-ife-practice · GitHub

update
2016.6.7
現在還有很多人關注這個問題，更新一下我的答案。
百度前端學院每年都有更新。可以關注他們的官網百度前端技術學院，還有官方微博Baidu前端技術學院的微博

我當年參與了百度前端學院2015年春季班，花費不到3個月，認真做完了當時的4個大任務，當時已經錯過了很多大公司的實習生招聘，但聯想實習生招聘的比較晚，於是去筆試面試，試試自己的實力，結果成功拿到了聯想服務的前端開發實習offer。

下面是2016年的任務截圖，雖然已經錯過了報名時間，但是任務和筆記都是公開的，可以自己繼續做做。總共52個任務，分4個階段，我認為能認真做完大部分就非常牛逼了！

初學者跟著做一遍這些任務，就可以認為是入門前端技術了。
下一階段就是進階了。2016.06.08
有人問到如何進階。
我覺得應該是：複習基礎，學習ES2015，學習框架，進大公司實習，跳槽到技術更牛逼的公司。

樓主的描述正是我所親身經歷的。基本上總結為：剛畢業-無經驗-求實習-求平台

我是從製藥轉前端的，這個過程很艱辛，剛畢業面試了多家公司都因非計算機專業或缺乏經驗拒絕了。後來巧妙的「曲線救國」，在產品崗工作一段時間，轉到了前端。

那段時間一直在啃書，《鋒利jQuery》《Dom編程藝術》《Javascript高級程序設計》等，跟樓主一樣就開始慌了起來，似乎理論無法找到實踐來檢驗。後來才知道實戰從來不缺，就像生活中的美當我們看不到的時候，只是我們眼睛不夠雪亮。我把這些來源分為兩個途徑，一種是圖文並茂的，一種是聲色俱全的。

「圖文並茂」指的是來自各種前端開發網站分享關於技術性的文章，這些網站有W3C Plus、W3C fun、W3C Tech、伯樂在線、張鑫旭博客、阮一峰博客等，仔細品味某些文章你會發現其實有些文章所總結的技術就足以寫個demo去驗證或著完善，這就是實戰。

「聲色俱全」指的是來自於視頻網站，這裡比較推薦的是慕課網、極客學院、網易雲課堂，裡面直接就給了許多前端實戰的視頻，當然推薦的是看完脫離視頻再敲，而不是跟著視頻一節一節的敲，這樣你才會發現自己敲代碼過程中所遇到的問題。

另外補充一點就是關於樓主想要的那種整站的psd，其實國內就有這樣的模板網站（百度搜索html5模板），但世界那麼大，何不出去走走看看？國外的dribble、maxdesign、uplabs也許會給你更多的靈感，如果需要模仿做一個靜態網站，設計精美複雜的網站會給你開發帶來更多的啟蒙。舉個個人的例子吧，我網上看到一個h5播放器覺得挺漂亮，想做個練練手，於是一個項目就誕生了。預覽在線項目在哪呢，這裡比較推薦存放在github、coding、碼雲上。

其實項目就是這樣一個一個積累下來的，但你自己手寫了幾個demo的時候，我想樓主找實習就會更有底氣些了。

這是我寫過的私人非企業項目，希望對你有所啟發：

HTML5移動端音樂播放器：https://github.com/alex1504/jquery-mobile-player

Vue2.0簡易案例：https://github.com/alex1504/vue2.0-demo

Vue-spa七牛圖床：https://github.com/alex1504/vue-qiniu-image-bed

微信小程序（口袋吉他）：https://github.com/alex1504/wx-guita_tab

免費做很快有，問都不問直接做更無憂（看到現有網站，複製一個出來練手並作為案例）。

自己先把東西系統地學一遍，然後對著psd甚至就一個你覺得力所能及的網站，自己寫出來，包括當中的動效，交互，jq也好js也好，用封裝好的某些庫也好，只管把它做出來（個人建議自己寫，先不考慮引入特定功能的庫）。
把常見的動效，例如輪播圖，tab標籤什麼的都當小練習做一遍，jq寫一遍js寫一遍，然後你就累積了一些東西了。這時候再用自己掌握的技巧去寫一個個人主頁，push到github上，簡歷，面試的時候就可以牛逼哄哄地有話可說了

——分割線——

因為自己也是通過自學，剛剛上崗實習不久，所以對於你的問題的新鮮感特彆強，忍不住想要多說一點點，權當我是對之前經歷的總結吧

實戰很重要！
實戰很重要！
實戰很重要！
重要的事情說三遍！你可能覺得css就一個樣式而已，margin就上下左右而已，很簡單對吧？你隨便畫幾個div框框肯定很簡單，但是當你實戰，整個頁面的布局需要自己思考的時候，你會遇到各種各樣的問題，單一個background-color可能就會坑死你。但是沒關係，硬著上，想辦法解決（能自己解決就不查，能查就不問，能問就不看答案，等都做出來了再查再問去學別人的思路）。不用多，做一個完整的頁面，你可能就會遇到非常多常見的布局問題，樣式問題，動效問題，一一解決以後，功力會大增，基礎會更牢。

接下來就拿著你積累的東西去找實習吧，過程中吸取經驗，想想常見的面試問題，學學與後台的數據交換什麼的，前端工程師可不是頁面仔，更不是「切圖的」。

加油！

可以先按照淘寶天貓之類的網站切幾個頁面熟悉一下html跟css，以及一些簡單的動畫。

然後找點有後端公開api的做一些有交互的應用。比如說國家氣象局提供的天氣介面，就可以做一個天氣預報應用等。

1.jQuery插件庫
2.模板之家
3.源碼之家

前端div+css3實戰案例:div+css3代碼繪製hellokitty

第一份實習是大一處於非常幼稚階段於是親戚托關係找了一個公司能帶帶第二份實習大二經過第一份實習的洗禮，更努力的去學習，後來是內推到一家公司第三份辭職後跟別人接外包而我的大學只過去了一半。

推薦Free Code Camp
全世界人民都在用
要想學好前端
英語很重要

我覺得嘛，要找個靠譜的師傅，比什麼都強。

仿寫別人的網頁，寫寫別人的psd都太幼稚了，這樣只能生產更多的菜鳥。

光寫個個人網站遠遠不夠。開發十幾個成熟的，達到上架app store標準的web(hybrid) app是最好的辦法。

盡你全力，盡你所能
寫一個個人主頁

如果是小白階段，估計應該是先把css學好，隨便找個網站，用css做到一模一樣，就能學習到非常多的

我目前的階段和你的一樣，不知道你的問題解決了沒有，我也很迷茫很慌張！不清楚自己到底要得到什麼？

要學要了解的好多好多，不要貪多，html，css，JavaScript，基礎三大項，先花很長時間把這些打紮實了，打紮實就是一遍一遍一遍的做，基礎很重要非常重要，學html5正好與c3和js結合一起多練練，剩下的學些jq之類的庫和各種框架，我現在自己規劃的學習路線，原生的js要多練

彷寫淘寶，天貓等大型網站，還原出來也就可以去找工作了。

我也是前段小白，學校學的也記得不太多了。托家裡親戚找了個公司，今天開始正式的實習工作。。經驗這東西，你可以把你期末做的課程設計稍加潤色拿出來，這都是可以的，出來也用不到多少，都是需要重新學的，關鍵看態度