网志有图好读版 : 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/ 有很多日常想不到的小巧思，找不到灵感时可以上去看看。 如果还有什麽推荐资源，欢迎补充~ --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 123.194.142.182 (台湾) ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Soft_Job/M.1562589512.A.CBA.html ※ 编辑: yschen25 (123.194.142.182 台湾), 07/08/2019 20:39:53 我是会找网站 别人建好的Template 照着他的版型和功能去切出来 然後比对别人和我切法的差别是什麽 网站可以上比如templatemonster去找~ 感谢分享!! 我也比较喜欢有console的XD Codepen我放在灵感那了 再来补在线上编译那 感谢~ 如楼下大大所说 hackmd好用 喔喔好喔~这个的确更好 感谢分享 ※ 编辑: yschen25 (123.194.142.182 台湾), 07/08/2019 22:19:52 感谢提醒~以补上 了解! 谢谢指正 已修正= =+ ※ 编辑: yschen25 (123.194.142.182 台湾), 07/09/2019 22:53:10