[心得] 想转职前端工程师? 帮你蒐集各种资源!

楼主: yschen25 (卡)   2019-07-08 20:38:14
网志有图好读版 : 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/
有很多日常想不到的小巧思,找不到灵感时可以上去看看。
如果还有什么推荐资源,欢迎补充~
作者: dddingnan   2019-07-08 20:49:00
感谢整理
作者: play714 (play)   2019-07-08 21:01:00
推,请问你是如何练习的?
作者: GGFACE (ggface)   2019-07-08 21:22:00
....
作者: s93061018   2019-07-08 21:23:00
感谢分享 推推
作者: Hevak (Arthow Eshes)   2019-07-08 21:39:00
趁乱推两个可以线上分享有资料夹结构和引用 npm 的环境:https://stackblitz.com/https://codesandbox.io/这两个在碰到 react vue angular webpack 之类复杂状况的时候非常的好用,反之 jsbin jsfiddle 比较适合贴简短的另外私心比较喜欢 jsbin 因为他手机版界面有 console...
作者: laplacian (laplacian)   2019-07-08 21:43:00
推整理!
作者: pkro12345 (席龙)   2019-07-08 21:43:00
居然没codepen= =
作者: miaosue (sharon)   2019-07-08 21:51:00
请问有推荐撰写技术笔记的工具吗?
作者: Hsins (翔)   2019-07-08 21:53:00
hackmd 阿github 开个 repo 都用 markdown 也行啊
作者: richard07250 (blazing)   2019-07-08 22:03:00
推分享 不过w3c真的不推...建议改mdn https://developer.mozilla.org/跟w3c类型相似 不过我觉得整理得更好
作者: mioaria   2019-07-08 22:36:00
感谢分享
作者: paint (有斑纹的马)   2019-07-08 23:40:00
Nippon Colors看起来很酷
作者: SmallDruid (小d)   2019-07-09 00:17:00
用心推
作者: zyxl3102 (balabala)   2019-07-09 00:37:00
推!!!
作者: sb107912 (三等士官长 >)))   2019-07-09 00:59:00
>100个udemy的免费课程 连结失效囉
作者: cd8275 (小梦)   2019-07-09 01:16:00
作者: stiky7624 (wowevan)   2019-07-09 01:34:00
作者: highland (海兰德)   2019-07-09 10:20:00
W3C跟W3School完全无关,是不一样的东西,前者是开spec
作者: kingnamefu (Hey! K)   2019-07-09 10:38:00
推~感谢分享!
作者: l823qqqqqqqq (溺水a鱼..)   2019-07-09 10:59:00
感谢分享,很需要素材
作者: tina7996 (dream)   2019-07-09 14:19:00
谢谢整理
作者: paul800526 (大蝌蚪)   2019-07-09 15:26:00
作者: io2601   2019-07-09 16:11:00
推~~
作者: sssh5566   2019-07-09 16:39:00
Udemy建议买热门的吧,我以前上免费的都很差
作者: triplee (none)   2019-07-09 18:33:00
现在要查文件可以直接查MDN 内容跟观念都比w3school要清楚太多了 w3school做一些简单的速查即可
作者: toothlesses (toothless)   2019-07-09 19:13:00
太强大啦 感谢造福大家另外写技术文件我建议使用github+hugo
作者: qq076qq076 (小小菜鸟)   2019-07-09 19:34:00
推用心
楼主: yschen25 (卡)   2019-07-09 22:55:00
希望有帮助到大家XDD
作者: vmjoxjp   2019-07-10 03:25:00
用心推
作者: jack42107 (小克)   2019-07-10 09:26:00
真的不要推 W3School… 会害到人
作者: oppi19 (SpringField)   2019-07-10 13:58:00
不推铁人赛
作者: rinmai   2019-07-11 02:21:00
太棒了 感谢分享
作者: powergreen (happyboy)   2019-07-11 03:59:00
推整理
作者: luffy84217 (喇叭)   2019-07-13 09:54:00
推整理
作者: assassin762 (袁飞飞)   2019-07-13 14:24:00
优质好文,感谢有你
作者: Haruna1998 (无声雨)   2019-07-21 20:36:00
推 优质好文 谢谢你

Links booklink

Contact Us: admin [ a t ] ucptt.com