百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

Varsha

百度高级研发工程师,在MVVM、Node.js方向有多年研发经验,对代码实现有极致的要求,致力于成为前端技术专家。

共发布 16个任务,已经有 7687名学生在这里学习上课
开始学习

难度:普通时间:大约需要1

2767人在学习该课程,有1162人已经完成该课程

第二天:给自己做一个在线简历吧

第二天:给自己做一个在线简历吧 前言 我相信很多同学很着急的在第一天就开始看这个题了,没关系,如果你时间足够,没问题的。但是希望你记住,在这个系列课程中,完成多少任务并不重要,我们没有什么指标或者打分,来记录或者评估,你是不是一个快枪手。我们希望你在这个系列课程中,能够扎扎实实地掌握每一个基础知识,能够不断思考、实践,来形成自己的学习方法论,顺便提高自己的英文阅读能力以及写作能力。所以,不要在这里刷题,这里是个学习的平台,而不是培训考试速成培训班。 课程目标 第二天,我们希望你能够通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么。学习基本的HTML标签,理解HTML语义化概念 任…

开始学习

难度:普通时间:大约需要1

1144人在学习该课程,有779人已经完成该课程

第三天:让简历有点色彩

第三天:让简历有点色彩 课程目标 今天我们会安排一些学习和练习,来初步了解什么是CSS,掌握基本的CSS概念,语法,学习如何设置一些简单的样式 任务描述 首先简单动下手,打开昨天编辑的 Codepen,在中间CSS的窗口,加上下面的代码 h1 { font-size: 32px; } p { color: orange; } 如果你之前的HTML没有用到这些标签,可以把h1或者p换成你使用到的标签 然后你应该发现下面的预览区域发生了一些变化,这就是你通过CSS代码,对你页面的样式进行了设置。接下来,我们边读边做。 阅读 我们先跳着阅读一下,关于使用CSS来设置字体,阅读MD…

开始学习

难度:普通时间:大约需要1

768人在学习该课程,有560人已经完成该课程

第四天,背景边框列表链接和更复杂的选择器

第四天,背景边框列表链接和更复杂的选择器 课程目标 掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性 课程描述 复习 昨天我们学习了CSS的基本概念,基本的选择器,以及关于字体的一些样式设置,今天我们会进一步学习CSS的其它知识,但在开始之前,推荐你把昨天的阅读材料和自己写的代码花上半小时时间,回顾一下。 阅读 在学习枯燥难懂的盒模型之前,我们先学习一些简单的 W3School-背景 MDN-什么是背景 编码 打开你的简历代码,练习背景样式设置,比如把“简历”这两个大字标题加上一个背景色吧。多多实践,尽量把以下样式都实践一遍: background backgr…

开始学习

难度:普通时间:大约需要2

623人在学习该课程,有475人已经完成该课程

第五天和第六天:三种简历

