图文好读版：https://medium.com/@LukaTW/c1db906a3110 Hi, 大家好 这是我半年来制作的教材，全数放在 Youtube 上面 ## 教材说明 ## 这是一份难度低，易上手，但是会带给你一些世界观的教材 因为来报名「馒头计画 - 从零开始茁壮吧」共有一百人。大约有 50% 以上 是没有完全没有学习过程式，或是程式能力非常初阶。因此我将教材设计的非 常非常的入门。 我认为「新手最大的敌人」是「好不容易鼓起勇气问了，却被老江湖狠狠嘴了 一翻，本来觉得有兴趣也会有不好的回忆。」因此我尽量避免这个情况发生， 新手友善的教材和环境是必要的。 ## 这份教材记录着我过去的学习路径 第一件事情，这份教材记录着我过去的学习路径，也就是说「我真的是用这样 子的方式在学习」，并且用着教材中所述说的方式在思考问题。 在学习中我会不时带到以前初学时学习技术的过程和使用了什麽方式来学习。举 个例子来说，当我学习 CSS 的时候，我接触到了 CSS Dinner 这个开源专案， 非常生动有趣。 CSS Diner https://flukeout.github.io/ 此时我会让你看看，我以前真的有用 CSS Dinner 练 CSS 并写成技术笔记！ 然後跟你说一说，CSS 学习有哪些需要注意的地方。 我几年前的技术笔记 https://codingluka.com/front-end/css-dinner/ 换句话说，我以前怎麽入门 Web 前、後端，我认为学习的正确观念，都浓缩到 了这份教材之中。 ## 写这份教材的目的「不是」要让你成为工程师 你可能觉得很疑惑，不是让你成为工程师那还做这份教材干嘛阿？ 制作这份教材的目的，为的是「让你尝试看看，写程式是什麽感觉」，如果你觉 得不排斥，觉得有趣，那就继续学下去吧！ 我相信大家会觉得有趣的，因为「学程式就是在学习解决问题的方法」，能够帮 助别人解决问题，会得到回馈，会得到成就感，这个过程是大部分人会喜欢的。 当然也有可能会不喜欢，或是觉得不适合，在馒头计画第一代 100 人教学中，大 概有 5 位左右的同学学一学发现自己不太合适，因此退出。我完全可以理解。不 是每个人喜欢的东西都一样。 还不确定自己是不适合的时候，先踏出第一步，尝试看看，如果觉得不喜欢，尽 早作出选择。这样比一直犹豫不决，原地踏步好的太多。 很多教学「预设你就是要来学程式的人」，而我喜欢的作法是，你试试看写程式 对你来说有没有意思，写程式对你来说有没有帮助，世界之所以有意思就是因为 每个人想做的事情不一样。 ## 教学大纲与影片 详细大纲请点进去原文内观看，这边列出影片连结 0.1 课程介绍 课程目标与培养的能力 http://bit.ly/2mugJk0 0.2 课程介绍 课程目标与培养的能力 http://bit.ly/2CEwCcN 1.1 开发环境的准备 一 介绍文字编辑器，与发展的历史 http://bit.ly/2Omd1mg 1.2 开发环境的准备 介绍 Vscode 与 Emmet http://bit.ly/2Ttt8Q 1.3 Chrome 开发者工具简介 http://bit.ly/2V0beFS 1.4 笔记工具 Hackmd 介绍 http://bit.ly/2umQo8e 2. 认识网页 - 什麽是 HTML？什麽是 CSS？ http://bit.ly/2Fwf4BC 3.1 Command Line 新新手入门 为什麽要学习 Command Line + Mac 版操作 https://youtu.be/VIeim7f8rUE 3.2 Command Line 新新手教学 Windows 环境架设 https://www.youtube.com/watch?v=VHxTh5zX1Z4 3.3 Command Line 常用指令介绍 (Command Line 101) https://www.youtube.com/watch?v=I6wvQhuxjEY 4.0 前言 .mp4 https://youtu.be/fkXUi7HmX1Y 4.1 Git 是什麽？ Git 如何帮助开发？ https://youtu.be/4p1YxdVJTV4 4.2 Git 挑战 #1#2#3 https://youtu.be/yxmfoBdwUHY 4.3 git 挑战 #4#5#6 https://youtu.be/7ulpVsxiQ_0 4.4 #7 分支 Branch 基本操作，多个分支如何 Merge 与处理冲突Conflict https://youtu.be/2_PUPkMneg0 4.5 使用 Github Pages 上传你的静态网页作品集 https://youtu.be/Rg4_ajE-KPA 4.7 带你认识很棒的 Git 资源，让你遇到Git 状况迎刃而解！ https://youtu.be/ZANOvogIhUM 5.1 什麽是 HTML https://youtu.be/PMmKoVaZDko 5.2 建立你的第一个网页 https://youtu.be/90pMvFTkywE 5.3 HTML 文件的架构 https://youtu.be/fptJ7Q2Gqck 5.4 认识 HTML 元素 https://youtu.be/CAve4ABiSqE 5.5 HTML 元素的结构 https://youtu.be/5TGDlMLqnpg 5.6 HTML 的绝对路径与相对路径 https://youtu.be/Lqi0NkXW64Q 5.7 CSS 如何跟 HTML 搭配使用 https://youtu.be/BSW_nT_0wQU 5.8 在 HTML 中使用 javascript https://youtu.be/UB-vmO-YerA 5.9 Semantic 语意化 https://youtu.be/Fo2r_GUFKLw 5.10 作业 Free Code Camp https://youtu.be/mPpSkctLCCQ 6.1 学 CSS 配馒头 part 1 http://bit.ly/2ku1IOx 6.2 学 CSS 配馒头 Part 2 http://bit.ly/2m3Pexp 7.1 学 JS 配馒头 Part 1 http://bit.ly/2krSXV2 7.2 学 JS 配馒头 Part 2 - Event http://bit.ly/2mt9zfR 8.1 jQuery 的教学(1) 学 jQuery 配馒头 http://bit.ly/2kZDNqr 8.2 jQuery 的教学(2) 学 jQuery UI 配馒头 http://bit.ly/2muaFbf 这次就简单的分享制作的教材，希望对大家有帮助^^ --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 36.228.21.211 (台湾) ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Soft_Job/M.1569154600.A.D3B.html 有复杂度的我会选择先教，先学 HTML CSS JS 之後要进入 Command Line 和 Git 会觉得头很晕，要适应很久，这是我的学习习惯，较复杂的会先处理 补上 4.6 Git 教学 什麽是 PR？ 来发送你的第一个 PR 吧 https://www.youtube.com/watch?v=O8QtTSQbVvc 另外补上 git 系列详细操作小抄，目前只有这个系列有操作小抄 https://github.com/codingluka/Git-Tutorial 因为制作成本太高，後来就走随性路线 XD ※ 编辑: BignoZe (118.165.14.46 台湾), 10/03/2019 02:30:51