※ 引述《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的重点在于解决问题的能力跟掌握技术的速度
其他都比较其次，当然这年头很会说的都比较吃香啦....