网志有图好读版 : https://yschen25.blogspot.com/2019/07/blog-post.html
如果你有以下困扰，欢迎参考此篇文章 :
1. 我是初学者，有没有推荐的学习资源
2. 有没有推荐的书籍
3. 想去实体店面翻书，有没有推荐的店家
4. 原文书很贵，想买又不确定适不适合自己
5. 有没有论坛可以和大家互相交流
6. 我想要问问题，是要直接把程式码贴上去问吗
7. 切版很需要素材，有没有推荐的网站
而网络上已经有很多为什么要转职前端工程师、如何转职成前端工程师的文章，这边也有
一篇 2018 年成为 Web 开发人员的路线图可以参考来决定方向，这边就不复述了。
这篇主要是写给对于前端有兴趣的“初学者”、“非本科想转前端”的人，可以利用哪些
网站来帮助自己学习；因为我个人是非本科转前端，到现在差不多两年多了，想分享些自
己当初到现在用过觉得不错的学习资源、书籍与素材。
==前端学习网站==
* MDN
https://developer.mozilla.org/zh-TW/
提供了许多关于网站相关技术的说明和学习文件，虽然有些区块还没翻译，但讲解清晰有
范例，比起底下的 w3schools 更推荐看这个，正确性比较高。
* w3schools
https://www.w3schools.com/
大名鼎鼎的 w3schools，初学者入门款，我用过 freeCodeCamp、code School、codecademy 等
，但还是觉得 w3schools 最好用。有 HTML、CSS、JavaScript 等课程。
优点是版面干净清楚，且每个章节都有范例可以让你参考，如果在学习过程中有些概念想
实现看看，或是还不熟悉如何使用编辑器，可直接在范例上修改程式码来验证自己的想法
。
* Remove w3Schools plugin
这是个题外话，据我所知有些人不喜欢搜寻时看到 w3schools 的资料，觉得上面太多错
误资讯，所以还专门写了一个套件，装了之后可以在 google 搜寻中移除显示
w3schools 的相关资讯。
不过我觉得不管是上网查资料、看书或是听他人教学或多或少都有可能听取到错误的资讯
，所以不管资讯来源是哪，都不能完全尽信，还是要依靠逻辑、经验等去做判断。
再说回来这网站就初学者前期来说是值得使用的。
然后还记得当时会有个迷思是，是不是要把全部的 HTML、CSS 内容都看熟才开始切版，
结果会记了很多标签、属性、属性值等却没办法活用，建议可以看大概 3/5 就可以试着
切版，一边切一边学，比较可以知道自己观念哪里没弄清楚，不然很容易看过就忘了，或
是以为自己已经会了。
* freeCodeCamp
https://learn.freecodecamp.org/
使用关卡方式一步步教你观念，但实际用起来会觉得已经有基础观念的人，再用这网站会
学的比较扎实。
* jQuery 官网
http://api.jquery.com/
详细解释每个 api 用法，底下也有效果范例教学。
* udemy
https://www.udemy.com/
有时候只是看文字解说不够清楚，这网站就有提供影音教学影片，除了程式相关，也有如
设计、市场行销等课程，国内国外的讲者都有；常常特价，有很多内容实在还附上程式码
可供下载的英文课程才台币 300 多元，经济实惠，大推!!
有时候也会提供免费课程，可以加入这个FB社团 : Soft & Share 软件开发资讯分享，就
能随时收到免费课程提醒，像是这样 :
这些课程都是我免费拿到的
但说实在的，若需花大量时间去找免费资源，所花的时间都可以学更多东西了，有些必需
的软件、书和课程之类，在经济可负荷下就直接买了，不需要省这些钱。
* 100 个 udemy 的免费课程
https://udemycoupon.learnviral.com/coupon-category/free100-discount/
udemy 无限制时间提供的 100 个免费课程。
* CSS-tricks
https://css-tricks.com/
详细的 CSS 用法，常会分享一些样式的小 tip。
* zlargon 大大的Git 教学
https://zlargon.gitbooks.io/git-tutorial/content/
图文并茂，相当详细易懂的教学。
* Git常用指令 | qwerty
http://gitqwerty777.github.io/git-commands/
列出常用的git指令，后面都会简略叙述功能，快速查询指令时很方便。
==论坛==
* Stack Overflow
http://stackoverflow.com/
程式人必用网站，任何可以想得到的问题上面 99% 都有解答，只是是英文且搜寻时要下
对关键字；刚开始时不会下关键字时可以试着打几个重点描述，然后在一边找的时候，可
以一边看别人是怎么下关键字的。
* 掘金
https://juejin.im/timeline
包括前端、后端的技术讨论，从基础到钻研都有；喜欢的文章可收藏很方便。
* 牛客网
https://www.nowcoder.com/7729538
有各种程式试题可刷，除了有 CSS、JS、PHP，还有JAVA、GO 等等，能选题目类型、调难
度，还能记录题目，注册后可以看到答案解析，也有人会在底下分析、讨论。
有线上编程，可以线上刷题，还能看到其他人的解法。
还有各种笔试题、面试题可以刷，也有蒐集公司实际的试题、前端校招面试题目合集、JS
面试经典题目合集之类。
* ithome 铁人赛
https://ithelp.ithome.com.tw/articles?tab=ironman
这个超棒的，有各种神人挑战 30 天写技术文章，版面干净清楚好上手，文章内容也是很
详细。
==书籍==
如果觉得单看网站不够，希望能更有系统性的学习，可以考虑搭配以下书籍；这几本是我
去过好几家书店翻过后，觉得讲的最清楚的，图文并茂，且很不会一下就用很艰涩的名词
去解释，对于不习惯工程师语言的人来说平宜进人。
但不管别人再怎么推荐，最好还是自己去翻翻看，挑选自己容易理解的，毕竟最后还是要
自己能够看得下去。
* HTML5。CSS3 最强图解实战讲座
* HTML&CSS：网站设计建置优化之道
* JavaScript & JQuery：网站互动设计程式进化之道
* jQuery 最强图解实战讲座
==线上编译==
当遇到有问题想问人时千千万万不要直接贴一串程式码上去啊 QAQ，这样不但对方难以阅
读，也难以帮忙 debug，这时候可以利用线上编辑器，而且也不用考虑建环境问题。
* JSFiddle
https://jsfiddle.net/
如果常上 Stack Overflow 的人，一定常常可以看到回答问题的人用这个 Demo
* JS Bin
https://jsbin.com/xigodol/edit?html,js
保哥这有详细的解说如何操作
*CodePen
https://codepen.io/
版面简洁干净，但功能强大。
==书局==
天珑书局
地址 : 台北市中正区重庆南路一段107号
有超多电脑书，号称全台电脑书最齐的一家。有简体、繁体、原文书，价格比较便宜；感
觉店员也受过相关训练，在购买时还会跟你确定版本或附件，之前还听到店员跟外国人解
释两本程式书的差异。
==Plugin==
* CSSPeeper
可以侦测该网站的配色，并显示色号；也可以显示使用的图片，并可以打包下载，很适合
切版练习用 (不是让你去盗别人图片啊 XD)。
* ColorPickEyedropper
可以侦测你选取地方的色号，很方便抓在网站上看到喜欢颜色的色号。
==素材网站==
* Pixabay
https://pixabay.com/
在搜寻框旁有教学如何下关键字，可以搜寻到不少好照片。
* Pexels
https://www.pexels.com/
充满各式丰富的照片。
* Everypixel
https://everypixel.com/
大推!! 功能强大，可以选择筛选条件为 Free、直向横向照片、照片主要颜色、照片哪些
地方需要留白、照片是否为单一人物、照片作者名称。
* Unsplash
https://unsplash.com/
这网站很适合找有质感很有意境的照片，分辨率也很高。特色是每隔 10 天会上传 10 张
新的高分辨率摄影照片作品。
* Streetwill
http://streetwill.co/
跟前一个很像，有很多有质感、意境的照片。这网站提供愿意免费分享摄影作品的摄影师
上传高解析照片，可以在这里找到对于世界上不同景物的不同摄影角度照片。
* Foodiesfeed
https://www.foodiesfeed.com/
也是很有质感、以食物为主题的照片分享网站，可以打包下载汉堡、水果等等的美食主题
照片。
* Stocksnap
https://stocksnap.io/
充满各式丰富的照片。
* Subtlepatterns
https://subtlepatterns.com/
偏向网站底图。
* Freepik
http://www.freepik.com/
提供 Psd 档可以直接下载修改。
* 365 psd
http://365psd.com/
很多免费的 Psd 档可以下载，如果要你分享按赞，随便点一下再取消就可以下载了。
* Free psd
http://all-free-download.com/free-psd/
也是有免费的 Psd 档可以下载，但资源没那么多。
* Psd Finder
https://psdfinder.co/
* Flaticon
https://www.flaticon.com/
有丰富的 Icon 可以下载。
* Iconfinder
https://www.iconfinder.com/
和 Flation 一样能下载 icon，但能线上编辑选择的 Icon，并能下载不同 size。
* Fontawesome
http://fontawesome.io/
将 Icon 都以文字型式呈现，切版时常会用到。
==配色==
* Coolors
https://coolors.co/
可以随机帮你产生一组色号，省下配色的时间。
* Nippon Colors
http://nipponcolors.com/#tsuyukusa
以日式配色为基调的网站，选色后背景颜色会跟着变让你可以看整体颜色。
==灵感==
* Pinterest
https://www.pinterest.com/
不管是配色、网站设计、图案设计等，都可以在上面搜寻，相信这网站会给你带来不少灵
感。
* CodePen
https://codepen.io/
上面有很多精采的前端作品，还可以看到别人的程式码，也可以将自己作品放上去。
* Codrops
https://tympanus.net/codrops/
也是有很多精采的前端作品，有教学并供程式码下载
* Awwwards
https://www.awwwards.com/
这个网站定期蒐集优秀的网站设计案例，是追踪最新网页设计趋势的重要平台。
* Code My Ui
https://codemyui.com/page/1/
有很多日常想不到的小巧思，找不到灵感时可以上去看看。
如果还有什么推荐资源，欢迎补充~