daydreamerli / front-end-basics

前端基础知识

以下为前端工程师需要掌握的最为基本的知识点，请同学们首先学习每个知识点下面所列举的相关资料，再完成相应的作业。

1. Dom 事件

• DOM的事件模型，灵活运用事件机制，在合适的元素上绑定事件
• 绑定事件的方法

学习资料

Khan Academy - 视频学习资料
Eloquent Javascript Ch. 14 - 英语文字资料，全面概括DOM
MDN - MDN DOM教程，可选中文

作业

架子鼓小游戏

2. CSS

• 盒子模型
• 常用的css属性，如background、font系列、相对单位等
• 选择器
• 定位，绝对定位、相对定位
• 块级元素和内联元素
• flex布局

学习资料

Frontend Masters - 视频课程，只需要看Learning CSS这一部分
张鑫旭 Flex教程 - 中文资料，全面讲解Flex布局

作业

Flexbox Froggy - 完成flexbox froggy的24个关卡

3. HTTP & AJAX

• 常用的方法
• 常见的头字段及其作用
• Promise: 来源，使用方法

学习资料

图解HTTP - 中文文字资料，看前六章内容即可
阮一峰 - 中文文本，看第16章：Promise对象
MDN-AJAX - MDN文本资料，可选中文

作业

天气预报搜索

4. React

• React hooks: useState， useEffect，useCallback
• react中绑定事件的方法

学习资料

egghead - React视频课程
overreacted - useEffect hook 文本资料，可选中文

作业

任务清单小程序

5. NextJS

• pages
• data fetching
• routing

学习资料

Nextjs - Next官方文档，看完Basic Features, Routing两部分内容

作业

博客小程序 - 跟随Next官网提供的步骤完成最终程序