diff --git a/README.md b/README.md index 6fd7f87c..e68a36ba 100644 --- a/README.md +++ b/README.md @@ -1,141 +1 @@ -![百度Web前端技术学院](asset/github.jpg) - -手机访问的同学不要忘记请点击下方的“View all of README.md”查看完整信息。 - -# 最新公告 - -[任务3已经发布](https://github.com/baidu-ife/ife/tree/master/task/task0003)，初级班的任务时间是从5月7日至5月18日，中级班为4月30日至5月10日。 - -[任务2已经发布](https://github.com/baidu-ife/ife/tree/master/task/task0002)，初级班的任务时间是从4月24日至5月7日，中级班为4月18日至4月27日。 - -[任务1已经发布](https://github.com/baidu-ife/ife/tree/master/task/task0001)，初级班Review提交截止时间为**4月23日**，中级班为**4月16日**。 - -高级班同学会在4月13日晚上8点前邮件大家题目列表供选择。 - -百度Web前端技术学院正式开学，第一期学员已经确定，见[名单](https://github.com/baidu-ife/ife/blob/master/studentlist/201501.md)。大家可以开始做一些[准备工作](https://github.com/baidu-ife/ife/blob/master/task/preparation.md) - - -## 目录 - -[学院介绍](#学院介绍) - -    [这是一个什么样的学院](#这是一个什么样的学院) - -    [为什么我们要办这个学院](#为什么我们要办这个学院) - -[培训方式及学习流程](#培训方式及学习流程) - -    [学习流程](#学习流程) - -        [报名成为学员](#报名成为学员) - -            [报名方法](#报名方法) - -        [进行编码任务挑战](#进行编码任务挑战) - -            [任务提交方法](#任务提交方法) - -        [毕业面谈及评价](#毕业面谈及评价) -[联系我们](#联系我们) - -# 学院介绍 - -## 这是一个什么样的学院 - -        **百度Web前端技术学院**（Baidu Institute of Front-End Technology简称IFE）是一个由百度EFE团队、百度人力资源部校园招聘组联合出品的、面向在校大学生的前端培训组织，我们希望能够借助百度大量优秀的前端工程师以及丰富的前端知识积累，帮助大学生们更加高效、系统地学习Web前端技术。 - -## 为什么我们要办这个学院 - -        如今，一个互联网产品的用户体验好坏，极大程度决定了这个产品的成败，Web前端技术作为距离用户最近的技术领域，也因此成为一个越来越重要的岗位，整个业界对于前端工程师的需求量在最近几年迅速增长。很多公司产品的前端交互越来越复杂，前端工作量越来越大，前后端工程师配比从10年前的1:10演变成了1:3，1:2甚至1:1。同时，前端工程师不再仅仅是大公司的奢侈配备，浏览一下各招聘网站，你会发现如今创业公司也纷纷把前端职位作为公司创始初期必不可少的需求。 - -        另一方面，Web前端技术的飞速发展，许多前端工程师的工作不仅仅只是切图等一些技术含量不高的工作，HTML5、ES6、Node.js、WebGL等新技术也早已不仅仅是“研究性”、“前瞻性”的东西，很多过去看来的新技术已经大量地运用到线上。技术飞快的发展和深入对前端工程师无论在深度还是广度上都有非常高的要求，因此，这也给企业在招聘前端工程师时，往往因为要求高而很难招聘到合适的人才。 - -        基于我们对于前端人才需求的渴望以及市场上优秀前端人才匮乏的现状，我们把目光放到了最具潜力的校园，希望通过自己微薄的力量为整个前端行业能够多培养一些人才，也希望借此机会能够传播、分享一些百度在前端领域的一些积累。最后，也希望能够吸引到优秀的、热爱前端的同学加入百度。 - -# 培训方式及学习流程 - -## 培训方式介绍 - -        我们从14年春季开始尝试做了一些小范围培训，同时对很多同学做了关于前端学习方面的调研，发现在校同学在学习前端技术时最大的困扰有以下三个方面： - -* 前端技术点非常多，无从下手，总感觉东一榔头、西一棒槌，缺乏系统性 -* 缺乏有效的实践，尤其在没有实习机会时，很难有效、主动地进行代码实践 -* 缺乏指导 - -        基于这三个因素，我们把教学的方法定为：提供一系列由浅入深，由点到面的编码挑战任务，并把前端所需要的各种技术知识点通过实践来让同学们学会。同时，我们会安排许多优秀的百度前端工程师，帮助进行代码的Review，进行一对一的指导。 - -## 学习流程 -### 报名成为学员 - -        想完整地体验在IFE的学习流程，需要做的第一步是成为我们的学员，为了保证我们能够更加有效地安排一对一指导交流的工程师，我们需要限定每一期学员的招生数量。 - -        同时，为了在让初学者能够从最基础的内容开始学习的同时，对于已经有一些经验的同学，我们会设置不同级别的班级，让这些有经验的同学可以跳过一些基础课程，挑战更有难度的任务。我们会设置以下3个班级： - -* **初级班(Junior)**，面向零基础及初学者，从零开始学习。分为三个学习阶段： - * **HTML、CSS、JavaScript基础培训与实践**，让你掌握基本的语言知识，能够实现非常简单的页面开发 - * **实战小练习**，针对日常研发中会遇到的一些技术点，进行针对性实践，让你可以掌握一些基础的实战技能。 - * **大作业阶段**，给予较为复杂、全面的任务，把前两部分所学综合运用，并开始学习百度前端开发的各种流程与工具 -* **中级班(Intermediate)**，面向有一定的前端基础，做过一些小的实践，希望再增加一些复杂项目实践经验的同学。中级班减少了入门篇，分两个学习阶段： - * **实战小练习**，针对日常研发中会遇到的一些技术点，进行针对性实践，让你可以掌握一些基础的实战技能。 - * **大作业阶段**，给予较为复杂、全面的任务，把前两部分所学综合运用，并开始学习百度前端开发的各种流程与工具。 -* **高级班(Advanced)**，面向已经有非常不错前端技术基础及实战经验的同学，希望挑战一些深度的前端研究性课题。我们会在我们的众多开源技术产品中挑选一些有难度的课题让同学进行自由选择后挑战任务。挑战成功的同学也会成为这些产品的贡献者之一。 - -#### 报名方法 - -1. 学习github使用方法； -2. fork本项目； -3. 在报名目录下，比如您要报第一期的初级班，就到目录`apply/2015001/junior/`，按照`apply_example.md`模板文件，建立以您github账号命名的报名文件（如您的github账号为`diysimon`，则命名为`diysimon.md`，初始内容与`apply_example.md`一样）；中级班到`apply/期数/intermediate`，高级班到`apply/期数/advanced`； -4. 按照md文件内容中的提示完成该文件内容的补充； -5. pull request你的md文件。 - -`感谢D2 2014大会提供给我们的报名办法` - -**第一期招生人数：** - -* 初级班：暂定50人； -* 中级班：暂定20人； -* 高级班：暂定5人。 - -根据实际报名情况我们会做适当调整。 - -**报名挑选原则：** - -* 您是16年以及16年以后才毕业的在校大学生； -* 您完整、真实、准确地录入了报名文件中的所有信息； -* 您能够保证有足够的时间和精力投入到我们的培训（至少每天3-4小时的投入）； -* 高级班需要进行电话面试来决定是否报名成功。 - -### 进行编码任务挑战 - -        报名成功后，您就可以按照我们安排给您的任务及材料开始进行一个又一个任务的学习和编码。 - -        每个任务都有完成的限定时间，每完成一个任务，按照[任务提交方法](#任务提交方法)进行提交，我们的工程师收到提交后会对您作业进行Code Review并与您进行沟通，根据完成情况决定是这次任务提交结果成功还是失败。如果失败则进行修改后重新提交。 - -        同一个班级的同学完成每个任务的时间段是相同的，即所有人在同一时间开始进行任务，并在截止时间前完成任务，若当前任务未能在规定时间内完成，你也需要放弃当前这个题目，继续和其他同学一起参加下一个任务的挑战。 - -        我们鼓励并欢迎学员之间多交流、分享。 - -### 任务提交方式 ### - -任务提交方式会在每个任务说明中描述。大体方式为在专门开设的任务提交issue回复你的任务地址。 - -**整个学习周期** - -整体学习周期预计为 **2个月**。如果中途因为个人原因退出，可以随时与我们沟通。 - -### 毕业面谈及评价 - -        当所有任务完成后，我们会安排工程师对您进行一次类似于技术面试的面谈或电话面谈，根据面谈结论，我们会给予一份带有对您在IFE学习的评价的毕业证书。对于所有获得毕业证书的同学，我们会在征得您同意的情况下，在我们网站中放上您的评价信息，方便您找工作时，其他企业对这些信息的确认。 - -        同时，我们针对每期最优秀的一些学员，会给与最佳学员的荣誉称号，以及进入百度实习甚至校招的机会。 - -# 联系我们 - -欢迎在项目的issue中提问，我们会在那里进行回答。 - -如果有不方便公开讨论的问题，可以通过邮件 ife(at)baidu.com 联系我们。 - -更加欢迎关注我们的微博 weibo.com/baiduife - -关注我们的微信公众号：搜索baidu_ife或扫描下方二维码 -![二维码](asset/weixin.jpeg) +i of Front End diff --git a/apply/2015001/advanced/apply_example.md b/apply/2015001/advanced/apply_example.md deleted file mode 100644 index 3e6e588d..00000000 --- a/apply/2015001/advanced/apply_example.md +++ /dev/null @@ -1,33 +0,0 @@ -# 高级班报名表 - -请认真、如实、详细填写如下报名信息。 -同时，为了避免您个人信息泄露，我们尽可能地避免让您填写过于隐私的信息 - -## 个人简介 - -（必填）姓名（若担心隐私问题可填写昵称）： -（必填）学校： -（必填）专业： -（必填）毕业时间： -（必填）学历： -（选填）家庭居住城市： -（选填）未来期望工作城市： - -## 联系方式 - -（必填）Email： -（选填）联系电话： -（选填）QQ： - -## 关于前端 - -（必填）什么时候开始接触前端？因何接触？ - -（必填）你理解的前端是做些什么事情？ - -（必填）你为什么要学习前端？ - -（必填）介绍一个你做过的最复杂的前端项目，其中遇到最困难的技术问题是什么，你如何解决的？ - -（必填）你自我评价当前你的前端技术能力如何，可以举一些详细的例子来描述能力水平 - diff --git a/apply/2015001/intermediate/AngelaDuoduo.md b/apply/2015001/intermediate/AngelaDuoduo.md deleted file mode 100644 index 4396aef7..00000000 --- a/apply/2015001/intermediate/AngelaDuoduo.md +++ /dev/null @@ -1,43 +0,0 @@ -# 中级班报名表 - -您好，以下是我的报名表内容。 - -## 个人简介 - -（必填）姓名（若担心隐私问题可填写昵称）：多多 -（必填）学校：北京邮电大学 -（必填）专业：计算机科学与技术 -（必填）毕业时间：2016年3月 -（必填）学历：硕士 -（选填）家庭居住城市：山东省济南市 -（选填）未来期望工作城市：深圳=杭州>北京 - -## 联系方式 - -（必填）Email：dxshatangju@foxmail.com -（选填）联系电话：15210835403 -（选填）QQ：1206350598 - -## 关于前端 - -（必填）什么时候开始接触前端？因何接触？ - -------2013年末至2014年初在公司实习做网站，有前端部分，于是萌生兴趣。正式系统学习在2014年4月左右开始。 - -（必填）你理解的前端是做些什么事情？ - -------以技术为支持让用户获得更好的产品体验。具体来说可能包括编写html与css开发页面，利用Js脚本支持用户与网站交互，可能会开发组 件化框架，使用node.js做一些偏服务器短的事情等等。 - -（必填）你为什么要学习前端？ - -------因为兴趣，也觉得这是一个有发展的方向。 - -（必填）介绍一个你做过的最复杂的前端项目，其中遇到最困难的技术问题是什么，你如何解决的？ - -------最复杂的是用node.js做的轻博客系统，因为是新手所以有关express使用和异步编程的很多问题都很困难，解决方法是找了一份express 网站的源代码参考做。 - 其实完全独立做的没有很复杂的项目，就是类似图片轮播插件，一些分页这样难度的组件，canvas动画等。 - -（必填）你自我评价当前你的前端技术能力如何，可以举一些详细的例子来描述能力水平。 - --------觉得自己目前的状况是基础不错，学习能力尚可，前端项目实践经验缺乏。css布局的一些概念和原生js的使用有一定掌握，可以通过 学习，看demo来自己实现一些组件和动画，jquery等框架上手也比较容易。但是比较“学院派”，实践中用到的前瞻性的技术都只是自己 做过尝试而没有做过比较完整的项目，比如node.js，也对移动端、mvvm等没有比较多的了解。 - diff --git a/apply/2015001/intermediate/Sunmgal.md b/apply/2015001/intermediate/Sunmgal.md deleted file mode 100644 index 05b79136..00000000 --- a/apply/2015001/intermediate/Sunmgal.md +++ /dev/null @@ -1,48 +0,0 @@ -# 中级班报名表 - -请认真、如实、详细填写如下报名信息。 -同时，为了避免您个人信息泄露，我们尽可能地避免让您填写过于隐私的信息 - -## 个人简介 - -（必填）姓名（若担心隐私问题可填写昵称）：孙可倾 -（必填）学校：大连民族学院 -（必填）专业：计算机科学与技术 -（必填）毕业时间：2016年6月 -（必填）学历：本科 -（选填）家庭居住城市：贵州 -（选填）未来期望工作城市：北京 - -## 联系方式 - -（必填）Email：skq110@qq.com -（选填）联系电话：15140318125 -（选填）QQ：159005964 - -## 关于前端 - -（必填）什么时候开始接触前端？因何接触？ - - 我开始是通过学姐学长的介绍对前端有一定的了解，然后因为自己对变化莫测的前端技术的喜爱学习至今。 - -（必填）你理解的前端是做些什么事情？ - - 在我的理解，前端浅显地来说，美观、和谐的UI设计和布局，可以满足用户在浏览网页时更好的用户体验。优化过的前端代码可以提 高整个页面的性能，减少用户的流失。 - 稍微深层次地说，前端也用于数据和业务逻辑的处理，注重与后台之间的配合，改善整个网页的性能。 - -（必填）你为什么要学习前端？ - - 从个人兴趣来说，前端工程师更像程序员中的Artist，不仅需要有一定的审美，还要有出色的编程水平，是一个极具挑战职业。 - 从现实问题来说，前端在中国现在相对需求大，已经不同于以往的切图仔，需要满足中国上亿人口对网络的需求，所以竞争较大，需要的个人不断提升，有进步就会有对生活一直积极向上的态度。 - -（必填）介绍一个你做过的最复杂的前端项目，其中遇到最困难的技术问题是什么，你如何解决的？ - - 若是回忆过去遇到的一些困难，被卡住过不去的一道坎，比如做轮播图时，开始一直弄不清this的指向，以及数组与数组间的关系，后来深入学习了控制台的用法，体会了控制台的作用，用alert()一步步测试，最后完成了轮播图的效果，也学习了this的工作方式。 - -（必填）你自我评价当前你的前端技术能力如何，可以举一些详细的例子来描述能力水平 - - - 熟悉HTML、CSS、JAVASCRIPT(JS-DOM操作，JS面向对象编程)的基本知识，会做一些经典特效，Jquery正在学习中。 - 可以通过psd图、切图（CSS-sprite），运用HTML/CSS代码百分百还原psd图，加入一些简单的JS特效。 - 原生JS写过的特效：选项卡、淘宝页面特效（如轮播图、价格转换、倒计时抢购）、抖函数效果、文字高亮效果（替换）、随机图 片滚动等等。 - diff --git a/apply/2015001/intermediate/fromIRIS.md b/apply/2015001/intermediate/fromIRIS.md deleted file mode 100644 index 3c3fdb83..00000000 --- a/apply/2015001/intermediate/fromIRIS.md +++ /dev/null @@ -1,62 +0,0 @@ -# 中级班报名表 - -## 个人简介 - -（必填）姓名（若担心隐私问题可填写昵称）：吕达达 -（必填）学校：浙江理工大学 -（必填）专业：机械设计及其自动化 -（必填）毕业时间：2016 -（必填）学历：本科 -（选填）家庭居住城市：温州 -（选填）未来期望工作城市：杭州 - -## 联系方式 - -（必填）Email：417611525@qq.com -（选填）联系电话：15757184650 -（选填）QQ：417611525 - -## 关于前端 - -（必填）什么时候开始接触前端？因何接触？ - - 我从2014年9月份开始接触前端方面的知识，先从html，css开始，接着javascript，jquery。 - 因为在9月份之前的那个暑假，我拉了一个web后端的同学做一个创业项目，我与他交流了2个月，长了很多关于web端方面的见识，从他口中得知现在web分前后，我也慢慢的对全新的前端职能开始感兴趣。再者因为我一直在寻找自己的职业规划之路，明确知道毕业不能从事机械设计研发的岗位，刚开始创业，在创业途中接触到了前端知识，并因此喜欢上前端，经过一段时间的接触发现自己对前端有很强烈的求知欲，故立志以此为未来职业。 - -（必填）你理解的前端是做些什么事情？ - - 最基础的是能用最优的htmlcss把页面搭建好，根据需求进行浏览器兼容性的解决。负责web前端的交互效果，用户打开网站能点的、能看的、能交互的功能、效果就是前端要做的事情。我觉得前端也需要处理一些跟后端相交的部分，比如一些数据等。 - 技术型的前端更加侧重逻辑上的代码构建，比如编写一些可维护的js插件，js库，可以方便的用在日常工作中，美工型的前端侧重页面的重构，写出最优最兼容的、可维护性高的页面。 - -（必填）你为什么要学习前端？ - - 首先，我为了生计！这是最重要的，我学习前端是为了以后从事相关工作，折腾了两年多，现在终于沉下心来做着自己感兴趣的事情，并能因此糊口，这是大幸。 - 其次，机缘巧合接触到前端并让我爱上前端，也爱上了这个职位。我想做一名前端工程师。现在学这些弱语言虽然也不易但学的很舒心。我喜欢这种语言的既视感。写出来的看得见，大家也能看得见。我也迫不及待地去巩固加深js，日后再去接触一些后端语言python，ruby等。 - -（必填）介绍一个你做过的最复杂的前端项目，其中遇到最困难的技术问题是什么，你如何解决的？ - - 一个手机端零食网站。(http://lvdada.coding.io) - 技术问题：写购物车的时候不知道怎么通过点击复选框以及商品增减按钮共同影响总价格显示。（多个事件共同影响一个结果时还比较模糊） - 解决办法：通过google或者百度去搜一些相关购物车的插件，模仿，解读。我也会把代码放到jsbin上，在segmentfault上贴demo地址发问，在豪情的qq群里发问，有些人会跟我说思路，有些人会贴代码，有些人给我stackoverflow的链接，去理解，最后自己再摸索，去解决。 - -（必填）你自我评价当前你的前端技术能力如何，可以举一些详细的例子来描述能力水平 - - 入门不久的水平。只能写一些零碎的简单的js代码。对这门语言没有深入的学习了解运行机制，还停留在表层。 - 技能略知：html，css3，javascript，jquery，json。 - - 代码小片段：*(http://lvdada2.coding.io) - - 阅读书方面：DOM编程艺术，高程3，css那些事，还有一些jquery，css3相关书籍。 - - 网络自学方面：在慕课（imooc.com）上学习过许多课件，尝试跟着学习一些小案例。在上面学习了jquery的基础知识。看过miaov关于js的视频，跟着里面做过一些小例子。 - - - 小作品： - - * [lvdada.coding.io](http://lvdada.coding.io) - coding地址：[https://coding.net/lv_dada/qiaoqiao.git](https://coding.net/lv_dada/qiaoqiao.git) - 14年12月份写的只适配手机端的一个前端小网站，主要用了bootstrp为了适配手机屏幕，用了jquery写了购物车的功能。 - - * [caichen.coding.io](http://caichen.coding.io) - coding地址：[https://coding.net/lv_dada/caichen.git](https://coding.net/lv_dada/caichen.git) - 14年10月左右帮朋友做的一个静态企业网站，主要用了html、css。自己没有用原生js写，而是用了网上的插件。 diff --git a/apply/2015001/intermediate/michaelluang.md b/apply/2015001/intermediate/michaelluang.md deleted file mode 100644 index b14bdfb8..00000000 --- a/apply/2015001/intermediate/michaelluang.md +++ /dev/null @@ -1,60 +0,0 @@ -# 中级班报名表 - -请认真、如实、详细填写如下报名信息。 -同时，为了避免您个人信息泄露，我们尽可能地避免让您填写过于隐私的信息 - -## 个人简介 - -（必填）姓名（若担心隐私问题可填写昵称）：梁哲 - -（必填）学校：大连理工大学 - -（必填）专业：控制工程 - -（必填）毕业时间：2016 - -（必填）学历：硕士 - -（选填）家庭居住城市：保定 - -（选填）未来期望工作城市：杭州/北京/上海 - -## 联系方式 - -（必填）Email：michaelluang@gmail.com - -（选填）联系电话：13224229616 - -（选填）QQ： - -## 关于前端 - -（必填）什么时候开始接触前端？因何接触？ - -开始接触前端是从去年十月份，最强烈的想法就是想建立一个网站，做些一直以来自己想做的事情，比如写写博客、介绍自己感兴趣和擅长的事情。就这样，凭着自己很大的兴趣进入了Web开发的世界：从Head First系列书籍开始，一步步学习HTML、CSS、JavaScript和PHP等相关知识，然后注册了个域名、找了家VPS、用了个CMS，建了这样一个网站，现在还只是个半成品：[LIANGZHE](https://liangzhe.me)。 - -（必填）你理解的前端是做些什么事情？ - -将一个应用分为两部分：前端和后端。我的理解为前端就是完成用户切实感受到的那一部分内容，实现与用户的交互。诸如运用HTML和CSS或Bootstrap框架等构建一个漂亮的界面，运用Javascript或jQuery库等实现一些动态效果，完成一些用户的请求。 - -形象点说，将一个应用（如百度搜索页面）比喻为一家肯德基餐厅，前端人员就如前台收银员，与之对应的后端所做的工作就如后台厨师一样。或者说前端所做的工作就是装修一栋刚完工的毛坯房，按照其最终呈现的形态要求而去装饰改进。 - -（必填）你为什么要学习前端？ - -当时就是想简单的搭建一个网站，没想到投入进去之后找到了很多的乐趣，尤其是发现国外的很多独立Web设计师都会有个人网站，看到他们设计的漂亮页面时着实被吸引住了，原来掌握前端技术可以创作出这么富有个性的网站，而且能够实现你想出的很多的想法，为想象力提供了舒展的途径。 - -所以学习前端，最根本的原因就是因为喜欢、因为兴趣，这样才能一直以很大的动力学习下去。 - - -（必填）介绍一个你做过的最复杂的前端项目，其中遇到最困难的技术问题是什么，你如何解决的？ - -学习前端的这半年的时间了，所做的项目就是自己的这个网站了：[LIANGZHE](https://liangzhe.me)。由于这个网站是基于CMS([Kirby](http://getkirby.com))建立起来的，而[Kirby](http://getkirby.com)针对每个页面的模版是由PHP和HTML构成，这样除了学习前端的一些知识外，还要学习后端语言PHP，这样才能熟练使用这个框架。此外，为了网站能够发布，还要掌握Linux系统搭建、终端命令操作的相关知识；使用Git控制网站开发的流程等。这个过程中遇到的困难就是，对于初学者来说由于相关知识的欠缺，遇到的每个知识盲点都是困难，这就必须要阅读各种相关书籍、查阅对应的文档等，投入大量的时间从基础学起，才能解决那些在网站开发过程中遇到的问题。 - -（必填）你自我评价当前你的前端技术能力如何，可以举一些详细的例子来描述能力水平 - -经过半年的学习，书看了不少，学会了大部分前端开发的相关知识，能够运用HTML和CSS合理布局页面；使用JavaScript结合HTML5新特性实现一些功能，比如使用Google Map提供的API运用地理定位特性实现位置追踪、运用画布功能画些简单图形；对于Bootstrap有些了解，比如能够使用其栅格系统采用媒体查询实现页面的响应布局；掌握了版本控制系统Git，通过[Tower](http://www.git-tower.com)来协助开发；会使用诸如[Sketch](http://bohemiancoding.com/sketch/)、[Pixelmator](http://www.pixelmator.com)等软件对图像做些简单处理；一直在学习脚本语言Python和PHP；最近开始接触jQuery 、Node.js等等。 - -除了技术方面外，在效率、生产力方面，我认为对一个开发人员来说也非常重要。我使用Mac，热衷于运用各种优秀软件协助自己的软件开发，比如使用[Sublime Text](http://www.sublimetext.com)编辑器敲代码、双屏显示器配合[Codekit](http://incident57.com/codekit/)实时预览页面效果、版本控制使用[Tower](http://www.git-tower.com)等等。 - -由于缺少实战机会，没有什么经验，当前的前端技术依旧是初级水平，希望通过这次机会得到大神们的一些指导，多积累些经验，为了成为一名优秀的前端工程师而不断努力。 - diff --git a/apply/2015001/intermediate/polandeme.md b/apply/2015001/intermediate/polandeme.md deleted file mode 100644 index cd04600a..00000000 --- a/apply/2015001/intermediate/polandeme.md +++ /dev/null @@ -1,45 +0,0 @@ -# 中级班报名表 - -请认真、如实、详细填写如下报名信息。 -同时，为了避免您个人信息泄露，我们尽可能地避免让您填写过于隐私的信息 - -## 个人简介 - -（必填）姓名（若担心隐私问题可填写昵称）：polandeme -（必填）学校：中南民族大学 -（必填）专业：网络工程 -（必填）毕业时间：2016 -（必填）学历：本科 -（选填）家庭居住城市：山东 -（选填）未来期望工作城市：上海 北京 深圳 港区 - -## 联系方式 - -（必填）Email： polandeme@gmail.com -（选填）联系电话： -（选填）QQ：626059391 - -## 关于前端 - -（必填）什么时候开始接触前端？因何接触？ -从大一开始接触，其实应该说高中的时候，会用h1标签（-:D), 然后大一的时候参加了一个学校的社团，是一个互联网团队的社团，里面有互联网各个方向，从产品运营到后台前端，当然都是学生就是凭借大家兴趣，最后通过考核，进去了。氛围很轻松，在里面真的学到了很多。 - -（必填）你理解的前端是做些什么事情？ -前端，我的理解是直接面向用户，去让用户能够最直接舒服的去使用互联网。和产品接触，和设计和用户接触和后台接口接触。最后汇集成了一个面向用户的产品。 - -（必填）你为什么要学习前端？ -1. 感兴趣，热爱 -2. 喜欢互联网，其实对于任何技术都是不抵触的 -3. 喜欢挑战，感觉前端有各种细节上的挑战 -4. 享受成功的喜悦，享受优美代码的喜悦 - -（必填）介绍一个你做过的最复杂的前端项目，其中遇到最困难的技术问题是什么，你如何解决的？ -项目：用angular + node 自己做的玩的吐槽[网站](https://github.com/polandeme/hoho),未完成。 -技术问题： angular有一层前端的路由，express后台也有一套路由，但是对这两套的路由的逻辑没有弄太明白 -解决：开始自己去理解两层路由的关心，分别去细看两个的路由作用，后来去查资料，看demo，最后终于弄明白了，明白之后其实发现并不太难理解，一种豁然开朗的感觉。 - -（必填）你自我评价当前你的前端技术能力如何，可以举一些详细的例子来描述能力水平 -写过chrome插件，写过hybird，写过terminal小工具，写过node，仿写过jq(可以忽略),用CI写过整站项目，维护过学校社团服务器。但感觉水平应该处于学生中的中等吧，自我评价为感觉自己有个**瓶颈**，需要细节上的注意去提高。一般常用的东西效果，或者新的前端知识，可能没有接触过，但是可以比较较快入手。 -例如[这个](http://polande.com/demo/points/)自己看一个学长写的，在完全没看他代码的情况下，按照效果写的(only chrome,没有做兼容)【[代码](https://github.com/polandeme/demo/blob/gh-pagrs/points/main.js)】。 -但问题是：一般任务可以完成，但代码欠考虑，优化。希望有人能够指导。 - diff --git a/apply/2015001/intermediate/zhaoyuting123.md b/apply/2015001/intermediate/zhaoyuting123.md deleted file mode 100644 index a82f5951..00000000 --- a/apply/2015001/intermediate/zhaoyuting123.md +++ /dev/null @@ -1,45 +0,0 @@ -# 中级班报名表 - -请认真、如实、详细填写如下报名信息。 -同时，为了避免您个人信息泄露，我们尽可能地避免让您填写过于隐私的信息 - -## 个人简介 - -（必填）姓名（若担心隐私问题可填写昵称）：zhaoxiaomou -（必填）学校：西安交通大学 -（必填）专业：软件工程 -（必填）毕业时间：2016.7 -（必填）学历：研究生 -（选填）家庭居住城市： -（选填）未来期望工作城市： - -## 联系方式 - -（必填）Email：ytzhao121@163.com -（选填）联系电话： -（选填）QQ： - -## 关于前端 - -（必填）什么时候开始接触前端？因何接触？ - - 从14年初开始接触。做一个小项目的时候，使用到相关的技术，便开始了解，慢慢接触到前端相关的内容。 - -（必填）你理解的前端是做些什么事情？ - - 前端分为很多种，方向也有很多，例如web前端，mobile前端，等等，我理解的前端是在应用和用户之间搭建的一个桥梁，一个入口。这个入口的舒适度，友好性等等决定了你的应用被用户接纳并且喜欢的程度。当然，也有可能做的很糟糕，成为用户厌恶并且再也不会使用的残次品。 - -（必填）你为什么要学习前端？ - - 作为一个用户，我希望我使用的产品独一无二，根据我的喜好来变化，根据我的使用习惯来不断完善。 - 作为一个前端开发者，我需要从用户的角度来看待产品，将产品易用性及用户体验做到极致。 - 前端让我可以对自己提出要求，并且实现自己的要求，同时让其他人在使用过程中有着更好的体验，这是一种很棒的感觉。所以我学习前端。 - -（必填）介绍一个你做过的最复杂的前端项目，其中遇到最困难的技术问题是什么，你如何解决的？ - - 一个web端的管理平台。使用到了AngularJS。最困难的技术问题是自定义一个数据服务，由于是异步获取数据，在注入服务后数据结果不知道怎么返回。后来通过在论坛以及官方文档中查资料了解到如何使用。可以用promise延迟获取数据，解决异步调用时数据的获取问题。成功根据Angular的MVVM思想编写相关服务，指令，controller，完成了该项目。学无止境，还需不断努力~~ - -（必填）你自我评价当前你的前端技术能力如何，可以举一些详细的例子来描述能力水平 - - 目前实习了将近9个月，参与过3个项目的前端开发，包括1个web端管理平台和2个监控平台。管理平台主要使用了AngularJS和Jquery，html，css。监控平台中主要使用到了highchart和highstock。业余时间了解了NodeJS，Python，百度的echarts，还有之前开发的项目过程中使用过百度的富文本编辑器，ueditor。 - 补充：对于百度的产品非常喜爱，感谢百度前端开发了这么多易用并且有趣的产品给我们，而且提供了这么好的一个平台，希望能有机会和百度的前端大牛们一起进步~~· diff --git a/apply/2015001/junior/apply_example.md b/apply/2015001/junior/apply_example.md deleted file mode 100644 index bbaa6253..00000000 --- a/apply/2015001/junior/apply_example.md +++ /dev/null @@ -1,31 +0,0 @@ -# 初级班报名表 - -请认真、如实、详细填写如下报名信息。 -同时，为了避免您个人信息泄露，我们尽可能地避免让您填写过于隐私的信息 - -## 个人简介 - -（必填）姓名（若担心隐私问题可填写昵称）： -（必填）学校： -（必填）专业： -（必填）毕业时间： -（必填）学历： -（选填）家庭居住城市： -（选填）未来期望工作城市： - -## 联系方式 - -（必填）Email： -（选填）联系电话： -（选填）QQ： - -## 关于前端 - -（必填）什么时候开始接触前端？因何接触？ - -（必填）你理解的前端是做些什么事情？ - -（必填）你为什么要学习前端？ - -（必填）你自我评价当前你的前端技术能力如何，可以举一些详细的例子来描述能力水平 - diff --git a/asset/.DS_Store b/asset/.DS_Store deleted file mode 100644 index 5008ddfc..00000000 Binary files a/asset/.DS_Store and /dev/null differ diff --git a/asset/github.jpg b/asset/github.jpg deleted file mode 100644 index e1d66a47..00000000 Binary files a/asset/github.jpg and /dev/null differ diff --git a/asset/weixin.jpeg b/asset/weixin.jpeg deleted file mode 100644 index 7a7028de..00000000 Binary files a/asset/weixin.jpeg and /dev/null differ diff --git a/schedule/schedule201501.md b/schedule/schedule201501.md deleted file mode 100644 index a0ef8360..00000000 --- a/schedule/schedule201501.md +++ /dev/null @@ -1,7 +0,0 @@ -# 任务进展 - -## 初级班 - -## 中级班 - -## 高级班 diff --git a/studentlist/201501.md b/studentlist/201501.md deleted file mode 100644 index fad2ef47..00000000 --- a/studentlist/201501.md +++ /dev/null @@ -1,276 +0,0 @@ -# 2015年第一期学员名单 - -第一期开课的报名人数以及大家的热情远远超出我们的预期，导致我们在宣布报名开始的第三天就不敢继续进行宣传，深怕自己hold不住场面。在此要特别感谢对我们课程关注和报名的所有同学。 - -最后，我们一共录取了123名同学，超过了之前计划的75名，一方面是因为大家实在是太热情了，另一方面是因为我们后续又邀请到了一些新的导师资源，来保证大家的学习体验。 - -没有报名成功的同学也不需要难过，我们所有的课程任务是完全公开的，大家可以时刻关注我们的Github和微博，了解最新课程内容。 - -请所有被录取的同学加群 112170242，进群时请注明你的姓名、学校、Github账号。 - -预祝第一期所有学员都能够顺利毕业！ - -## 初级班名单 65 名（均为Github账号名） - -80791333 - -AlisonZhang - -candywxt - -cherry716 - -CiSplus - -cqz95 - -DaphneChang - -davidxi - -die214144031 - -dingyuelin - -DIYgod - -dodosophia - -Drupaloops - -emsonzj - -Feara - -Gaohaoyang - -GilbertGan - -habc0807 - -HansJiang - -haoyueCendy - -Hexianjie - -hujienan - -ileenhow - -isunmoon - -janusuer - -jingmingl - -jinyueyang - -jonas-lu - -julytian - -kimmyjih - -laozhang007 - -licop - -Light1980 - -liuyifeneve - -lixu19941116 - -lucky7ky - -luodongseu - -luolala - -luxiaojijan - -Max168 - -Melanie-BUPT - -mengjie16 - -M-Withershins - -PuRonglong - -qqqhbbb - -RedCoral - -reverland - -Rowling - -sepmoyoung - -shuaiyunzhang - -tangshuran - -tatiananaitat - -tiantianskj - -tingtingzhangbest - -wanluw - -wei1215583760 - -WXLKaylee - -wyfyyy818818 - -yanzilulu - -zchen9 - -zcp2123 - -Zerlindar - -zmiaozzz - -ZoeBai - -zynash - -## 中级班 53 名 - -0rangeT1ger - -AngelaDuoduo - -anyever - -Aralic - -BaybayLee - -Bearhomeng - -blairFzq - -caizone - -ChenCody - -eiszitrone - -Fairyhead - -Fental - -fromIRIS - -frozenwings - -geekingiin - -imwyh - -jeniffer-d - -KIKIWU - -koi646 - -leejaygo - -lizhipower - -LuckyDottie - -michaelluang - -Nalixue - -onekissbornfree - -panyijie - -polandeme - -QingFlye - -qushuangru - -rolldance - -SheeryJi - -Simmer-Jun - -SoAanyip - -starkwang - -Sunmgal - -SupDream - -tianzhi0549 - -Tiramisusie - -UtopiaScript - -wang294363786 - -wangting1 - -wangyingwy - -winar-jin - -wwsun - -Wykay-z - -xyc-cn - -y2x33 - -yanni1473 - -yuanyunxu - -yunpingf - -yyzych - -zhaoyuting123 - -zhuqiao1018 - - -## 高级班 5 名 - -zfczoe - -fkysly - -wind-stone - -zyjc007 - -zhiyishou - -discountry - -Ovilia - -myzhibie - -beforeload - -Gxsghsn - -lomo321 diff --git a/task/README.md b/task/README.md deleted file mode 100644 index 7ad545e3..00000000 --- a/task/README.md +++ /dev/null @@ -1,186 +0,0 @@ -# 任务说明 - -## 初级班 & 中级班 - -初级班和中级班的任务内容基本一致，但是在细节要求和时间要求上会不一样。 - -- 任务一：HTML、CSS基础 - + 初级班：11天左右 - + 中级班：4天左右 -- 任务二：JavaScript基础 - + 初级班：13天左右 - + 中级班：7天左右 -- 任务三：深入学习JavaScript语言的一些特性、以及相关的一些设计模式等知识。实践一个小型的to-do项目实践，巩固学习知识 - + 初级班：10天左右 - + 中级班：10天左右 -- 任务四：关于移动、node.js、ES6、CSS预处理、CSS后处理、JavaScript模块化、前端工程化，掌握目前前端主流技术。并通过to-do大型项目实践，做一个移动+PC的大型项目，学习如何做技术选项，如何做大型项目设计架构 - + 初级班：30天左右 - + 中级班：30天左右 - -具体天数为根据课程内容的调整而有适当微调。以最后公布为主 - -## 高级班 - -高级班假设学员已经有非常好的前端基础，主要需要进行的是偏研究性质或者大型实践性质的项目实践。题目包括： - -## 1. MVVM表单框架任务 - -### 1.1 任务描述 - -1. 实现一个表单管理框架，要求实现表单验证、错误信息显示、表单提交处理、基于AJAX的表单提交。 - -2. 框架的使用者应当使用MVVM模式进行开发，不需要使用DOM操作。 - -一个可行的使用代码的方式如下： - -``` javascript - -var eform = require('eform'); - -var form = eform.define({ - - username: { - required: false, - validate: function (value, async) { - var next = async(); - - $.post({ - username: value - }, function () { - next(true); - }, function () { - next(false); - }); - } - }, - - password: { - validate: function (value) { - return this.passwordConfirm.value === value; - } - }, - - usertype: { - validate: function (value) { - // 这需要触发username表单的验证，而不需要用户的操作 - this.username.required = true; - } - }, -}); - -// 需要识别HTML中的部分验证规则加到模型中去 -form.scan($('#form')[0]); - -// 这需要触发username的验证 -form.fields.username = 'another username'; - -// 如果有一个程序员很淘气，它写了这样的代码 -document.getElementById('username').value = 'a bad username'; -// 我们也需要帮他验证一下对不对 - -// 另一个小淘气喜欢用各种表单控件 -uploader.on('change', function (value) { - form.fields.username.value = value; -}); -// 我们也不可以抛弃他，也需要帮他验证一下 - -// 具体的详细细节请联系导师 -``` - -### 1.2 建议的MVVM实现方式 - -模型到视图：使用ES5的新特性Object.defineProperties。 - -视图到默认：使用Mutation Observer。 - -### 1.3 进阶任务 - -1. Object.defineProperties如何在IE下实现呢？ - -2. Mutation Observer可是新玩意，其它的浏览器可怎么办呢？ - -3. 尝试将框架向非表单扩展。 - -4. 尝试配置JQuery写一个真正的MVVM框架。 - -5. 你是否在MVVM方面有自己新的想法呢？ - -### 1.4 学习目的 - -1. 理解表单操作的基本模式和处理方法 - -2. 理解MVVM是什么，和怎么实现 - -3. 理解框架可用性和可扩展性以及两者之间的取舍 - -## 2. 移动端Web IM - -### 2.1 任务描述 - -- 实现一个基于手机Web端的IM工具 -- 可以实现文字、表情的交流 - -### 2.2 任务要求 - -- 从UI设计、前端、后端均由自己完成 - -### 2.3 任务目的 - -- 从无到有完整实现一个轻量级产品 -- 体会全栈工程师 -- 踩一踩移动端的各种大坑 - -## 3. 迷宫游戏 - -### 3.1 任务描述 - -- 基于WebGL，实现3D迷宫世界的自动生成 -- 实现Avatar在迷宫里的运动 -- 实现使用手机端作为Avatar的操作遥控器 - -### 3.2 任务要求 - -- 不要基于已有框架 -- 足够炫 - -### 3.3 任务目的 - -- 深入学习并实践WebGL -- 学习跨端交互 -- 尝试做一些炫酷的事情 - -## 4. 3D HTML World 游戏 - -### 4.1 任务描述 - -- 在PC浏览器上，针对一个普通的HTML页面，基于WebGL可以生成他的3D世界版本，由页面自身的DOM嵌套关系生产层峦叠嶂的DOM阶梯 -- 可以操作一个3D小球在这个世界中前进、转向、加速、减速、跳跃 -- 实现使用手机端的重力感应和触屏作为小球运动的操作遥控器 -- 实现在同一个3D页面世界玩耍的小伙伴们能看见其他人的球 -- 实现球与球之间的互动，如碰撞扣血之类的 - -### 4.2 任务要求 - -- 视觉效果好，画面流畅 -- 游戏易上手、但富有乐趣 - -### 4.3 任务目的 - -- 深入学习并实践WebGL -- 学习跨端交互 -- 尝试做一些炫酷的事情 - -## 5. Low Poly 生成器 - -### 5.1 任务描述 - -- 通过上传的图片，自动生成Low Poly（低多边形）图像 -- 提供手动指定边缘和特征点，来提高生成图片的效果 - -### 5.2 任务要求 - -- 产品体验流畅 - -### 5.3 任务目的 - -- 基于前端技术做图像领域的深入研究 \ No newline at end of file diff --git a/task/preparation.md b/task/preparation.md deleted file mode 100644 index 147e4332..00000000 --- a/task/preparation.md +++ /dev/null @@ -1,50 +0,0 @@ -## 准备工作 - -欢迎大家加入百度前端学院，或者即使你没有报名成功，你也可以通过一起学习实践以下内容，来进行前端技术的学习。在正式开始学习之前，我们希望您做好以下准备： - -### **时间** - -报名时很多同学都在疑虑每天3-4个小时的时间很难保证，事实上，除了某些在实验室确实有很多工作任务的同学，大部分同学读书时候的时间是被大量挥霍中，计算一下自己每天有多少时间在打游戏，刷微博，聊微信，逛BBS。 - -我们推荐您每天用两个时间段来学习，每天早上9点以前，如果没有课程或其他安排，用1-2个小时左右的时间进行阅读、信息的搜寻和记录，每天晚上7点以后，用2-4小时进行编码。当然如果你有更充裕的时间那是最好。 - -在学习过程中，建议您把手机远离自己，不要因为时不时回微信、刷朋友圈这样的事情影响学习的进度和连续性。 - -学会时间管理，珍惜自己的时间。 - -### **方法** - -我们在每一个任务中，会给出要编码的需求、希望掌握的知识点、一些参考资料等几部分内容。我们推荐您按照以下方式学习： - - - 明确题目要求 - - 明确希望掌握的知识点 - - 把给与的参考资料都大致浏览一遍，清楚知道每一个资料主要在讲什么内容 - - 如果您对于题目实现有一定的思路，那么您可以立即开始编码，否则建议您回过头把给与的参考资料仔细阅读一遍 - - 编码中遇到的任何问题，自己用一个记录方式进行记录（github issus，evernote，onenote，有道云笔记等等），记录后，可以先尝试搜索解决方案并解决 - - 全部做完后，把自己遇到的所有问题进行回顾，寻找出现问题的根源、有没有更好的解决方案，并把回顾的结论整理到个人记录中 - - 确认已经完全按照我们的作业要求完成，否则进行修改 - - 确定我们希望您掌握的知识点已经全部掌握 - -当然，这个方式会相对理想化，大家量力而行、尽力而为。 - -### **工具资源** - -* 开发工具：选择一个开发工具，比如sublime Text、Web Storm等，其中Web Storm可以申请学生的免费使用授权。 -* 装好各种PC浏览器，我们在这次培训中只需要大家考虑Chrome、IE8、IE9三款浏览器，如果大家有余力去考虑更多的浏览器兼容性，可以自行选择。IE可以装一个IETester或者9+的版本即可，高版本IE均可以开启对于低版本的兼容模式来进行测试。对于Mac及Linux用户，毕竟兼容IE浏览器是前端躲不开的事情，所以，还是装个Windows虚拟机吧。 -* 调试工具：Chrome Developer Tools -* 其他工具在您需要的时候可以自行搜索 -* 书籍：可以参考[知乎上的整理](http://www.zhihu.com/question/19809484?rf=20315724) -* 网上资源：可以参考[Quora上的整理](https://www.quora.com/What-are-the-best-resources-for-learning-JavaScript)以及[知乎上的整理](http://www.zhihu.com/question/20246142) - - -### **心态** - -- 第一，不论对于初级班、中级班还是高级班，我们提供的都是实践课程，无论我们再如何的精心设计，在有限的时间内，能够通过这些实践任务掌握到的知识都是不可能涵盖所有技术点的。所以我们更希望你在学习过程中，能够整理总结出针对自己是最有效的学习方法，为更加长远的技术学习生涯有所贡献，从学习过程中梳理自己对前端技术体系的认知，明白自己在这颗技能树上进化到什么程度。 - -- 第二，从报名情况看，同样一个班报上名的同学们也存在着较大的能力差距。同样的班级、同样的任务，有可能你会觉得特别简单，轻松完成，也有可能别人都搞定了你还一筹莫展。如果遇到这样的情况，我们希望，如果比别人快，你不妨回头多看看自己是否做到最优，或者帮助其他同学一起学习；比别人慢，也不要轻言放弃或自暴自弃，多多交流、不耻下问。我们最后获得的成长更重要的是和自己来比较。 - -- 第三，我们的培训是完全免费，报名限制也主要是从导师资源考虑，没有报上名的同学不代表你就比报上的差（恰恰相反的是在挑选初级班的时候，我们会认为有一些同学能力早已超出初级班甚至中级班的水平，无需参加我们的培训）。我们后续的招聘面试也并不是只考虑参与培训的同学，所以大家放平心态，不要因为是否报上名而给自己增加一些无谓的压力和负面情绪。我们后续也会探索一些更加高效的方式，让这个模式更加开放。 - -- 第四，第一次做这样的大型实践性培训，我们的活动组织和课程设置难免会有所疏忽（就像高级班报名忘记面试一样），如果大家在学习过程中，对于我们的任务设置、组织有任何的建议，欢迎通过weibo、Github issue或者qq群告知我们，对于有价值的建议我们会进行及时的调整。相信几年后大家都会成为各家公司前端的主力军，我们希望和大家一起建设一个友好的、有建设性的、聚焦技术和用户体验的生态圈。 - -最后，预祝大家学习愉快、充实、有所收获！ \ No newline at end of file diff --git a/task/task0001/README.md b/task/task0001/README.md deleted file mode 100644 index b9507216..00000000 --- a/task/task0001/README.md +++ /dev/null @@ -1,272 +0,0 @@ -# HTML、CSS基础 - -**任务编号**：`TASK 0001` - -## 任务目的 - -掌握`HTML`、`CSS`基础知识、能够较为熟练地使用`HTML`、`CSS`编写页面 - -## 任务前说明 - -本任务**1-6**小节的内容是面向零基础的同学，如果您已经有一定的基础，可以跳过前面你觉得确认已经掌握的内容。 - -对于零基础的同学，1-5小节建议用一天时间，第6小节建议用两到三天时间。 - -## 任务Review内容 - -最后会对`7.综合练习`的编码作业进行Review - -## 任务Review截止时间 - -超过以下天数提交的代码不做Review - -- 初级班：**11**天 -- 中级班：**4**天 - -## Start - -## 1. 建立你的第一个网页 - -### 1.1 任务描述 - -*面向零基础同学* - -创建一个HTML文件，比如`task0001.html`文件，在里面实现一些代码，完成你的第一个网页。 - -这个页面中，需要有以下内容： - -- 一个一级标题，内容是你的Github账号 -- 一个无序列表，包括2个项目，里面每一个项目是一个链接，分别链接到`task0001.html`以及你的微博（或其他什么网站） -- 一个二级标题，内容随意（不能违法、反动、色情等） -- 一个段落，内容随意（不能违法、反动、色情等） -- 一个图片（不能违法、反动、色情等）。 - -最后的效果如下图： - -![图片](img/task0001_1.jpg) - -### 1.2 期望达成 - -- 了解什么是Web -- 了解什么是HTML -- 了解一些基本的HTML语法及标签 -- 能够写出自己的第一个HTML - -### 1.3 参考资料 - -- [知乎上的一些Web基本概念介绍](http://www.zhihu.com/question/22689579) -- [慕课网HTML+CSS基础课程](http://www.imooc.com/learn/9) -- [w3school html教程](http://w3school.com.cn/html/index.asp) -- [MDN HTML](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Introduction) - -## 2. 给你的网页加点样式 - -### 2.1 任务描述 - -*面向零基础同学* - -学习以下`CSS`是怎么运作的，然后创建一个`task0001.css`的文件，并在`task0001.html`中引入它，然后我们对`task0001.html`做一些让他变得花哨一点的事情： - -- 让一级标题的文字颜色变成蓝色 -- 二级标题的文字大小变成`14px` -- 段落的文字大小变成`12px`，文字颜色是黄色，带一个黑色的背景色 -- 图片有一个红色的，`2px`粗的边框 - -效果如下图： - -![图片](img/task0001_2.jpg) - -### 2.2 期望达成 - -- 了解什么是CSS -- 了解HTML与CSS是如何一起工作的 -- 了解基本的CSS语法 -- 尝试使用几个简单的CSS属性 - -### 2.3 参考资料 - -- [MDN CSS](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started)的1，2，3节 -- [w3school css](http://w3school.com.cn/css/index.asp) -- [慕课网HTML+CSS基础课程](http://www.imooc.com/learn/9) - -## 3. 稍微放松一下 - -### 3.1 任务描述 - -*面向零基础同学* - -了解一下HTML及CSS的发展史，了解一下HTML4到5究竟变化了什么 - -### 3.2 期望达成 - -- 对于HTML及CSS的发展史有一个大概的了解 -- 明白HTML5和之前的版本大概有什么区别 - -### 3.3 参考资料 - -- [MDN HTML](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Introduction) -- [MDN CSS](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started) -- [w3school](http://w3school.com.cn/html5/index.asp) -- [W3C: HTML5, Differences from HTML4](http://www.w3.org/TR/html5-diff/) - -## 4. CSS基础 - -### 4.1 任务描述 - -*面向零基础同学* - -接下来我们深入学习HTML、CSS，首先深入了解CSS的各种选择器、继承、层叠、样式优先级机制。 - -### 4.2 期望达成 - -- 掌握CSS各种选择器 -- 掌握CSS的继承、层叠、样式优先级机制 - -### 4.3 参考资料 - -- [MDN CSS的第4、5节](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started) -- [w3school css](http://w3school.com.cn/css/index.asp) - -## 5. 让页面样式丰富起来 - -### 5.1 任务描述 - -*面向零基础同学* - -在你的`task0001.html`中，快速实践以下文本相关的所有属性内容： - -- `text-indent` -- `text-transform` -- `text-decoration` -- `text-align` -- `word-spacing` -- `white-space` -- `color` -- `line-height` -- `font` -- `font-family` -- `font-size` -- `font-weight` -- `font-face` - -### 5.2 期望达成 - -- 掌握文本、文字、链接相关的样式属性 -- 掌握背景属性 -- 掌握列表相关的样式属性 -- 深入了解行高属性 - -### 5.3 参考资料 - -- [MDN CSS](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started) -- [w3school css](http://w3school.com.cn/css/index.asp) -- [深入了解行高属性](http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html) - -## 6. 盒模型及定位 - -### 6.1 任务描述 - -在`task0001.html`中，实践以下内容： - -- 用两种方法来实现一个背景色为`红色`、宽度为`960px`的`
`在浏览器中居中 -- 有的圆角矩形是复杂图案，无法直接用border-radius，请在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形 ![示例](img/task0001_7.png) -- 用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 ![示例](img/task0001_3.jpg) -- 用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化 -- 实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化 ![示例1](img/task0001_4.jpg) ![示例2](img/task0001_5.jpg) - - -### 6.2 期望达成 - -- 掌握块状元素、内联元素、和内联块状元素的概念与区别 -- 掌握盒模型的所有概念，学会如何计算各种盒模型相关的数值 -- 掌握`position`的相关知识 -- 掌握`float`的相关知识 -- 掌握基本的布局方式 -- 了解`Grid`、`Flexbox`等布局方式 - -### 6.3 参考资料 - -- [w3school](http://w3school.com.cn/css/css_boxmodel.asp) -- [MDN](https://developer.mozilla.org/zh-CN/docs/CSS/%E5%BC%80%E5%A7%8B/Boxes) -- [慕课网](http://www.imooc.com/code/2047) -- [w3school](http://w3school.com.cn/css/css_positioning.asp) -- [慕课网](http://www.imooc.com/code/2057) -- [学习CSS布局](http://zh.learnlayout.com/no-layout.html) -- [CSS布局方式](http://teamtreehouse.com/library/css-layout-techniques) -- [双飞翼布局介绍-始于淘宝UED](http://www.imooc.com/wenda/detail/254035) -- [W3C Visual formatting model](http://www.w3.org/TR/CSS21/visuren.html#) -- [MDN Visual formatting model](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model) -- [CSS 101: Block Formatting Context](http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts) -- [Block Formatting Context In CSS](http://outofmemory.cn/wr/?u=http%3A%2F%2Fkkeys.me%2Fpost%2F68547473290) -- [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/) -- [那些年我们一起清除过的浮动 by 一丝冰凉](http://www.iyunlu.com/view/css-xhtml/55.html) -- [BFC和hasLayout](http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html) - -## 7. 综合练习 - -### 7.1 任务描述 - -在您自己的Github中建立一个新的仓库，比如命名为`task0001`，在该目录下创建以下四个html文件： - -- `index.html`：对应`task0001_1`及`task0001_1_marked`设计稿 -- `blog.html`：对应`task0001_2`及`task0001_2_marked`设计稿 -- `gallery.html`：对应`task0001_3`及`task0001_3_marked`设计稿 -- `about.html`：对应`task0001_4`及`task0001_4_marked`设计稿 - -再创建一个`css`目录，在`css`目录中创建一个`style.css`用于编写样式。 - -再创建一个`img`目录，用于存放页面编写中会使用到的图片。 - -这时，你的文件夹结构应该是这样的： - -![文件结构](img/task0001_6.png) - -基于[设计稿](design/)中的设计图及标志实现页面，里面的内容、图片、配色均可自定义。 - -- 编码过程请尽可能遵守[HTML、CSS的代码规范](https://github.com/ecomfe/spec)； -- 暂时不要使用`less`、`sass`等，这是后面的任务； -- 不要使用任何样式框架。 -- 不需要写任何JavaScript，只需要关注HTML、CSS -- 页面实际内容宽度为980px，头部背景、大图、底部背景均为100%宽，当浏览器宽度低于980px时，页面宽度不变，允许出现横向滚动条。右上角的Github图标在浏览器低于980px时消失。 - -**任务关键执行步骤** - -- 按照以上要求进行编码，先不需要关注页面中任何具体的图片和文字内容，都随意输入，注意力放在页面架构、布局、样式上； -- 编码的同时，记录遇到的技术问题和疑惑； -- 完成编码后，删掉它们，不留一丝痕迹； -- 开始重(Chong)构(Xie)，让自己的代码要比第一次有提升，尽可能地让第一次遇到问题和疑惑不再存在； -- 在blog.html页面中真的写上2-3篇这次学习上的技术总结收获； -- 初级班同学请在[这里](https://github.com/baidu-ife/ife/issues/764)，按要求回复您的task0001的Github地址。 - -### 7.2 期望达成 - -- 学会能够基于设计稿来合理规划HTML结构 -- 理解语义化，合理地使用HTML标签来构建页面 -- 能够较为熟练地使用HTML、CSS创建一个静态页面 -- 大概了解并实践企业中对于HTML及CSS的编码规范 -- 编写复用性高、可读性、可维护性好的代码 - -### 7.3 参考资料 - -- [HTML、CSS的代码规范](https://github.com/ecomfe/spec) -- [顾轶灵:Web语义化](http://www.zhihu.com/question/20455165) -- [CSS命名规范@W3C Funs](http://www.w3cfuns.com/blog-5445898-5398950.html) -[点击阅读: CSS浏览器兼容性列表](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29) - -## 8. 验证 - -经过上面的练习，您是否已经能够熟练到能够在一天甚至半天之内完成任务7的编码呢？或者不带任何犹豫地可以知道 - -- `doctype`是什么，它是干啥用的 -- `ul`、`ol`、`dl`都适合用在什么地方 -- 能够娓娓道来你是怎么理解HTML语义化的 -- CSS选择器都有哪些 -- `position`都有什么值，区别是什么 -- 经典的清除浮动代码中每一行语句都是干什么用的，为什么少了它不行 -- 让一个HTML节点居中的各种实现方式 -- 神马圣杯布局、双飞翼布局都是些什么东西 -- 强大的负外边距都能干嘛 -- 不小心提起文档流的时候还能接着解释到底啥是文档流 -- …… - -关于HTML、CSS，我们暂时到这里，下一个任务我们将进行JavaScript的一些基础训练。 diff --git a/task/task0001/blog.html b/task/task0001/blog.html deleted file mode 100644 index a3643e20..00000000 --- a/task/task0001/blog.html +++ /dev/null @@ -1,144 +0,0 @@ - - - - polandeme - - - - - - -
-
-
-

Polande

- -
-
-
-
-
- -
-
-
- CSS -
-
4.12
-
-

布局方式的问题

-

常用的布局方式

-

- 父元素不包括子元素解决办法，一般是用position布局吗？使用background还是background-color设置背景颜色？reset.css如何更好的利用?论盒子模型的重要性 -

-

- 父元素不包括子元素解决办法，一般是用position布局吗？使用background还是background-color设置背景颜色？reset.css如何更好的利用?论盒子模型的重要性 -

-

- 父元素不包括子元素解决办法，一般是用position布局吗？使用background还是background-color设置背景颜色？reset.css如何更好的利用?论盒子模型的重要性 -

-
- polandeme 发表于 - 2015年4月16日 -
-
-
-
-
- CSS -
-
4.12
-
-

布局方式的问题

-

常用的布局方式

-

- 父元素不包括子元素解决办法，一般是用position布局吗？使用background还是background-color设置背景颜色？reset.css如何更好的利用?论盒子模型的重要性 -

-

- 父元素不包括子元素解决办法，一般是用position布局吗？使用background还是background-color设置背景颜色？reset.css如何更好的利用?论盒子模型的重要性 -

-

- 父元素不包括子元素解决办法，一般是用position布局吗？使用background还是background-color设置背景颜色？reset.css如何更好的利用?论盒子模型的重要性 -

-
- polandeme 发表于 - 2015年4月16日 -
-
- -
-
-
- CSS -
-
4.12
-
-

布局方式的问题

-

常用的布局方式

-

- 父元素不包括子元素解决办法，一般是用position布局吗？使用background还是background-color设置背景颜色？reset.css如何更好的利用?论盒子模型的重要性 -

-

- float方式居中好麻烦，一般是用position布局吗？使用background还是background-color设置背景颜色？reset.css如何更好的利用?论盒子模型的重要性 -

-

- 父元素不包括子元素解决办法，一般是用position布局吗？使用background还是background-color设置背景颜色？reset.css如何更好的利用?论盒子模型的重要性 -

-
- polandeme 发表于 - 2015年4月16日 -
-
-
    -
  • 第一页
    • -
  • 上一页
    • -
  • 1
    • -
  • 2
    • -
  • 2
    • -
  • 2
    • -
  • 2
    • -
  • 2
    • -
  • 2
    • -
  • 下一页
    • -
  • 最后页
    • -
-
-
-
- - GO -
-
- -
-
-
-
- - - -
-
-
-
-
- - \ No newline at end of file diff --git a/task/task0001/design/banner-bg.jpg b/task/task0001/design/banner-bg.jpg deleted file mode 100644 index 7375bd87..00000000 Binary files a/task/task0001/design/banner-bg.jpg and /dev/null differ diff --git a/task/task0001/design/icon-github.png b/task/task0001/design/icon-github.png deleted file mode 100644 index ef37a154..00000000 Binary files a/task/task0001/design/icon-github.png and /dev/null differ diff --git a/task/task0001/design/task0001_1.png b/task/task0001/design/task0001_1.png deleted file mode 100644 index bb73af64..00000000 Binary files a/task/task0001/design/task0001_1.png and /dev/null differ diff --git a/task/task0001/design/task0001_1_marked.png b/task/task0001/design/task0001_1_marked.png deleted file mode 100644 index 2c0b94a5..00000000 Binary files a/task/task0001/design/task0001_1_marked.png and /dev/null differ diff --git a/task/task0001/design/task0001_2.png b/task/task0001/design/task0001_2.png deleted file mode 100644 index 27c73987..00000000 Binary files a/task/task0001/design/task0001_2.png and /dev/null differ diff --git a/task/task0001/design/task0001_2_marked.png b/task/task0001/design/task0001_2_marked.png deleted file mode 100644 index ab388278..00000000 Binary files a/task/task0001/design/task0001_2_marked.png and /dev/null differ diff --git a/task/task0001/design/task0001_3.png b/task/task0001/design/task0001_3.png deleted file mode 100644 index dd874464..00000000 Binary files a/task/task0001/design/task0001_3.png and /dev/null differ diff --git a/task/task0001/design/task0001_3_marked.png b/task/task0001/design/task0001_3_marked.png deleted file mode 100644 index f5f2b169..00000000 Binary files a/task/task0001/design/task0001_3_marked.png and /dev/null differ diff --git a/task/task0001/design/task0001_4.png b/task/task0001/design/task0001_4.png deleted file mode 100644 index 4826982c..00000000 Binary files a/task/task0001/design/task0001_4.png and /dev/null differ diff --git a/task/task0001/design/task0001_4_marked.png b/task/task0001/design/task0001_4_marked.png deleted file mode 100644 index 4fc37af3..00000000 Binary files a/task/task0001/design/task0001_4_marked.png and /dev/null differ diff --git a/task/task0001/img/task0001_1.jpg b/task/task0001/img/task0001_1.jpg deleted file mode 100644 index 87c48b60..00000000 Binary files a/task/task0001/img/task0001_1.jpg and /dev/null differ diff --git a/task/task0001/img/task0001_2.jpg b/task/task0001/img/task0001_2.jpg deleted file mode 100644 index 226c3e2b..00000000 Binary files a/task/task0001/img/task0001_2.jpg and /dev/null differ diff --git a/task/task0001/img/task0001_3.jpg b/task/task0001/img/task0001_3.jpg deleted file mode 100644 index 1b98bbbd..00000000 Binary files a/task/task0001/img/task0001_3.jpg and /dev/null differ diff --git a/task/task0001/img/task0001_4.jpg b/task/task0001/img/task0001_4.jpg deleted file mode 100644 index 418f7535..00000000 Binary files a/task/task0001/img/task0001_4.jpg and /dev/null differ diff --git a/task/task0001/img/task0001_5.jpg b/task/task0001/img/task0001_5.jpg deleted file mode 100644 index 4cf46d05..00000000 Binary files a/task/task0001/img/task0001_5.jpg and /dev/null differ diff --git a/task/task0001/img/task0001_6.png b/task/task0001/img/task0001_6.png deleted file mode 100644 index 9134ffc7..00000000 Binary files a/task/task0001/img/task0001_6.png and /dev/null differ diff --git a/task/task0001/img/task0001_7.png b/task/task0001/img/task0001_7.png deleted file mode 100644 index 0ce75f0f..00000000 Binary files a/task/task0001/img/task0001_7.png and /dev/null differ diff --git a/task/task0001/index.html b/task/task0001/index.html deleted file mode 100644 index e69de29b..00000000 diff --git a/task/task0002/README.md b/task/task0002/README.md deleted file mode 100644 index 909a2141..00000000 --- a/task/task0002/README.md +++ /dev/null @@ -1,671 +0,0 @@ -# JavaScript基础 - -**任务编号**：`TASK 0002` - -## 任务目的 - -掌握`JavaScript`基础知识，能够使用`JavaScript`编写一些复杂度不大的交互功能。 - -## 任务Review截止时间 - -超过以下天数提交的代码不做Review - -- 初级班：**13**天 -- 中级班：**7**天 - -## 参考资料 - -- [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) -- [慕课网JavaScript入门](http://www.imooc.com/learn/36) -- [慕课网JavaScript教程](http://www.imooc.com/learn/10) -- [w3school](http://www.w3school.com.cn/js/) -- [Codecademy](http://www.codecademy.com/tracks/javascript) - -## Start - -## 1. 创建第一个页面交互 - -### 1.1 任务描述 - -*面向零基础学员* - -在自己的Github中创建一个新的目录，比如`task0002`，在该目录下首先创建一个没有内容的页面： `task0002.html`，这个页面需要包含最基本的HTML结构，它将用于我们后面的任务。 - -```html - - - - - task0002 - - - - - -``` - - -使用刚刚创建好的`task0002.html`，在这个页面的``前增加这么一段代码 - -```javascript - -``` - -刷新一下页面，DONE - -好吧，这是我们很多年前才干的事情，现在更多时候是这样的 - -```javascript - -``` - -刷新一下页面，在Chrome中打开开发者工具，看看控制台里发生了什么。记住这个`console.log`，后续你会经常用着它。 - -接下来来点稍微复杂的，在你的`task0002.html`的``后增加下面的代码 - -```html - - - - -``` - -同时，在` -``` - -试试在Chrome下看看什么效果，再看看在IE8下什么效果。是不是有什么区别呢？先不着急寻找答案。 - -然后，试着建立一个新的`xxxx.js`的文件，把上面`