第五天和第六天 三种简历 课程目标 通过阅读及一个小型练习,掌握 CSS 盒模型及通过Float进行简单的布局 课程描述 阅读 今天我们要学习非常重要的一些知识,这些知识会伴随着你的前端生涯.首先我们先学习一下盒模型的概念 MDN-盒模型 MDN-再述盒模型 W3C 接下来我们了解一下浮动 MDN-浮动 W3C 浮动 如何理解 CSS 中的浮动布局方式? What methods of ‘clearfix’ can I use? 清除浮动(clearfix hack) 编码 今天的任务,我们将不在codepen上来实现,打开你电脑本地的代码编辑器(如VSCode,Sublime或者其它…

开始学习

难度:普通时间:大约需要2

536人在学习该课程,有358人已经完成该课程

第七天到第八天:学习布局

第七天到第八天,学习布局 课程目标 通过大量练习,来学习布局的各种方式 复习 首先对上一个任务进行复习,如果还没有完成上一课任务的同学,请先完成上一个任务。 课程描述 阅读 MDN 定位 MDN 定位实战 MDN Flexbox 学习CSS布局 CSS布局(三) 布局模型 CSS布局(四) Float CSS布局(五) 网页布局方式 CSS布局(六) 对齐方式 七种实现左侧固定,右侧自适应两栏布局的方法 圣杯布局 双飞翼布局 圣杯布局和双飞翼布局 CSS深入理解流体特性和BFC特性下多栏自适应布局 三种三栏网页宽度自适应布局方法 编码 分别尝试使用Float、Position或者Flex…

开始学习

难度:进阶时间:大约需要3

426人在学习该课程,有235人已经完成该课程

第九天到第十一天:来做一个漂亮的网站

第九天到第十一天,来做一个漂亮的网站 课程目标 经过前面八天的练习,我们基本把HTML和CSS的基本知识进行了一遍学习,新的任务,将会用三天的时间,来学习如何将一个设计稿转化为网页,通过这个过程实战我们之前学到的各种CSS知识。 课程描述 复习 首先对上一个任务进行复习,如果还没有完成上一课任务的同学,请先完成上一个任务。 阅读 按照设计师提供的设计稿,实现HTML页面,需要将设计稿切分成为最终在页面中呈现的一个个图片,我们一般称之为“切图”,在不同公司,切图的工作可能是不同职位做,可能是设计师、可能是重构工程师、可能是前端工程师。但不管怎样,这是我们需要掌握的一个基本功能,正常来说,小半天我…

开始学习

难度:进阶时间:大约需要4

215人在学习该课程,有143人已经完成该课程

第十二天到第十五天,复杂页面实现

第十二天到第十五天,复杂页面实现 课程目标 再次通过一个复杂的页面样式实现来实践前面几天学习到的HTML及CSS知识。这个任务将会是HTML,CSS第一阶段学习的最后一个任务,务必不断重复审视自己的代码,是否每一个细节的实现都有理有据,是否做到最优。 课程描述 复习 如果还没有完成上一课任务的同学,请先完成上一个任务。 编码 使用VS Code等开发工具,按照如下设计图,进行页面的实现 PSD:链接: https://pan.baidu.com/s/1BygIXhCnNGjs1KzK6l5bZQ 密码: h29s 说明: 最左侧一列要求自适应浏览器高度,左上面4个按钮相对浏览器左上角固定…

开始学习

难度:普通时间:大约需要1

359人在学习该课程,有205人已经完成该课程

第十六天,开始感受JS的乐趣

第十六天,开始感受JS的乐趣 课程目标 从今天开始,我们要开始学习在Web开发中使用 JavaScript/ECMAScript 来实现各种各样的交互逻辑及数据处理,今天的目标是初步了解 JavaScript/ECMAScript 是什么,开始学习基本的语法,并通过几个小例子的练习,来初步感受语言的魅力。 已经有经验的同学,可以直接跳过此课。 阅读 首先我们阅读一些定义和历史,放轻松阅读,不用背下来。 W3School JavaScript MDN 什么是JavaScript? 一文读懂JavaScript和ECMAScript的区别 W3School JavaScript历史 编码 接下…

开始学习

难度:普通时间:大约需要2

222人在学习该课程,有175人已经完成该课程

第十七天到第十八天,“如果”可以“重来”

第十七天到第十八天,“如果”可以“重来” 课程目标 今天将继续学习 JavaScript 的一些基本知识,比如if如果判断,for循环等 任务描述 阅读 W3School 从if-else看到异常 MDN 阅读完JavaScript第一步及JavaScript基础要件 编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IFE ECMAScript</title> </head> <body> …

开始学习

难度:普通时间:大约需要1

185人在学习该课程,有157人已经完成该课程

第十九天:找到那个DOM

第十九天:找到那个DOM 课程目标 掌握 JavaScript 的核心之一:DOM,能够熟悉DOM相关操作,了解JavaScript事件机制 课程描述 阅读 W3School MDN DOM 《JavaScript 高级程序设计》 编码 查找元素练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IFE ECMAScript</title> </head> <body> &l…

开始学习

难度:普通时间:大约需要2

152人在学习该课程,有128人已经完成该课程

第二十到第二十一天:让你和页面对话

第二十到第二十一天:让你和页面对话 课程目标 掌握 JavaScript 事件的概念,并能写出基本的事件相关的代码 掌握如何通过 JavaScript 操作 DOM 的样式 课程描述 阅读 首先学习了解 JavaScript 事件的知识 W3School 事件 MDN 事件 HTML DOM Text 对象 HTML DOM Button 对象 编码 <input id="name" type="text"> <button id="submit-btn">Submit</button> 在HTML中增加上面的代码,然后通过JavaScrip…

开始学习

难度:普通时间:大约需要3

106人在学习该课程,有84人已经完成该课程

第二十二天到第二十四天:JavaScript里面的居民们

第二十二天到第二十四天:JavaScript里面的居民们 课程目标 掌握 JavaScript 中的各个数据类型、对象的概念及常用方法,这次课程的任务量比较多,但不要着急,也不要急于完成任务,认真写好每一个代码。加油! 课程描述 阅读 首先,我们从变量和数据类型入手,同时学习一下 JavaScript 中的数字类型 W3School 变量 W3School 数据类型 JavaScript中值类型和引用类型的区别 MDN 变量 W3School 数字 MDN 数字 Number Math 编码 首先练习数字相关的一些操作: <div> <label>Numbe…

开始学习

难度:普通时间:大约需要3

76人在学习该课程,有58人已经完成该课程

第二十五天到第二十七天 倒数开始 滴答滴 滴答滴

第二十五天到第二十七天 倒数开始 滴答滴 滴答滴 课程目标 学习 JavaScript 的函数,学习如何使用和封装函数,学习Date对象 课程描述 阅读 可能大部分同学已经理解了函数是什么概念,不过对于一些新入门的同学,我们不妨再来仔细阅读一下什么是函数。 W3School 函数 MDN 编码 我们假设要在某种特殊的机器人上写代码,但是这个机器人本身只实现了以下两个方法(函数): Go,表示向当前方向前进一步 TurnLeft,表示向左转 那我现在需要你做的任务是向前走两步,然后向左转,再向前走一步,所以代码是: Go(); Go(); TurnLeft(); Go(); 好,看上去没…

开始学习

难度:普通时间:大约需要3

56人在学习该课程,有44人已经完成该课程

第二十八天到第三十天 给爱的人发个邮件吧

第二十八天到第三十天 给爱的人发个邮件吧 课程目标 通过一系列的练习掌握如何分解问题、解决问题,在这个过程中如何设计自己的代码结构,如何优化及重构。 课程描述 通过一个小练习综合运用 HTML、CSS、JavaScript,我们要实现一个邮箱输入的提示功能。最终示意图: 部分代码参考: <div class="wrapper"> <input id="email-input" type="text"> <ul id="email-sug-wrapper" class="email-sug"></ul> </div>…

开始学习

难度:普通时间:大约需要3

50人在学习该课程,有19人已经完成该课程

第三十一到第三十三天:我是精明的小卖家(一)

第三十一到第三十三天:我是精明的小卖家(一) 课程目标: 这次的任务将会分解为好几个子任务,是我们以后在工作中会经常遇到的项目类型--MIS系统,我们今天将会以MIS系统中的一个简单的页面示例,来让大家尝试一下稍微复杂的页面功能,我们如何进行拆解。 课程描述 最终需求描述: 这是一个数据报表定制页面,有许多筛选表单,有一个表格,以及几个图表,需要我们在不使用任何框架的情况下,完成这个页面的开发 页面初始化的时候,显示默认的数据及图表 根据用户的表单选择,可以进行数据和图表的切换,但这些切换动作都是在当前页面中完成 用户可以在当前页面上做一些数据修改,我们先设定这些修改仅对自己有效,将数据存在…

开始学习

难度:进阶时间:大约需要3

2人在学习该课程,有0人已经完成该课程

第三十四天到第三十六天:我是精明的小卖家(二)

第三十四天到第三十六天 我是精明的小卖家(二) 课程目标 今天我们将学习SVG和Canvas,来继续丰富我们的销售报表 课程描述 需求描述 当上一课任务完成时,面对一个复杂数据的表格,估计没有人会仔细看这份数据的内容是什么,看也看不出什么。所以我们希望找到某种方式,让数据变得更加易读和易懂,而数据可视化正式解决这一问题的最佳答案。 在表格上方增加两个图表,一个折线图和一个柱状图,用于展现不同数据在12个月的销售情况。 先了解一下数据可视化 简要阅读下面两个文章了解数据可视化 数据可视化百科词条 ECharts数据可视化规范 小练习 阅读 我们将通过SVG及Canvas来分别实现折线图及柱状…