※ 引述《Lucya (我是男的..)》之銘言：
: 小弟目前html css js jquery的基礎書都有看過了
: 有看過前端資源懶人包
: https://goo.gl/WoCY6h
: 裡面的東西實在很多,
: 不知道方向改往哪
: 目前只要是基礎的書給我,
: 打開基本的書7~8成的內容都懂再說什麼
: 不知道接下來該怎麼走..
: 丟一個網站給我,要我刻出來我沒有辦法
: 而現在是照著一本書 叫做"CSS 你不可不知道的400範例"
: 每一個程式碼都嘗試做一次
: 裡面其中一個大概長這樣
: https://codepen.io/anon/pen/MVpXoR
先說我不是前端工程師
個人認為這年頭學資訊的東西，除非你還是學生在上課
不然看書學都趕不上時代的變化，直接看官方文件然後看範例，實作
這是我認為最實際的方式，當然有個缺點就是沒做過的就可能不會
不過現在的技術發展太快太多，不可能有人可以都懂，這缺點我個人可以接受
看起來你的情況是有東西照做可以做，但沒辦法從抽象的概念轉成實體
換句話說就是給需求要實作可能有困難，就像你說的給你一個網站無法刻出來
其實這個問題可以靠多練習實作去改善，大致上有幾個步驟可以走
1.細節修改：實務上很常見
以你的例子來說，:hover bar的顏色你是用亂數產生
今天要改成亂數的固定顏色，或是改成指定某些顏色組合，你要怎麼做 ?
或是hover的transition效果要修改，你可以自己想幾個方向去改，試著做到
你可以自己想需求給你自己做，一方面掌握這些東西
一方面這也是實務上你會遇到的需求修改，只是你自己想需求而已
2.掌握package：肯定會遇到
這年頭大部分前端都是靠各種package堆起來，你看到一個新的package
你可以多快看懂，掌握，運用到自己的東西上 ?
舉個例子，前幾天我在hackernews上看到rough.js
https://github.com/pshihn/rough (我star的時候才不到100，現在已經6k+...)
我試了一下，參考他範例用D3套了個台灣地圖
https://died.github.io/tw-map.html
因為我也沒用過D3.js，加上又是用v4語法跟網路上大多範例不同
所以花了點時間才做出來，但這水準太低了還不足以當作品集
https://roughjs.com/examples/contributed/balloon-animation.html
大概要到這樣的demo才比較可以當作品，雖然技術不是很複雜
但對於不懂的人會感到不明覺厲
https://www.aria.ai/snake.html
如果可以做到這樣就很能在面試加分了XD
(上面兩個作品都是網友給rough.js demo用的)
3.具體實作：總是會遇到的
東西做多之後，你可以具體想個你想呈現的東西，避開後段，只用前端做出來
舉例來說，你可以找個open data的資料來源，拉這些資料組出你要的頁面
找自己有興趣的做可以更投入，比如現在花蓮捐款正夯
你可以找產業分析、營業額、繳稅...等資料，去分析企業補助合理性
(data visualization正夯)
或是現在虛擬貨幣蠻熱的，也有很多api資料可以拉，拿來做個整理或分析
這些都是前端可能會做的
上面講的都是小型或是單一的需求，實際上還是會有從無到有做個站的情況
不過那個從需求訪談到wireframe到刻css跟js功能等等，不是沒經驗空想就能搞定
我覺得你多做些作品，然後進公司累積經驗就會對這個比較有想法了
差不多就是這樣，順便給個建議
目前我看head hunter的需求，台灣前端缺的framework
前三依序是 react > angular > vue
好好選擇可以增加面試機會XD
其實我認為寫coding的重點在於解決問題的能力跟掌握技術的速度
其他都比較其次，當然這年頭很會說的都比較吃香啦....