<p align="center">
  <img width="200" src="./assets/images/logo.svg" alt="logo">
</p>

<h1 align="center">前端刻意练习<small style="font-size:50%">(原:前端晚练课)</small></h1>

<p align="center">
  <img src="https://img.shields.io/badge/project-%E5%89%8D%E7%AB%AF%E5%88%BB%E6%84%8F%E7%BB%83%E4%B9%A0-%7B.svg">&nbsp;
  <img src="https://badgen.net/github/stars/fezaoduke/fe-practice-hard">&nbsp;
  <img src="https://img.shields.io/badge/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7-%E5%89%8D%E7%AB%AF%E6%97%A9%E8%AF%BB%E8%AF%BE-brightgreen.svg">
</p>

<p align="center">每天一个前端知识点,苦练前端真功夫</p>

> 很多时候,我们在看书或网上的教程时“一学就会”,可真正解决实际问题时往往“一写就跪”,看似“学会”的知识其实并没有掌握,我们缺乏相对应的必要练习。

## 本期练习传送门

- [第 129 期(W3C标准-CSS-动画):跳动的心 for 10.24程序员节](https://github.com/fezaoduke/fe-practice-hard/issues/132)

<!--
- [前端刻意练习-周末小测-2](https://exam.kaoshixing.com/exam/exam_skip_login/292991/136969)

  > 开考日期:2019-07-19 至 2019-07-21 <br>
  > 考试时长:8 分钟 <br>
  > 人数限制:25 人(用的第三方考试系统,免费版限制 25 人) <br>
  > 及格分数:4 分(满分 6 分),考完自动核算成绩 <br>
-->

<!--
## 榜单

- [参与者排行榜(第1-100期)](https://fezaoduke.github.io/fe-practice-hard/ranking-list/index.html?session=1) (前三有奖励哦)
- [名人堂](https://fezaoduke.github.io/fe-practice-hard/honor-wall/)
-->

## 知识体系

### 基本功 ![](./assets/images/dumbbell.png)

- #### W3C标准
  - HTML/HTML5
    - [第 17 期(W3C标准-HTML):ol标签计数器](https://github.com/fezaoduke/fe-practice-hard/issues/20)
    - [第 18 期(W3C标准-HTML):a 标签](https://github.com/fezaoduke/fe-practice-hard/issues/21)
    - [第 19 期(W3C标准-HTML):换行](https://github.com/fezaoduke/fe-practice-hard/issues/22)
    - [第 20 期(W3C标准-HTML):meta标签](https://github.com/fezaoduke/fe-practice-hard/issues/23)
    - [第 33 期(W3C标准-HTML):汉语拼音](https://github.com/fezaoduke/fe-practice-hard/issues/36)
    - [第 43 期(W3C标准-HTML):快捷键](https://github.com/fezaoduke/fe-practice-hard/issues/46)
    - [第 66 期(W3C标准-HTML):特殊实体字符HTML、CSS、JS对照表](https://github.com/fezaoduke/fe-practice-hard/issues/69)
    - [第 67 期(W3C标准-HTML):form 特性](https://github.com/fezaoduke/fe-practice-hard/issues/70)
    - [第 96 期(W3C标准-HTML):output 元素](https://github.com/fezaoduke/fe-practice-hard/issues/99)
    - [第 105 期(W3C标准-HTML):表单验证](https://github.com/fezaoduke/fe-practice-hard/issues/108)
    - [第 106 期(W3C标准-HTML):原生HTML实现输入框下拉补全提示](https://github.com/fezaoduke/fe-practice-hard/issues/109)
    - [第 112 期(W3C 标准-HTML):table的colgroup和col](https://github.com/fezaoduke/fe-practice-hard/issues/115)
  - CSS/CSS3
    - 语法
      - [第 53 期(W3C标准-CSS-语法):样式的顺序](https://github.com/fezaoduke/fe-practice-hard/issues/56)    
      - [第 32 期(W3C标准-CSS-语法):两种盒模型的区别](https://github.com/fezaoduke/fe-practice-hard/issues/35)
      - [第 115 期(W3C标准-CSS-语法):CSS 单位](https://github.com/fezaoduke/fe-practice-hard/issues/118)
    - 伪类/伪元素
      - [第 114 期(W3C标准-CSS-伪类&伪元素):focus-within 伪类](https://github.com/fezaoduke/fe-practice-hard/issues/117)
      - [第 123 期(W3C标准-CSS-伪类&伪元素):表单验证伪类](https://github.com/fezaoduke/fe-practice-hard/issues/126)
    - 布局排版
      - [第 35 期(W3C标准-CSS-布局排版):图片等比缩放匹配父容器尺寸](https://github.com/fezaoduke/fe-practice-hard/issues/38)
      - [第 54 期(W3C标准-CSS-布局排版):word-break与word-wrap](https://github.com/fezaoduke/fe-practice-hard/issues/57)
      - [第 70 期(W3C标准-CSS-布局排版):不定高垂直居中](https://github.com/fezaoduke/fe-practice-hard/issues/73)
      - [第 97 期(W3C 标准-CSS-布局排版):首字下沉效果](https://github.com/fezaoduke/fe-practice-hard/issues/100)
      - [第 98 期(W3C 标准-CSS-布局排版):首行文字自定义](https://github.com/fezaoduke/fe-practice-hard/issues/101)
      - [第 100 期(W3C 标准-CSS-布局排版):两端对齐](https://github.com/fezaoduke/fe-practice-hard/issues/103)
    - 绘制
      - [第 4 期(W3C标准-CSS-绘制):CSS 菱形剪切](https://github.com/fezaoduke/fe-practice-hard/issues/6)
      - [第 92 期(W3C 标准-CSS-绘制):background-origin 背景图片绘制参照点](https://github.com/fezaoduke/fe-practice-hard/issues/95)
      - [第 107 期(W3C标准-CSS-绘制):占位区块效果](https://github.com/fezaoduke/fe-practice-hard/issues/110)
      - [第 127 期(W3C标准-CSS-绘制):border-radius](https://github.com/fezaoduke/fe-practice-hard/issues/130)
    - 响应式布局
      - [第 39 期(W3C标准-CSS-响应式布局):基于Grid的响应式布局](https://github.com/fezaoduke/fe-practice-hard/issues/42)
    - 动画
      - [第 46 期(W3C标准-CSS-动画):按钮loading动画效果](https://github.com/fezaoduke/fe-practice-hard/issues/49)
      - [第 109 期(W3C标准-CSS-动画):翻转缩放动画](https://github.com/fezaoduke/fe-practice-hard/issues/112)
      - [第 129 期(W3C标准-CSS-动画):跳动的心 for 10.24程序员节](https://github.com/fezaoduke/fe-practice-hard/issues/132)
  - JavaScript
    - [第 64 期(W3C标准-JavaScript):JavaScript中常用的转义字符](https://github.com/fezaoduke/fe-practice-hard/issues/67)
    - [第 94 期(W3C 标准-JavaScript):toFixed 方法](https://github.com/fezaoduke/fe-practice-hard/issues/97)
    - [第 116 期(W3C 标准-JavaScript):atob & btoa —— base64 的解码编码](https://github.com/fezaoduke/fe-practice-hard/issues/119)
    - [第 124 期(W3C 标准-JavaScript):unicode码互转](https://github.com/fezaoduke/fe-practice-hard/issues/127)
    - [第 126 期(W3C 标准-JavaScript):iframe父子通信](https://github.com/fezaoduke/fe-practice-hard/issues/129)
    - DOM
      - [第 24 期(W3C标准-JavaScript-DOM):复选框的全选反选](https://github.com/fezaoduke/fe-practice-hard/issues/27)
      - [第 41 期(W3C标准-JavaScript-DOM):点击空白处检测](https://github.com/fezaoduke/fe-practice-hard/issues/44)
      - [第 71 期(W3C标准-JavaScript-DOM):复选框的半选](https://github.com/fezaoduke/fe-practice-hard/issues/74)
      - [第 84 期(W3C 标准-JavaScript-DOM):client、offset和scroll](https://github.com/fezaoduke/fe-practice-hard/issues/87)
      - [第 90 期(W3C 标准-JavaScript-DOM):获取DOM的样式](https://github.com/fezaoduke/fe-practice-hard/issues/93)
      - [第 117 期(W3C 标准-JavaScript-DOM):监听页面DOM元素的插入](https://github.com/fezaoduke/fe-practice-hard/issues/120)
      - [第 119 期(W3C 标准-JavaScript-DOM):DocumentFragment - 文档片段](https://github.com/fezaoduke/fe-practice-hard/issues/122)
      - [第 121 期(W3C 标准-JavaScript-DOM):dataset](https://github.com/fezaoduke/fe-practice-hard/issues/124)
    - BOM
      - [第 59 期(W3C标准-JavaScript-BOM):location 位置操作](https://github.com/fezaoduke/fe-practice-hard/issues/62)
    - 事件
      - [第 38 期(W3C标准-JavaScript-事件):事件的绑定与移除](https://github.com/fezaoduke/fe-practice-hard/issues/41)
      - [第 51 期(W3C标准-JavaScript-事件):复合事件](https://github.com/fezaoduke/fe-practice-hard/issues/54)
      - [第 55 期(W3C标准-JavaScript-事件):页面卸载事件 beforeunload](https://github.com/fezaoduke/fe-practice-hard/issues/58)
      - [第 80 期(W3C标准-JavaScript-事件):InputEvent.inputType](https://github.com/fezaoduke/fe-practice-hard/issues/83)
      - [第 120 期(W3C 标准-JavaScript-事件):pagehide 和 pageshow](https://github.com/fezaoduke/fe-practice-hard/issues/123)
    - 存储
      - [第 58 期(W3C标准-JavaScript-存储):保存文本域的内容刷新不丢失](https://github.com/fezaoduke/fe-practice-hard/issues/61)
    - 异步
      - [第 36 期(W3C标准-JavaScript-异步):实现一个Promise方法](https://github.com/fezaoduke/fe-practice-hard/issues/39)
      - [第 65 期(W3C标准-JavaScript-异步):手写实现AJAX](https://github.com/fezaoduke/fe-practice-hard/issues/68)
      - [第 113 期(W3C 标准-JavaScript-异步):async 和 await](https://github.com/fezaoduke/fe-practice-hard/issues/116)
    - Math
      - [第 5 期(2019-05-12):数组最大数最小数](https://github.com/fezaoduke/fe-practice-hard/issues/7)
      - [第 7 期(2019-05-14):n以内的随机数](https://github.com/fezaoduke/fe-practice-hard/issues/9)
    - Date
      - [第 6 期(2019-05-13):获取过去n天的日期](https://github.com/fezaoduke/fe-practice-hard/issues/8)
      - [第 93 期(W3C 标准-JavaScript-Date):获取指定月份有多少天](https://github.com/fezaoduke/fe-practice-hard/issues/96)
      - [第 111 期(W3C 标准-JavaScript-Date):五种获取指定日期毫秒数的方法](https://github.com/fezaoduke/fe-practice-hard/issues/114)
  - WCAG
  - JSON
    - [第 10 期(2019-05-17):JSON.parse方法polyfill](https://github.com/fezaoduke/fe-practice-hard/issues/12)
    - [第 21 期(W3C标准-JSON):JSON.stringify](https://github.com/fezaoduke/fe-practice-hard/issues/24)
  - XML
  - SVG
    - [第 28 期(W3C标准-SVG):用SVG画西瓜](https://github.com/fezaoduke/fe-practice-hard/issues/31)
    - [第 104 期(W3C 标准-SVG):SVG优雅降级显示](https://github.com/fezaoduke/fe-practice-hard/issues/107)
  - canvas
    - [第 83 期(W3C标准-canvas):canvas 画布尺寸](https://github.com/fezaoduke/fe-practice-hard/issues/86)
    - [第 108 期(W3C标准-canvas):碎屑特效](https://github.com/fezaoduke/fe-practice-hard/issues/111)
  - URL
    - [第 79 期(W3C标准-URL):URLSearchParams](https://github.com/fezaoduke/fe-practice-hard/issues/82)
- #### ECMAScript
  - 语法
    - [第 13 期(2019-05-20):无返回值的语句](https://github.com/fezaoduke/fe-practice-hard/issues/15)
    - [第 14 期(ECMAScript-语法):类型判断](https://github.com/fezaoduke/fe-practice-hard/issues/16)
    - [第 16 期(ECMAScript-语法):浅克隆](https://github.com/fezaoduke/fe-practice-hard/issues/18)
    - [第 23 期(ECMAScript-语法):字符串对象HTML格式替代方法](https://github.com/fezaoduke/fe-practice-hard/issues/26)
    - [第 34 期(ECMAScript-语法):js 对象深拷贝](https://github.com/fezaoduke/fe-practice-hard/issues/37)    
    - [第 57 期(ECMAScript-语法):setTimeout的其他参数](https://github.com/fezaoduke/fe-practice-hard/issues/60)
    - [第 72 期(ECMAScript-语法):判断整数](https://github.com/fezaoduke/fe-practice-hard/issues/75)
    - [第 73 期(ECMAScript-语法):Unicode字符与编码互转](https://github.com/fezaoduke/fe-practice-hard/issues/76)
    - [第 76 期(ECMAScript-语法):如何判断空对象](https://github.com/fezaoduke/fe-practice-hard/issues/79)
  - 上下文环境
    - [第 12 期(2019-05-19):同名函数的执行](https://github.com/fezaoduke/fe-practice-hard/issues/14)
    - [第 52 期(WECMAScript-上下文环境):模拟call方法](https://github.com/fezaoduke/fe-practice-hard/issues/55)
    - [第 56 期(WECMAScript-上下文环境):模拟apply方法](https://github.com/fezaoduke/fe-practice-hard/issues/59)
  - 原型链 继承
    - [第 22 期(ECMAScript-原型链 继承):实现 Array map](https://github.com/fezaoduke/fe-practice-hard/issues/25)
    - [第 26 期(ECMAScript-原型链 继承):实现 Array reduce](https://github.com/fezaoduke/fe-practice-hard/issues/29)
    - [第 37 期(ECMAScript-原型链 继承):原型链的尽头](https://github.com/fezaoduke/fe-practice-hard/issues/40)
  - 作用域 闭包
    - [第 2 期(ECMAScript-作用域 闭包):定时输出数字](https://github.com/fezaoduke/fe-practice-hard/issues/3)
    - [第 31 期(ECMAScript-作用域 闭包):模拟ES6 Generator](https://github.com/fezaoduke/fe-practice-hard/issues/34)
  - 正则表达式
    - [第 9 期(ECMAScript-正则表达式):CSS兼容性验证](https://github.com/fezaoduke/fe-practice-hard/issues/11)
    - [第 27 期(ECMAScript-正则表达式):金额数值格式化](https://github.com/fezaoduke/fe-practice-hard/issues/30)
  - 严格模式
    - [第 11 期(ECMAScript-严格模式):arguments与'use strict'](https://github.com/fezaoduke/fe-practice-hard/issues/13)
- #### HTTP 标准
  - 请求过程
    - [第 40 期(HTTP规范-请求过程):HTTP的方法](https://github.com/fezaoduke/fe-practice-hard/issues/43)
  - 状态码
    - [第 77 期(HTTP 标准-状态码):HTTP状态码和请求阶段码](https://github.com/fezaoduke/fe-practice-hard/issues/80)
  - 头部信息
  - HTTPS

### 内功 ![](./assets/images/strength.png)

- #### 设计模式
- #### 算法
  - 搜索
    - [第 3 期(2019-05-10):无重复字符的最长子串](https://github.com/fezaoduke/fe-practice-hard/issues/4)
    - [第 30 期(算法-搜索):二分搜索算法](https://github.com/fezaoduke/fe-practice-hard/issues/33)
    - [第 42 期(算法-搜索):获取多层嵌套对象的目标属性值](https://github.com/fezaoduke/fe-practice-hard/issues/45)
  - 排序
    - [第 1 期(算法-排序):多重排序](https://github.com/fezaoduke/fe-practice-hard/issues/2)
    - [第 86 期(算法-排序):经典排序算法之冒泡排序](https://github.com/fezaoduke/fe-practice-hard/issues/89)
    - [第 87 期(算法-排序):经典排序算法之选择排序](https://github.com/fezaoduke/fe-practice-hard/issues/90)
    - [第 88 期(算法-排序):经典排序算法之插入排序](https://github.com/fezaoduke/fe-practice-hard/issues/91)
    - [第 89 期(算法-排序):经典排序算法之计数排序](https://github.com/fezaoduke/fe-practice-hard/issues/92)
    - [第 91 期(算法-排序):经典排序算法之快速排序](https://github.com/fezaoduke/fe-practice-hard/issues/94)
    - [第 101 期(算法-排序):根据内容排序数组](https://github.com/fezaoduke/fe-practice-hard/issues/104)
    - [第 118 期(算法-排序):数组乱序](https://github.com/fezaoduke/fe-practice-hard/issues/121)
  - 递归
    - [第 25 期(算法-递归):汉诺塔(河内塔)](https://github.com/fezaoduke/fe-practice-hard/issues/28)
    - [第 125 期(算法-递归):统计子类目数量](https://github.com/fezaoduke/fe-practice-hard/issues/128)
  - 数学
    - [第 8 期(算法-数学):求斐波那契数前N项](https://github.com/fezaoduke/fe-practice-hard/issues/10)
    - [第 29 期(算法-数学):抽奖概率算法](https://github.com/fezaoduke/fe-practice-hard/issues/32)
    - [第 82 期(算法-数学):如何将一张图片完全显示在容器里](https://github.com/fezaoduke/fe-practice-hard/issues/85)
    - [第 85 期(算法-数学):判断一个数是否为素数(质数)](https://github.com/fezaoduke/fe-practice-hard/issues/88)
- #### 数据结构
  - 队列
    - [第 62 期(数据结构-队列):队列和队列的模拟](https://github.com/fezaoduke/fe-practice-hard/issues/65)
    - [第 63 期(数据结构-队列):队列的应用](https://github.com/fezaoduke/fe-practice-hard/issues/66)
  - 栈
    - [第 60 期(数据结构-栈):栈和栈的模拟](https://github.com/fezaoduke/fe-practice-hard/issues/63)
    - [第 61 期(数据结构-栈):栈的应用](https://github.com/fezaoduke/fe-practice-hard/issues/64)
  - 树
  - 链表
    - [第 74 期(数据结构-链表):什么是链表](https://github.com/fezaoduke/fe-practice-hard/issues/77)
    - [第 75 期(数据结构-链表):单链表的实现](https://github.com/fezaoduke/fe-practice-hard/issues/78)
  - 哈希
    - [第 122 期(数据结构-哈希):哈希表](https://github.com/fezaoduke/fe-practice-hard/issues/125)
  - 数组
    - [第 15 期(数据结构-数组):数组去重](https://github.com/fezaoduke/fe-practice-hard/issues/17)
    - [第 48 期(数据结构-数组):获取字母表](https://github.com/fezaoduke/fe-practice-hard/issues/51)
    - [第 81 期(数据结构-数组):数组项的互换和移动](https://github.com/fezaoduke/fe-practice-hard/issues/84)
    - [第 95 期(数据结构-数组):伪数组](https://github.com/fezaoduke/fe-practice-hard/issues/98)
    - [第 110 期(数据结构-数组):清空数组](https://github.com/fezaoduke/fe-practice-hard/issues/113)
- #### 性能
    - [第 102 期(内功-性能):节流](https://github.com/fezaoduke/fe-practice-hard/issues/105)
    - [第 103 期(内功-性能):防抖](https://github.com/fezaoduke/fe-practice-hard/issues/106)

### 招术 ![](./assets/images/boxing.png)

  - 主流框架
    - React
      - [第 49 期(主流框架-React):生命周期函数](https://github.com/fezaoduke/fe-practice-hard/issues/52)
  - 技巧
    - [第 47 期(技巧):图片加载器](https://github.com/fezaoduke/fe-practice-hard/issues/50)
    - [第 50 期(技巧):npm和yarn的命令行](https://github.com/fezaoduke/fe-practice-hard/issues/53)
    - [第 68 期(技巧):git 时光机(一)](https://github.com/fezaoduke/fe-practice-hard/issues/71)
    - [第 69 期(技巧):git 时光机(二)](https://github.com/fezaoduke/fe-practice-hard/issues/72)
    - [第 78 期(技巧):如何优化SPA首屏加载](https://github.com/fezaoduke/fe-practice-hard/issues/81)
    - [第 99 期(技巧):前端工程师容易犯的一些低级错误](https://github.com/fezaoduke/fe-practice-hard/issues/102)
    - [第 128 期(技巧):关于logo显示的SEO小技巧](https://github.com/fezaoduke/fe-practice-hard/issues/131)


> 参考资料:[《前端工程师的知识体系》](https://www.cnblogs.com/yoshirogu/p/4174463.html)、[《WEB前端知识体系脑图》](https://www.jianshu.com/p/00baf1e65322)、[《自己总结的web前端知识体系大全》](https://www.cnblogs.com/wangfupeng1988/p/4649709.html)    

## 友情赞助商:前端早读课

`前端早读课` 是由知名互联网公司大牛情封(4399 UED/高级主管)开设的前端学习公众号,每天清晨发布前端技术文章,与七万+同行相伴成长。欢迎扫码关注:

![](./screenshot/official-public-accounts.jpg)