2018届web前端培养方案

创新创业工作坊 信息与通信工程学院科协 web前端 培养方案

• 首先，照例寒暄几句，欢迎大家加入前端组进行学习，希望大家在接下来的一段时间里可以不虚此学，有所收获。
• （下述内容之后会有添加或修改，所以这个链接会持续使用）

相关注意事项及要求

• 首先就是每月进行一次学习进度及实践项目汇报，我们学习的每一个大内容大致持续一个月的时间。
• 其次，就是希望大家每个人都可以认真面对这个的学习，我个人不喜欢做作业，因而我也不会给你们很多任务什么的，所以不会过多占用大家的时间。
• 坦率来说，就入门来说，前端还是很简单的，学起来也是很有意思的，希望大家每个人都能有所收获。
• 前端这个东西，如果要学精的话要学的还是很多的，所以说，这里只带大家入门，主要学习基础的前端方面的技能以及了解要学习的方向（因为我不会告诉你们我也只是入门）

教学安排

Part I 基础知识巩固

• 巩固学习前端方面HTML和CSS基础知识，答疑解惑，稳固基础。
• 弄明白HTML和CSS中的语法和标签名的意义，才不容易在实践中犯低级错误，也能让大家在学习复杂知识时更加得心应手。
• 哦，还有编辑器，推荐两个方便简单的编辑器sublime text3和atom，不反对使用dreamweaver。

• 看慕课网的入门教程，并完成内置习题巩固知识，必看 第1章 第2章 第3章 第4章 第6章 第7章 第8章 第11章 （第12章选看），其他的有时间也可以继续看，有问题就立刻问，一定要把html和css的基础方面的知识掌握透彻明白
• 将w3school和菜鸟教程作为学习工具，有问题可以在上面搜索（只看HTML和CSS部分），还有一个百度一下
• 我把假期做的垃圾网页——工作坊招新网页打包发到群里，大家看一下，主看HTML部分以及CSS的较为简单的部分，复杂一点的建议先放弃（ps：有什么针对网页的好的方案欢迎提出）

Mission

利用所学知识，做一个小网页出来，详细要求如下：
1，找个自己喜欢的或者觉得好看好玩的网页或是图片，利用所学的HTML和CSS进行模仿。
2，没了。

Part II 实践与学习

• 进阶学习同时进行制作网页练习，学习JavaScript基础知识。
• JavaScript虽然和HTML和CSS一样，都属于前端的基础，但JavaScript比HTML和CSS更像一门编程语言，难度相对有所增加，而且在做一些简单基础的网页的时候，HTML和CSS足矣。

• 日常看慕课网的入门教程，这是一个JavaScript的入门教程，内容不多，只有4章，看这个主要是对JavaScript入门有个概念
• w3school和菜鸟教程上同样也有有关JS的内容以供查询，当然，也不要忘了百度一下
• 群里有个名为《JavaScript.DOM编程艺术（第2版）》的电子版书籍，先学完慕课网的内容再看这个，因为个人感觉这个相对来说读起来有点费劲（应该是我比较菜的缘故），第一章了解即可，后面先看完前六章吧，有精力的同学可以更深入地学习。
• 学完之后群里发的网页可以看JS简单部分了，鼓励动手搞破坏。

Mission:

利用所学知识，做一个小网页出来，详细要求如下：
1，网页中可显示现在的日期和时间，例如：我打开网页的时候，是2018年12月30日17:20，那么你的网页上显示的日期时间就是2018年12月30日17:20。（知识点：利用JS获取设备上的时间）
2，利用消息对话框的知识，实现这样的功能：点击一个按钮之后出现一个对话框，第一个对话框可输入内容，然后第二个对话框显示前面输入的内容，然后第三个对话框中做一个倒计时，从10开始倒计时（就倒计时就可以，不要求到0的时候停止）。（知识点：消息弹窗和倒计时）
3，做两个按钮，要求实现点击第一个，某些东西会消失，点击第二个，消失的东西会出现。
要求三个内容做到一个网页里面。（知识点：鼠标点击事件触发JS中的自定义的function）

Part III 学习时间

• 自行学习，准备期末考试。
• 不再安排前端方面的任务，大家专心复习，准备期末考试。

Part IV 深入了解CSS及JavaScript

• 通过实践，边实践边深入学习CSS及JavaScript相关知识，了解jQuery的用法及GitHub的使用。点击查看jQuery的入门
• CSS其实比你认识中的功能要强大得多，尤其是CSS3的出现，直接替代了JavaScript中的部分功能。
• 通过深入学习JavaScript，你会发现JavaScript真是个好用又直接了当的东西，但是JavaScript在线上加载速度较慢，因而合理使用JavaScript以及代码的优化就显得尤为重要。
• jQuery我了解也不多，就我现在的了解来看，jQuery是JavaScript的一部分，它可以简化缩短JavaScript的代码，很方便的样子。
• github。会用这个东西之后你就可以把自己做的网页（静态网页）挂上去，到时候你就可以直接把网页链接发给别人，“看，这是我自己做的网页，了解一下”。

Mission

将之前做的网页代码合到一个网页上，并将该网页发布到自己的github上，并获取链接

Part V 学习前端框架

• 学习前端框架的用法。
• 讲道理，这个我也还没怎么接触过，。。。所以，之后我们可能要一起学习。
• 前端框架是一个重要的东西，很多公司招聘前端工程师都有这么一条“至少会使用一种前端框架”，而且这个东西可以帮助我们去做网页，很多JS可以套用框架实现，以此让代码更加简化，运行时间更短。
• 由于本鶸对前端框架了解也不多，所以找了一些介绍前端框架的好理解的文章，链接附在下面咯

• web前端框架——一些简单理解
• 主流web前端技术框架有哪些
• 前端框架更新换代很快，所以经常用着用着就要学习新的框架，这里的两个介绍也是比较早的了，不过用来方便大家理解还是没什么问题

相关项目介绍

• 以下是现有的一些前端项目，之后会将这些项目发给大家，由大家进行优化、美化、充实内容等操作。
  
  1. 工作坊招新官网。
  2. 工作坊SME杯比赛网站。（完了，找不到了，gg）
  3. 工作坊与信通科协联合培养网页。

结尾

• 最后，希望大家都能有所收获，当然，学习也不要落下哟~

附录福利

生活小妙招（欢迎大家多多补充）：

Ctrl + Z——撤销
Ctrl + Y——重复（与撤销相反）
Ctrl + S——保存
Ctrl + X——剪切
Ctrl + C——复制
Ctrl + V——粘贴
Ctrl + B——加粗（office中可用）
Ctrl + A——全选
Ctrl + N——新建
Ctrl + D——不同地方用法不同，大家自行尝试
Ctrl + F——搜索内容
Ctrl + W——关闭当前标签页
ALT + F4——关闭当前窗口（可以在桌面上试试哦，会有奇效）
Ctrl + Shift——切换输入法（左右切换顺序相反）
ALT + Shift——切换中英文
ALT + Tab——切换窗口
Windows + Tab——切换桌面
按住Ctrl再点击鼠标左键，可以多选，编辑器中也可以多个地方同时编辑哟