简介

本仓库用于记录自学web开发过程中看过的一些教学网站，文章资料以及自己的代码和心得笔记，方便查阅。

准备工作

科学上网 💀

在这里我就不吐槽百度的搜索有多坑了，虽然不是必备技能，但“工欲善其事，必先利其器。” 如果你想成为一名程序员或者是工程师，科学上网我觉得你应该学会。

学习Markdown语法 📑

Markdown是一种轻量级的标记语言。因为它语法简单，不用花过多时间在文字排版上，效率高，所以不只是程序员，现在有很多人都在用markdown来写作。

适合自己的编辑器 💻

对于程序员来说，代码编辑器绝对是最重要的开发工具之一。我常用的编辑器是Sublime Text3用来书写简单的项目，大一点的项目则使用VScode。

了解Github和Git

网上关于Github和Git的使用和配置教程一大堆，去了解学习一下，方便管理自己的代码。

学习网站

• DevDocs API Documentation

  作为文档工具手册涵盖非常全面，内容实时更新，用法和例子很清晰

• MDN Doc

  Mozila官方文档，逼格高，内容详尽

• 菜鸟教程

  如果不想看全英文的文档，那就撸菜鸟教程吧，适合基础入门

• 慕课网

  其实慕课网上的一些收费视频网上也都有资源，如果可以Star的话 我很乐意告诉你一些东西 😏

• bilibili

  我在B站学编程系列😂 B站上也有一些编程教学视频是很不错的，关注我说不定会有惊喜

• 前端知识汇总

  朴灵大佬的前端知识清单项目，强烈推荐

入门

1. HTML/CSS

1. 熟练掌握HTML标签的使用及嵌套方式、理解语义化。
2. 理解css选择器及其权重、优先级，掌握盒模型，元素定位及常用布局。

• HTML+CSS基础视频课程-慕课网

• HTML基础学习笔记

• 学习CSS布局

• 三种定位模式与5种清除浮动的常用方法

2. JavaScript

1. 理解 JS 的作用、运行规则、语法规则、数据类型、判定、循环等。
2. 了解 JavaScript 在浏览器中的能力。（操作 DOM、BOM，知道 AJAX 是什么）
3. 当 JavaScript 用于编写程序逻辑时，要知道需要用到什么语法、内置方法、内置 API。

• js标准参考教程-阮一峰
• JavaScript从入门到精通视频教程-Blue

推荐书籍

1. 《Head first HTML&CSS》 (浅显易懂) 2. 《JavaScript DOM编程艺术》(我的第一本前端入门书籍) 源码 3. 《Javscript 高级程序设计》(红宝书 必读书籍，没有之一) 源码

初级

1.HTML5/CSS3

1. 熟悉HTML5的新标签，新特性(有兴趣可以深入学习下Canvas)、CSS3的新属性等。
2. 了解 HTML5 中WebSQL、WebStorage（Local Storage 和 Session Storage）、应用缓存（Application Cache）、Cookie是怎么回事，能实现什么功能。
3. 伪类、新选择器及高级盒模型

• HTML5基础学习笔记

2. jQuery

熟练掌握jQuery的语法

• jQuery源码解析(DOM与核心模块)-慕课网
• 实现jQuery版todolist-实战项目

3. BootStrap

熟悉Bootstrap的文档与用法，重点是学会 Bootstrap 的栅格系统及其原理，了解响应式网页设计是如何实现的。最好可以完成一套基础的项目页面开发。

• Bootstrap 4 从入门到学会-小马视频

推荐书籍📖

1. 《锋利的jQuery》 源码

进阶

1. ES6

• ES6简单介绍视频
• ES6学习笔记

2. SCSS

• scss笔记 (todo)

推荐书籍📖

1. 《你不知道的JavaScript》 （带你重新认识JavaScript）

2. 《ECMAScript 6入门》 ECMAScript 6 入门

高级

1. Vue.js 技术栈

1. 理解MVVM的原理，掌握Vue框架的用法。
2. 学会vue-router、vuex、axios等常用第三方库。

• vue源码解析
• Vue-MintShop外卖实战项目

2. React.js 技术栈

React 基础

• 父子组件传值通信、事件传递
• 生命周期

技术胖的react教程

React文档学习笔记

React-router 路由

Redux 状态管理

入门文章：

• 《Redux 入门教程—阮一峰》
• 《Redux 中文文档》

React-Redux

3. Node.js

1. 了解 Node.js 特性和核心 API 的使用
2. 学习静态资源服务器的原理和开发
3. 掌握本地项目代码构建技巧
4. 了解常用的单元测试 & UI 测试工具
5. Headless 爬虫

• 文章(todo)
• 视频教程

4. 浏览器机制

前端工程化

• 理解 webpack 的作用及原理
• 学会 webpack 的配置
• 上手项目的打包配置过程
• 拥有工程化的前端思维

1. webpack

• Webpack简单入门
• Webapck进阶学习(暂时计划将Webpack简单入门重新搭建一遍 同时掌握高级概念 时间充足的话再整理笔记)
• Webpack 4 和单页应用入门

网络与浏览器

📖《网络是怎样连接的》

todo（浏览器工作原理 以及 输入url后发生了什么 整理属于自己的笔记）

图解浏览器的工作原理（史上最全）

面试

面试题

• 前端JS基础面试题
• interviewMap
• Web前端性能优化视频及笔记(todo)

面试技巧

• 前端面试技巧