前端开发(入门)

助教微信
image.png
udacity公众号
image.png
Nanodegree key: nd001-cn-basic
Version: 1.0.0
Locale: zh-cn
学习网页开发的基本原理和应用知识,完成一系列实战项目,为成为一名前端工程师打下基础!
image.png

Content

Part 01 : 欢迎

开始学习纳米学位课程,并了解如何充分利用优达学城的资源!

  • Module 01: 欢迎

    • Lesson 01: 欢迎了解什么是纳米课程,什么是优等生社群以及如何最好的利用优达学城的资源
      • Concept 01: 欢迎
      • Concept 02: 纳米学位简介
      • Concept 03: 项目和进度
      • Concept 04: 如何提交项目
      • Concept 05: 诚信和决心
      • Concept 06: 如何才能抽出时间学习
      • Concept 07: 最后的提示
      • Concept 08: 组队通关课程赢奖品!

        Part 02 : 培养开发者思维

        在培养开发者思维这一课程中,你将会学习 Web 语言,Web 发展的历史,和我们作为 Web 开发者今天所处的位置。
  • Module 01: 项目 - 培养开发者思维

    • Lesson 01: 培养开发者思维在这一课程中,你将了解什么是 Web 语言和 Web 发展的历史。在实战项目中,你需要写一封信给将来的你,关于你将会如何面对和克服在此纳米学位项目中可能会遇到的困难,并设置你的目标。Project Description - 培养开发者思维Project Rubric - 培养开发者思维
      • Concept 01: 欢迎学习前端开发(入门)课程
      • Concept 02: Web 简史
      • Concept 03: Web 从来不会中断
      • Concept 04: 解决问题的策略

        Part 03 : 博客文章

        学习基础 HTML 知识,将一个博客文章原型转换成一个真的网页!
        相关技能:HTML
  • Module 01: HTML 语法

    • Lesson 01: HTML 语法学习 HTML 基本语法,了解如何查询你想要使用的 HTML 元素。
      • Concept 01: 课程简介
      • Concept 02: HTML 结构 第 1 部分
      • Concept 03: 创建第一个元素
      • Concept 04: 环境
      • Concept 05: 文本编辑器
      • Concept 06: Sublime Text 使用教程
      • Concept 07: Atom 使用教程
      • Concept 08: Visual Studio Code 使用教程
      • Concept 09: 浏览器
      • Concept 10: 工作流
      • Concept 11:
      • Concept 12: HTML 和树
      • Concept 13: 发现 Bug
      • Concept 14: HTML 查找
      • Concept 15: HTML 结构 第 2 部分
      • Concept 16: 深入了解 HTML 文档
      • Concept 17: 课程回顾
    • Lesson 02: HTML 语法习题集通过一系列 HTML 语法练习,巩固你的 HTML 技能!
      • Concept 01: 欢迎来到习题集!
      • Concept 02: 创建按钮
      • Concept 03: 创建按钮-解决方案
      • Concept 04: 创建各种标题
      • Concept 05: 创建列表
      • Concept 06: HTML 树
      • Concept 07: 构造链接
      • Concept 08: 创建图像
      • Concept 09: 路径指南
      • Concept 10: 插图
      • Concept 11: 简单文章的格式
  • Module 02: 项目 - 博客文章

    • Lesson 01: 项目 - 博客文章通过将博客文章原型转换为真实网站,练习 HTML 语法!Project Description - 博客文章Project Rubric - 博客文章
      • Concept 01: 制作文章原型概况

        Part 04 : 动物交换卡

        运用你的 CSS 知识,将设计原型转换为一个功能完全的网页!
        相关技能:CSS,高效开发
  • Module 01: CSS 语法

    • Lesson 01: CSS 语法学习 CSS 的基础知识,以向网站添加样式,并获取使用浏览器开发者工具的经验。
      • Concept 01: CSS 入门指南
      • Concept 02: CSS 简介
      • Concept 03: CSS 还是 HTML?
      • Concept 04: CSS 规则集
      • Concept 05: CSS 语法
      • Concept 06: 注释
      • Concept 07: 标签选择器
      • Concept 08: 属性和选择器
      • Concept 09: 使用选择器
      • Concept 10: 使用 CSS 参考
      • Concept 11: 开发者工具
      • Concept 12: 不同浏览器上的开发者工具
      • Concept 13: 使用开发者工具
      • Concept 14: CSS 单位
      • Concept 15: CSS 中的单位
      • Concept 16: CSS 颜色
      • Concept 17: 识别颜色
      • Concept 18: 总结和习题集
    • Lesson 02: CSS 语法习题集在此习题集中探索新的属性,并练习编写 CSS 和为网页添加样式。
      • Concept 01: 欢迎来到习题集!
      • Concept 02: 设计图片样式
      • Concept 03: 设计字体样式
      • Concept 04: 编写选择器
      • Concept 05: 使用属性
      • Concept 06: 属性 Workspace
      • Concept 07: Slack 卡片
      • Concept 08: Slack 卡片 Workspace
      • Concept 09: 优达学城站点标题
      • Concept 10: 优达学城站点标题 Workspace
      • Concept 11: 什么是样式表?
      • Concept 12: 样式表链接
    • Lesson 03: 如何更快地编写代码学习如何通过使用键盘快捷键、包和主题来扩展你的文本编辑器,改善工作流。
      • Concept 01: 更快地编写代码
      • Concept 02: Sublime Text 和 Atom 的键盘快捷方式
      • Concept 03: 练习:练习键盘快捷方式
      • Concept 04: 键盘快捷方式
      • Concept 05: 扩展 Sublime Text 和 Atom
      • Concept 06: 安装包和主题
      • Concept 07: 推荐包
      • Concept 08: 推荐主题
      • Concept 09: 你最喜欢的主题是什么?
      • Concept 10: 编码器、优化器、调试器、黑客
  • Module 02: 项目 - 动物交换卡

    • Lesson 01: 项目 - 动物交换卡通过你对 CSS 的了解,将设计原型转换为功能完备的网页!Project Description - 动物交换卡Project Rubric - 动物交换卡
      • Concept 01: 动物交换卡概述

        Part 05 : 编写你的作品集网页

        你将使用 HTML 和 CSS 将设计原型变为一个真正的网页。你将开发一个响应式网页,显示你在前端工程师纳米学位课程中将完成的每个实战项目的图像、描述和链接。
  • Module 01: 盒模型和语义元素

    • Lesson 01: 盒模型和语义元素探索盒模型,了解为何 Web 上的所有内容都只是一个盒子。
      • Concept 01: 猜想渲染游戏
      • Concept 02: James 的解决方案
      • Concept 03: Cameron 的解决方案
      • Concept 04: 谁是赢家?
      • Concept 05: 盒子无处不在
      • Concept 06: Web 上的框
      • Concept 07: 盒子模型
      • Concept 08: 盒边界
      • Concept 09: 更改盒
      • Concept 10: 盒模型大小调整
      • Concept 11: 容器
      • Concept 12: 相对宽度
      • Concept 13: 内联元素
      • Concept 14: 语义元素
      • Concept 15: 元素类型
      • Concept 16: 元素调查
      • Concept 17: 总结
    • Lesson 02: 盒模型和语义元素习题集完成此习题集中关于盒模型和语义元素的练习。
      • Concept 01: 欢迎来到习题集
      • Concept 02: 保持框型
      • Concept 03: 对齐和行高度
      • Concept 04: 使用 Cheetahs 对齐文本
      • Concept 05: 垂直对齐的乐趣
      • Concept 06: 玩转行高度
      • Concept 07: 制作桃子口味的冰淇淋
      • Concept 08: 设置表
      • Concept 09: 清除“Div 汤”
    • Lesson 03: HTML,CSS 和盒子跟着 Jessica Uelmen 和 Cameron Pittman,学习如何使用 HTML 和 CSS 来创建盒子模型布局。
      • Concept 01: 第一步
      • Concept 02: 探索 Web
      • Concept 03: 页面结构
      • Concept 04: HTML 小结
      • Concept 05: 视觉样式设置
      • Concept 06: HTML-CSS-DOM
      • Concept 07: 盒子无处不在
      • Concept 08: 盒子、网格和规则
      • Concept 09: 将设计图分解为盒子
      • Concept 10: 采访 Jacques
      • Concept 11: 从盒子到 HTML
      • Concept 12: 创建文件
      • Concept 13: 添加样式
      • Concept 14: 理解 CSS
      • Concept 15: 确定样式
      • Concept 16: 使用语义标记
      • Concept 17: 再次学习盒子
      • Concept 18: 放置盒子
      • Concept 19: 添加图片
      • Concept 20: 编码、测试、优化
      • Concept 21: 更多关于开发者工具的信息
      • Concept 22: 与设计原型比较
      • Concept 23: 总结
    • Lesson 04: CSS 框架和响应式布局继续了解网格设计,并设计出在桌面端和移动端都显示良好的网页。
      • Concept 01: 简介
      • Concept 02: 基于网格的设计
      • Concept 03: 构建一个框架
      • Concept 04: 响应式网页
      • Concept 05: 定义布局
      • Concept 06: 创建项目
      • Concept 07: 从想法到代码
      • Concept 08: 框架
      • Concept 09: 负空间
      • Concept 10: 溢出
      • Concept 11: 特定媒体 CSS
      • Concept 12: CSS 重设
      • Concept 13: 你的问题之前已得到解决
      • Concept 14: 应用框架
      • Concept 15: 语义结构
      • Concept 16: 调整页面
      • Concept 17: 持续改进
      • Concept 18: 编码、测试、优化、重复
      • Concept 19: 结论
    • Lesson 05: Bootstrap 和其他框架学习使用 Bootstrap——这一目前最流行的框架之一来流程化你的网页开发工作。
      • Concept 01: 简介
      • Concept 02: 网站结构
      • Concept 03: 选择框架
      • Concept 04: 阅读文档
      • Concept 05: 选择功能
      • Concept 06: 最小化 CSS 文件
      • Concept 07: 探索框架
      • Concept 08: 应用 Bootstrap 网格系统
      • Concept 09: 响应式页面
      • Concept 10: 使用 Bootstrap 排版
      • Concept 11: 为你的网站自定义 CSS
      • Concept 12: 看前端工程师如何做
      • Concept 13: 看前端工程师如何做 2
      • Concept 14: 交互性初探
      • Concept 15: 自构建框架与现有框架
      • Concept 16: 结论
  • Module 02: 响应式网页设计基础
    • Lesson 01: 响应式的重要性跟着 Pete Lepage 和 Cameron Pittman 学习响应式设计的重要性,并设置好你的开发环境。
      • Concept 01: 移动设备上的网站
      • Concept 02: 分享出色和糟糕的网站
      • Concept 03: 项目简介
      • Concept 04: 平移、缩放、触摸、Ick
      • Concept 05: 仿真器、模拟器和真实设备
      • Concept 06: 设置 Chrome 开发工具
      • Concept 07: 远程调试简介
      • Concept 08: 针对移动设备设置
      • Concept 09: 在移动设备上使用开发者工具
      • Concept 10: 适用于 iOS 的移动工具
      • Concept 11: 小结
    • Lesson 02: 从小处开始学习页面上的像素如何被渲染,以及对于不同的窗口大小,需要注意的事项。
      • Concept 01: 定义窗口
      • Concept 02: 像素、像素和更多像素!
      • Concept 03: 像素化
      • Concept 04: 计算 DPR
      • Concept 05: 有何差别?
      • Concept 06: 计算 CSS 像素
      • Concept 07: 窗口的宽度如何?
      • Concept 08: 设置窗口
      • Concept 09: 大型固定宽度元素
      • Concept 10: 元素的最大宽度
      • Concept 11: 相对大小
      • Concept 12: 点按目标大小
      • Concept 13: 点按目标
      • Concept 14: 从小处开始
      • Concept 15: 项目第 1 部分
      • Concept 16: 项目解决方案
      • Concept 17: 小结
    • Lesson 03: 搭建学习如何使用媒体查询来在你的页面上设置清楚的断点,并深入了解弹性框模块。
      • Concept 01: 简介
      • Concept 02: 基本媒体查询简介
      • Concept 03: 添加基本媒体查询
      • Concept 04: 添加基本媒体查询 2
      • Concept 05: “下一步”媒体查询
      • Concept 06: 应用了哪些样式?
      • Concept 07: 断点
      • Concept 08: 断点 第 2 部分
      • Concept 09: 断点数量
      • Concept 10: 选择断点
      • Concept 11: 选择断点 2
      • Concept 12: 选择一个断点
      • Concept 13: 复杂媒体查询
      • Concept 14: 应用了哪些样式?
      • Concept 15: 网格
      • Concept 16: 弹性框简介
      • Concept 17: 弹性框容器
      • Concept 18: 弹性项目
      • Concept 19: 解构弹性框布局
      • Concept 20: 解构弹性框布局
      • Concept 21: 小结
    • Lesson 04: 常见响应模式跟着 Cameron 学习常见的布局模式,以及如何在你自己的设计中使用这些布局。
      • Concept 01: 模式简介
      • Concept 02: 模型 - 掉落列模型
      • Concept 03: 模型 - 大体流动模型
      • Concept 04: 大体流动模型 第 1 部分
      • Concept 05: 大体流动模型 第 2 部分
      • Concept 06: 组合流动布局
      • Concept 07: 模式 - 布局切换器
      • Concept 08: 哪个是哪个?
      • Concept 09: 模式 - 画布之外
      • Concept 10: 画布外可视化
      • Concept 11: 项目更新 第 2 部分
      • Concept 12: 小结
    • Lesson 05: 优化学习如何在你的响应式设计中管理表格和字体。
      • Concept 01: 简介
      • Concept 02: 图片
      • Concept 03: 响应式表格简介
      • Concept 04: 响应式表格 - 隐藏列
      • Concept 05: 隐藏某些列
      • Concept 06: 响应式表格 - 没有更多表格了
      • Concept 07: 响应式表格 - 表格内滚动
      • Concept 08: 字体
      • Concept 09: 次要断点
      • Concept 10: 最终项目更新
      • Concept 11: 总结
  • Module 03: 响应式图片
    • Lesson 01: 准备工作跟随 Sam Dutton 和 Cameron Pittman,了解响应式图片的重要性,并开始设置你的开发环境。
      • Concept 01: 课程简介
      • Concept 02: 为什么需要响应式图片?
      • Concept 03: 项目简介
      • Concept 04: 设置你的环境
      • Concept 05: 针对移动设备设置
      • Concept 06: 在移动设备上使用开发者工具
      • Concept 07: 适用于 iOS 的移动工具
      • Concept 08: 小结
    • Lesson 02: 单位,格式和环境学习什么让图片很大,特定 CSS 单位,栅格和矢量图片,以及设置优化工具。
      • Concept 01: 调整大小简介
      • Concept 02: 比特和像素
      • Concept 03: 请求和盈利
      • Concept 04: 相对大小
      • Concept 05: 重要!优达学城前端反馈插件
      • Concept 06: calc()
      • Concept 07: 横向和纵向
      • Concept 08: 鲜为人知的 CSS 单位
      • Concept 09: 栅格和矢量
      • Concept 10: 栅格或矢量横幅?
      • Concept 11: 栅格和矢量识别
      • Concept 12: 文件格式
      • Concept 13: 找出差别
      • Concept 14: 压缩、优化和自动化
      • Concept 15: 图片优化环境
      • Concept 16: 找出差别 2
      • Concept 17: 图片压缩
      • Concept 18: 项目第 1 部分
      • Concept 19: 结束
    • Lesson 03: 标记图片学习如何使用符号、图标字体和 SVG 技巧处理文本图像。
      • Concept 01: 性能
      • Concept 02: 文本问题
      • Concept 03: CSS 技巧
      • Concept 04: CSS 背景图片技巧
      • Concept 05: 符号字符
      • Concept 06: Unicode 高音谱号
      • Concept 07: 图标字体
      • Concept 08: SVG 和数据 URI 内嵌图片
      • Concept 09: 策略练习 1
      • Concept 10: 策略练习 2
      • Concept 11: 策略练习 3
      • Concept 12: 策略练习 4
      • Concept 13: 项目 第 2 部分
      • Concept 14: 小结
    • Lesson 04: 完全响应性学习如何使用 srcset 和图片元素,让向你的作品集添加完全响应图片变得简单。
      • Concept 01: 响应屏幕功能和视图
      • Concept 02: srcset
      • Concept 03: Sizes 属性
      • Concept 04: srcset 练习
      • Concept 05: srcset 和 sizes
      • Concept 06: 图片元素
      • Concept 07: 无障碍性
      • Concept 08: 无障碍性承诺
      • Concept 09: 项目 第 3 部分
      • Concept 10: 总结
  • Module 04: 项目 - 编写你的作品集网页

    • Lesson 01: 项目 - 编写你的作品集网页请根据提供的设计原型 PDF 文件,使用 HTML 和 CSS 再现该设计。Project Description - 编写你的作品集网页Project Rubric - 编写你的作品集网页
      • Concept 01: 项目概况
      • Concept 02: 项目详情

        Part 06 : 电子简历

        在掌握了前端工程师应有的技能后,你需要为他人留下深刻的第一印象。因此,你需要一份引人注目的简历,建立简历不仅有助于培养重要的技能,还可以使你能简单明了地向雇佣者说明你适合某一工作的具体原因。在完成纳米学位项目的过程中,你可以不断地更新简历中的技能和项目内容。
  • Module 01: JavaScript 入门

    • Lesson 01: 什么是 JavaScript?了解 JavaScript 的历史,开始使用 JavaScript 控制台编写代码。
      • Concept 01: JavaScript 简介
      • Concept 02: JavaScript 的发展历史
      • Concept 03: JavaScript 控制台
      • Concept 04: 不同浏览器上的开发者工具
      • Concept 05: console.log
      • Concept 06: JavaScript 演示
      • Concept 07: 第 1 节课总结
    • Lesson 02: 数据类型和变量学习使用 JavaScript 变量来表示真实世界的数据,知道如何区分各种数据类型。
      • Concept 01: 数据类型入门
      • Concept 02: 数字
      • Concept 03: 注释
      • Concept 04: 练习:第一个表达式 (2-1)
      • Concept 05: 字符串
      • Concept 06: 字符串连接
      • Concept 07: 变量
      • Concept 08: 练习:温度换算 (2-2)
      • Concept 09: 字符串索引
      • Concept 10: 转义字符串
      • Concept 11: 比较字符串
      • Concept 12: 练习:最喜欢的食物 (2-3)
      • Concept 13: 练习:字符串全部相等 (2-4)
      • Concept 14: 练习:都系起来了 (2-5)
      • Concept 15: 练习:Yosa Buson (2-6)
      • Concept 16: 布尔值
      • Concept 17: 练习:Facebook 帖子 (2-7)
      • Concept 18: Null、Undefined 和 NaN
      • Concept 19: 等式
      • Concept 20: 练习:分号!(2-8)
      • Concept 21: 练习:我的姓名是什么?(2-9)
      • Concept 22: 练习:出去吃饭了 (2-10)
      • Concept 23: 练习:Mad Libs (2-11)
      • Concept 24: 练习:一条常见的消息 (2-12)
      • Concept 25: 第 2 节课总结
    • Lesson 03: 条件语句了解如何使用条件语句向你的 JavaScript 程序添加逻辑。
      • Concept 01: 条件语句入门
      • Concept 02: 练习:流程图 (3-1)
      • Concept 03: 代码流程图
      • Concept 04: If…Else 语句
      • Concept 05: Else If 语句
      • Concept 06: 练习:偶数或奇数 (3-2)
      • Concept 07: 练习:音乐团体 (3-3)
      • Concept 08: 练习:谋杀之谜 (3-4)
      • Concept 09: 更复杂的问题
      • Concept 10: 逻辑运算符
      • Concept 11: 逻辑 AND 和 OR
      • Concept 12: 练习:查看余额 (3-5)
      • Concept 13: 练习:冰激凌 (3-6)
      • Concept 14: 练习:穿什么 (3-7)
      • Concept 15: 高级条件语句
      • Concept 16: 真值和假值
      • Concept 17: 三元运算符
      • Concept 18: 练习:了解食物链 (3-8)
      • Concept 19: Switch 语句
      • Concept 20: 传递
      • Concept 21: 练习:学历 (3-9)
      • Concept 22: 第 3 节课总结
    • Lesson 04: 循环利用 JavaScript 循环,减少重复的代码,并自动执行重复性的任务。
      • Concept 01: 循环入门
      • Concept 02: While 循环
      • Concept 03: While 循环的各个部分
      • Concept 04: 练习:JuliaJames (4-1)
      • Concept 05: 练习:99 瓶果汁 (4-2)
      • Concept 06: 练习:倒计时,发射! (4-3)
      • Concept 07: For 循环
      • Concept 08: For 循环的各个部分
      • Concept 09: 嵌套循环
      • Concept 10: 递增和递减
      • Concept 11: 练习:更改循环 (4-4)
      • Concept 12: 练习: 纠正错误 1 (4-5)
      • Concept 13: 练习:纠正错误 2 (4-6)
      • Concept 14: 练习:阶乘!(4-7)
      • Concept 15: 练习:找到我的座位 (4-8)
      • Concept 16: 第 4 节课总结
    • Lesson 05: 函数进入 JavaScript 函数的世界,学会利用函数的力量来简化和整理你的程序。
      • Concept 01: 函数入门
      • Concept 02: 函数示例
      • Concept 03: 声明函数
      • Concept 04: 函数总结
      • Concept 05: 练习:哈哈大笑 1 (5-1)
      • Concept 06: 练习:哈哈大笑 2 (5-2)
      • Concept 07: 返回值
      • Concept 08: 使用返回值
      • Concept 09: 作用域
      • Concept 10: 作用域示例
      • Concept 11: 覆盖
      • Concept 12: 全局变量
      • Concept 13: 作用域总结
      • Concept 14: 提升
      • Concept 15: 提升总结
      • Concept 16: 练习:构建三角形 (5-3)
      • Concept 17: 函数表达式
      • Concept 18: 函数表达式模式
      • Concept 19: 函数表达式总结
      • Concept 20: 练习:laugh (5-4)
      • Concept 21: 练习:Cry (5-5)
      • Concept 22: 练习:内嵌 (5-6)
      • Concept 23: 第 5 节课总结
    • Lesson 06: 数组了解如何使用数组在 JavaScript 程序中存储复杂数据。
      • Concept 01: 数组入门
      • Concept 02: 甜甜圈到代码
      • Concept 03: 创建数组
      • Concept 04: 访问数组元素
      • Concept 05: 数组索引
      • Concept 06: 练习:UdaciFamily (6-1)
      • Concept 07: 练习:构建船员 (6-2)
      • Concept 08: 练习:价格正确 (6-3)
      • Concept 09: 数组属性和方法
      • Concept 10: 长度
      • Concept 11: Push
      • Concept 12: Pop
      • Concept 13: Splice
      • Concept 14: 练习:彩虹的颜色 (6-4)
      • Concept 15: 练习:魁地奇杯 (6-5)
      • Concept 16: 练习:加入船员队伍 (6-6)
      • Concept 17: 练习:查看文档 (6-7)
      • Concept 18: 数组循环
      • Concept 19: forEach 循环
      • Concept 20: 练习:另一种类型的循环 (6-8)
      • Concept 21: Map
      • Concept 22: 练习:我有账单 (6-9)
      • Concept 23: 数组中的数组
      • Concept 24: 二维 Donut 数组
      • Concept 25: 练习:嵌套数字 (6-10)
      • Concept 26: 第 6 节课总结
    • Lesson 07: 对象认识下一个 JavaScript 数据结构:对象。学习使用对象来存储复杂的数据和数组。
      • Concept 01: 对象入门
      • Concept 02: 代码中的对象
      • Concept 03: 练习:Umbrella (7-1)
      • Concept 04: 对象
      • Concept 05: 对象字面值
      • Concept 06: 命名规则
      • Concept 07: 对象总结
      • Concept 08: 练习:菜单内容 (7-2)
      • Concept 09: 练习:银行账户 1 (7-3)
      • Concept 10: 练习:银行账户 2 (7-4)
      • Concept 11: 练习:Facebook 好友 (7-5)
      • Concept 12: 练习:再次使用 Donut 示例 (7-6)
      • Concept 13: 第 7 节课总结
    • Lesson 08: 准备工作跟随 Cameron Pittman 和 James Williams 学习“电子简历”项目,了解一些基本的 JavaScript 语法。
      • Concept 01: 欢迎参加课程!
      • Concept 02: 简历项目简介
      • Concept 03: 你的目标
      • Concept 04: GitHub 代码库
      • Concept 05: 下载代码库
      • Concept 06: 有关 HTML 的注释
      • Concept 07: 电子简历的 HTML
      • Concept 08: 简历中的 CSS 和 JS
      • Concept 09: 浏览器 JavaScript 控制台
      • Concept 10: console.log()
      • Concept 11: 编辑优达学城主页
      • Concept 12: 使用 .append() 构建页面
      • Concept 13: 亲自尝试 .append()
      • Concept 14: 技术和技巧练习
    • Lesson 09: 数据类型学习在 JavaScript 中表示数据的方法。你将获得处理字符串、布尔值、数组和 JSON 的经验。
      • Concept 01: var loveJS = true;
      • Concept 02: 保存并 .append() 数据
      • Concept 03: string.replace()
      • Concept 04: 组合使用 .replace() 和 .append()
      • Concept 05: 格式化数据,生成简历标题
      • Concept 06: 字符串操控练习 1
      • Concept 07: 真/假
      • Concept 08: var quiz = true;
      • Concept 09: 数组
      • Concept 10: .append()ing 数组练习
      • Concept 11: 数组操作
      • Concept 12: 字符串操控练习 2
      • Concept 13: 对象字面值标记
      • Concept 14: 档案练习
      • Concept 15: 点和括号标记
      • Concept 16: 练习使用对象
      • Concept 17: 关于 JSON 的注释
      • Concept 18: JSON
      • Concept 19: 验证 JSON
      • Concept 20: 验证 JSON 练习
      • Concept 21: 所有简历部分
    • Lesson 10: 流程控制学习如何在程序中使用常见的循环模式、条件迭代及添加逻辑流程。
      • Concept 01: If 语句
      • Concept 02: While 循环
      • Concept 03: For 循环
      • Concept 04: For-In 循环
      • Concept 05: Work!
      • Concept 06: 关于 For-In 循环的注释
      • Concept 07: 函数
      • Concept 08: 点击指标
      • Concept 09: 收集点击位置
      • Concept 10: Return 语句
      • Concept 11: 名称国际化
      • Concept 12: 封装
      • Concept 13: 封装函数
      • Concept 14: 独立研究
      • Concept 15: 定制作品集
      • Concept 16: 最终项目!
  • Module 02: jQuery 入门
    • Lesson 01: 基础:DOM、$ 和选择器跟随 Cameron Pittman 学习我们为什么使用 jQuery、“文档对象模型(DOM)”是什么,以及如何使用 jQuery 来抓取页面中的某些元素。
      • Concept 01: 课程简介
      • Concept 02: 为什么会存在 jQuery?
      • Concept 03: jQuery 究竟是什么?
      • Concept 04: 钱、钱、钱 ($)
      • Concept 05: 如何使用 $
      • Concept 06: DOM 启示
      • Concept 07: jQuery 如何包括到页面中?
      • Concept 08: 按标签选择
      • Concept 09: 按类选择
      • Concept 10: 按 ID 选择
      • Concept 11: 重新访问的树结构
      • Concept 12: 筛选器练习
      • Concept 13: 击个掌!
    • Lesson 02: 技巧:DOM 操作既然你知道如何选择元素,学习如何使用 jQuery 来 操作 DOM 并更改页面的演示。
      • Concept 01: jQuery 文档和你
      • Concept 02: you.toggleClass() 练习
      • Concept 03: 切换课程练习
      • Concept 04: 更改属性练习
      • Concept 05: 修改 CSS 练习
      • Concept 06: 推送 HTML 和文本
      • Concept 07: 收集值练习
      • Concept 08: 移除 DOM 元素
      • Concept 09: 添加 DOM 元素
      • Concept 10: 添加子元素
      • Concept 11: 构建 DOM 树结构!
      • Concept 12: 通过 each() 进行迭代
      • Concept 13: 为什么使用 jQuery
      • Concept 14: 总结
      • Concept 15: $(function)
    • Lesson 03: 使用 jQuery 的事件侦听器跟随 Richard Kalehoff 学习如何使用 jQuery 处理单击、键盘输入、滚动和其他可能发生的常见事件。
      • Concept 01: 使用 jQuery 的事件侦听简介
      • Concept 02: 浏览器事件简介
      • Concept 03: monitorEvents 练习
      • Concept 04: 事件类型
      • Concept 05: jQuery 事件侦听器的剖析
      • Concept 06: jQuery 事件侦听器顺序练习
      • Concept 07: jQuery 事件侦听器
      • Concept 08: 事件对象
      • Concept 09: Convenience 方法
      • Concept 10: Convenience 方法练习
      • Concept 11: jQuery 的多功能 .on 方法
      • Concept 12: 事件代理
      • Concept 13: 总结
  • Module 03: 项目 - 电子简历

    • Lesson 01: 项目准备掌握前端 Web 开发人员的技能后,你希望给人留下完美的第一印象。你需要一份脱颖而出的简历。你制作的简历不仅会帮助你塑造重要的技能,还将易于向雇主展示你为何适合此工作。随着你通过纳米学位项目的进展, 可使用你的新技能和项目更新简历。Project Description - 电子简历Project Rubric - 电子简历
      • Concept 01: 项目概述
      • Concept 02: 项目详情
      • Concept 03: 评估和提交

        Part 07 (Elective)__ : 如何使用 Git 和 GitHub

        学习如何使用版本控制系统,例如 Git 和 GitHub 保存和分享你的项目作品。
  • Module 01: 如何使用 Git 和 GitHub(选修)

    • Lesson 01: 操纵提交历史学习几种不同的版本控制系统,认识 Git 为什么对程序员很重要。使用 Git 浏览一个现有项目的历史。
      • Concept 01: 简介
      • Concept 02: 课程概述
      • Concept 03: 两个文件之间的差异
      • Concept 04: 查找较大文件之间的差异
      • Concept 05: 思考
      • Concept 06: 思考:使用 diff 查找 bug
      • Concept 07: 版本来自哪里?
      • Concept 08: 思考:使用历史记录提高效率
      • Concept 09: 代码 VCS 的特性
      • Concept 10: Git 中的手动提交
      • Concept 11: 创建概念图
      • Concept 12: 使用 Git 浏览历史
      • Concept 13: 概念图:diff
      • Concept 14: 为每项合逻辑的更改进行一次提交
      • Concept 15: 思考:手动提交
      • Concept 16: 追踪多个文件
      • Concept 17: 多文件 Git 提交
      • Concept 18: 思考:多文件提交
      • Concept 19: 采访 Jeffrey Middleton
      • Concept 20: 安装 Git
      • Concept 21: 克隆和探索版本库
      • Concept 22: 思考:使用 Git 浏览历史
      • Concept 23: 概念图:版本库、克隆、日志
      • Concept 24: Git 错误和警告
      • Concept 25: 检出代码的旧版本
      • Concept 26: 思考:对版本控制的信心
      • Concept 27: 采访 Lewis Kaneshiro
      • Concept 28: Git 工作空间
      • Concept 29: 在 Windows 上设置你的工作空间
      • Concept 30: 在 Mac 上设置你的工作空间
      • Concept 31: 思考:你想如何使用 Git?
      • Concept 32: 第 1 课小结
    • Lesson 02: 创建和修改代码库学习如何创建代码库,保存你的项目的不同版本。内容包括:暂存区、提交代码、建立分支和合并。
      • Concept 01: 简介
      • Concept 02: 版本库有何特点?
      • Concept 03: 初始化版本库
      • Concept 04: 检查新版本库
      • Concept 05: 思考:初始化版本库
      • Concept 06: 暂存区
      • Concept 07: 概念图:初始化、添加、暂存区
      • Concept 08: 思考:暂存区
      • Concept 09: 写好提交信息
      • Concept 10: 提交更改
      • Concept 11: 再次学习 git diff
      • Concept 12: 提交修复错误的更改
      • Concept 13: 思考:提交大小
      • Concept 14: 分支
      • Concept 15: 创建分支
      • Concept 16: 思考:何时使用分支
      • Concept 17: 采访 Mike Wales
      • Concept 18: 用分支协同工作
      • Concept 19: 可访问性
      • Concept 20: 再次学习分离的 HEAD
      • Concept 21: 思考:利用图表直观显示内容
      • Concept 22: 合并简单文件
      • Concept 23: 使用原始版本合并文件
      • Concept 24: 将 Coins 分支合并入 Master
      • Concept 25: 通过命令行合并
      • Concept 26: 思考:合并两个分支
      • Concept 27: 合并冲突
      • Concept 28: 检测冲突
      • Concept 29: 更新 Easy Mode 分支
      • Concept 30: 解决合并冲突
      • Concept 31: 提交冲突解决
      • Concept 32: 概念图:分支和合并
      • Concept 33: 思考:自动合并与手动合并
      • Concept 34: 采访 Jeffrey Middleton
      • Concept 35: 小结
    • Lesson 03: 使用 GitHub 协作练习使用 GitHub 来协作多开发者项目,在 GitHub 上创建和审阅 Pull Request。
      • Concept 01: 简介
      • Concept 02: GitHub 简介
      • Concept 03: 创建 GitHub 账户
      • Concept 04: 使版本库保持同步
      • Concept 05: 添加远程版本库
      • Concept 06: 在 GitHub 上编辑文件
      • Concept 07: 思考:何时使用远程版本库
      • Concept 08: 拉取更改
      • Concept 09: 概念图:GitHub、Push、Pull、Remote
      • Concept 10: 思考:手动与自动拉取
      • Concept 11: Fork版本库
      • Concept 12: Fork菜谱版本库
      • Concept 13: 推送更改到菜谱版本库
      • Concept 14: 思考:Fork、克隆和分支
      • Concept 15: 协作引发冲突
      • Concept 16: 修改 Chili 菜谱
      • Concept 17: Sarah 修改 Chili 菜谱
      • Concept 18: 模拟 Sarah 的更改
      • Concept 19: 更新远程分支的本地副本
      • Concept 20: 合并更改
      • Concept 21: 快进合并
      • Concept 22: 思考:远程分支的本地副本
      • Concept 23: 创建拉取请求
      • Concept 24: 更新拉取请求
      • Concept 25: 思考:使用 GitHub 协作
      • Concept 26: 冲突的更改
      • Concept 27: 更新本地版本库
      • Concept 28: 合并拉取请求
      • Concept 29: 概念图:Fork、提取、拉取请求
      • Concept 30: 采访 GitHub 的 Brent Beer
      • Concept 31: 思考:何时使用独立的分支
      • Concept 32: 修改历险记版本库
      • Concept 33: 保持Fork最新
      • Concept 34: 小结
    • Lesson 04: 使用 GitHub 搭建你的网站学习使用 GitHub 来搭建一个网站,展示你的前端工程师纳米学位实战项目,并与朋友和家人分享。
      • Concept 01: 使用 GitHub 搭建你的网站

        Part 08 (Elective)__ : 选修材料

        探索与网站开发相关的其他内容。
  • Module 01: 编写 README 文档

    • Lesson 01: 编写 README 文档在本课程中,你将学习什么是文档,为何文档是开发流程的重要组成部分。你将学习如何编写结构清晰的 README,并运用在后续的项目中。学完本课程后,你将能够使用 Markdown 编写自己的 README 文件。
      • Concept 01: 欢迎
      • Concept 02: 什么是文档?
      • Concept 03: 文档是写给谁看的?
      • Concept 04: Nija 如何使用文档?
      • Concept 05: 为什么 Art 应该为他的代码编写文档?
      • Concept 06: README 简介
      • Concept 07: README 的构成
      • Concept 08: 记录不断扩大的代码库
      • Concept 09: 用 Markdown 编写易读的 README 文档
      • Concept 10: 基本 Markdown 语法
      • Concept 11: 基本 Markdown 语法
      • Concept 12: 更多 Markdown 语法
      • Concept 13: 将一切记录在案!
  • Module 02: Shell 讲习班
    • Lesson 01: Shell 讲习班Unix shell 对所有领域的开发工程师来说都是一款强大的工具。在这节课,我们将快速讲解下在计算机上使用该工具的基本知识。
      • Concept 01: 欢迎!
      • Concept 02: Windows:安装 Git Bash
      • Concept 03: 打开终端
      • Concept 04: 你的第一个命令 (echo)
      • Concept 05: 浏览目录 (ls, cd, ..)
      • Concept 06: 当前工作目录 (pwd)
      • Concept 07: 参数和选项 (ls -l)
      • Concept 08: 整理文件 (mkdir, mv)
      • Concept 09: 下载 (curl)
      • Concept 10: 查看文件 (cat, less)
      • Concept 11: 删除内容 (rm, rmdir)
      • Concept 12: 搜索和管道 (grep, wc)
      • Concept 13: Shell 和环境变量
      • Concept 14: 起始文件 (.bash_profile)
      • Concept 15: 控制 shell 提示符 ($PS1)
      • Concept 16: 别名
      • Concept 17: 继续学习!
  • Module 03: JavaScript 和 DOM(文档对象模型)
    • Lesson 01: 文档对象模型文档对象模型 (DOM) 让开发者可以与渲染的页面进行交互,并对其进行控制。在本课程中,你将学到 DOM 是如何构成的、节点和元素是什么,以及如何从 DOM 中选择项目。
      • Concept 01: 简介
      • Concept 02: DOM
      • Concept 03: 使用 CSS 选择器选择页面元素
      • Concept 04: 通过 ID 选择页面元素
      • Concept 05: 通过类或标签选择页面元素
      • Concept 06: 节点、元素和接口…哦,天哪!
      • Concept 07: 更多访问元素的方法
      • Concept 08: 课程小结
    • Lesson 02: 使用 JavaScript 创建内容静态毫无新意,所以我们要用 JavaScript 和 DOM 方法来创建新的页面内容、更新现有内容和删除内容。你还会学到如何查看和设置页面元素的样式。
      • Concept 01: 简介
      • Concept 02: 更新现有页面内容
      • Concept 03: 添加新的页面内容
      • Concept 04: 移除页面内容
      • Concept 05: 设置页面内容样式
      • Concept 06: 课程小结
    • Lesson 03: 使用浏览器事件每当你与网页互动时,都会触发数百个事件。你将了解事件是什么、如何监听事件并对其作出回应、事件包含哪些数据,以及事件的各个阶段。
      • Concept 01: 简介
      • Concept 02: 回应事件
      • Concept 03: 移除事件监听器
      • Concept 04: 事件的阶段
      • Concept 05: 避免太多事件
      • Concept 06: 知道 DOM 何时准备就绪
      • Concept 07: 课程小结
    • Lesson 04: 性能学习如何测量你编写的代码,以确保其高效运行,以及重排和重绘如何影响性能。学习如何利用 JavaScript 事件循环来提高性能。
      • Concept 01: 简介
      • Concept 02: 高效添加页面内容
      • Concept 03: 重排和重绘
      • Concept 04: 调用堆栈
      • Concept 05: 事件循环
      • Concept 06: setTimeout
      • Concept 07: 课程小结
      • Concept 08: 课程总结
  • Module 04: 构建高转化率页面表单
    • Lesson 01: 高效输入(第一部分)开始使用合适的输入使表单尽量易于用户填写。
      • Concept 01: 课程简介
      • Concept 02: 修正表单
      • Concept 03: Luke 访谈(第一部分)
      • Concept 04: 为何表单很重要
      • Concept 05: 实用表单遵守的原则
      • Concept 06: 表单修正策略
      • Concept 07: 放弃使用下拉列表!
      • Concept 08: HTML5 输入
      • Concept 09: 选择一种输入
      • Concept 10: 数据列表练习
      • Concept 11: LukeW 访谈(第二部分)
      • Concept 12: 课程总结
    • Lesson 02: 高效输入(第二部分)开始向输入中添加其他功能,例如自动填充和验证功能。
      • Concept 01: 第 2 节课简介
      • Concept 02: 突击练习 HS
      • Concept 03: 标签元素
      • Concept 04: 制作标签
      • Concept 05: Luke W. 访谈(第三部分)
      • Concept 06: 标签大小和位置
      • Concept 07: 占位符
      • Concept 08: 占位符
      • Concept 09: 日历
      • Concept 10: 日历
      • Concept 11: 拼写错误
      • Concept 12: 自动填充
      • Concept 13: 自动填充
      • Concept 14: 自动聚焦
      • Concept 15: 使用以前的数据填充输入字段
      • Concept 16: 验证
      • Concept 17: 数字验证
      • Concept 18: 验证一些输入
      • Concept 19: Constraints Validation API
      • Concept 20: 验证一些数据
      • Concept 21: Luke W 访谈(第四部分)
      • Concept 22: 第 2 节课总结
    • Lesson 03: 更快的表单开始优化整个表单,而不是单个元素,以创建高转化率的网络表单。
      • Concept 01: 第 3 节课简介
      • Concept 02: 表单原则
      • Concept 03: 来一场头脑风暴吧
      • Concept 04: Luke W. 访谈(第五部分)
      • Concept 05: 我只需查看我的付款信息
      • Concept 06: 我还没打算注册
      • Concept 07: 得出结论
      • Concept 08: 在另一个设备上完成操作
      • Concept 09: 表单速度越快,转化率越高
      • Concept 10: Luke W 访谈(第六部分)
      • Concept 11: 一项神奇的技巧
      • Concept 12: 位置信息
      • Concept 13: 构建结算表单
      • Concept 14: Luke W 访谈(第七部分)
      • Concept 15: 第 3 节课总结
    • Lesson 04: 触摸支持了解在针对移动设备构建精彩的表单时,需要注意的特殊事项,例如触摸事件。
      • Concept 01: 第 4 节课简介
      • Concept 02: 没那么糟糕吧?
      • Concept 03: 触摸伪状态
      • Concept 04: 太多触摸操作
      • Concept 05: 构建更出色的 UI
      • Concept 06: Luke W 访谈(第八部分)
      • Concept 07: 事件监听器快速练习
      • Concept 08: 触摸事件
      • Concept 09: 与单个元素互动
      • Concept 10: 最终项目的说明和审核标准
      • Concept 11: 课程总结

点击购买