前端成长之路之打好根基
作为一个新手要学习系统化地学习 JS，应该走哪几步呢？
- 第一步：打开浏览器，输入网址：
https://hellogithub.com/ - 第二步：选择 JavaScript 项目
- 第三步：逐一学习
[手动狗头]有更快捷的方法吗？有！在本篇文章中你将从基础招式学习，了解 HTML、CSS、JS 等基础概念之后，实践一把吃豆人游戏制作，再开启性能调优之旅，最后闯荡前端江湖。
打好根基
HG #vol.036 Web 是一个前端入门的图文教程，记录了作者从 0-1 学习前端的过程。作为一个入门的图文教程，Web 遵循了事无巨细原则，在所有的介绍中详细讲 HTML、CSS、JS 等知识点，简单的移动端开发、Vue 等框架使用、Node.js 介绍也略有涉猎。值得一提得失，它所有的示例中代码注释清楚地标注了使用某个函数时你所需要注意的事项，贴心到不行。
不过，Web 项目在 JS 基础和进阶内容分层方面略有不足，会发现 16 个类目有许多重复内容，以及原先在前端进阶分类下的前端几道题被独立出来成为一个单独分类，收录了大量面试题和网友面经，但瑕不掩瑜，该 Repo 绝对是一个新手入门的实用教程。
由于作者没有对分类内容及分类下内容做脑图介绍，所以这里小鱼干绘制了它的脑图/目录结构，部分相同主题内容进行了折叠。
|── 前端工具
| ├──VS Code 的使用
| ├──Git 使用
| ├──Mac 安装和 iTerm2 配置
| ├──Sublime Text 的使用
| ├──WebStorm 的使用
| ├──Atom 的使用
| ├──GitHub 的使用
| ├──VS Code 的使用累积
| ├──Chrome 浏览器
| ├──Emmet in VS Code
| ├──iTerm2 + OhMyZsh + agnoster 搭建
| ├──iconMoon
| └──whistle 网络抓包
|──HTML
| ├──认识 Web 和 Web 标准
| ├──浏览器的介绍
| ├──初识 HTML
| ├──HTML 标签：排版标签
| ├──HMTL 标签：字体标签和超链接
| ├──HTML 标签：图片标签
| ├──HTML 标签：图文详解
| ├──HTML5 详解
| ├──HTML5 举例：简单的视频播放器
| ├──HTML 详解（二）
| ├──HTML 详解（三）
| └──HTML 基础回顾
|──CSS 基础
| ├──CSS 属性：字体属性和文本属性
| ├──CSS 属性：背景属性
| ├──CSS 样式表和选择器
| ├──CSS 选择器：伪类
| ├──CSS 样式表的继承性和层叠性
| ├──CSS 盒模型详解
| ├──浮动
| ├──CSS 属性：定位属性
| ├──CSS 案例讲解：博雅互动
| ├──CSS3 选择器详解
| ├──CSS3 属性详解（一）
| ├──CSS3 属性详解：动画详解
| ├──CSS3 属性：Flex 布局图文详解
| ├──CSS3 属性：Web 字体
| ├──SaaS 入门
| ├──浏览器的兼容性问题
| └──CSS3 的常见边框汇总
|──CSS 进阶
| ├──准备
| ├──CSS 中的非布局样式
| ├──CSS 布局
| ├──网页开发和设计中的字体常识
| ├──如何让一个元素水平居中
| ├──CSS 开发累积
| ├──CSS 文章推荐
| ├──CSS 的一些小知识
| └──CSS 面试题
|──JS 基础
| ├──编程语言
| ├──JS 简介
| ├──变量
| ├──变量的数据类型：基本数据类型和引用数据类型
| ├──基本数据类型
| ├──typeof 和数据类型转换
| ├──运算符
| ├──流程控制语句
| ├──对象简介
| ├──基础包装类型
| ├──内置对象
| ├──数组
| ├──函数
| ├──作用域和变量提升
| ├──预编译
| ├──this 指向
| ├──call、apply 和 bind
| ├──高阶函数
| ├──闭包
| ├──对象
| ├──深浅拷贝
| ├──原型链和原型继承
| ├──类和构造继承
| ├──正则表达
| ├──事件
| └──jQuery
|──JS 之 ES6 语法
| ├──ES6 介绍和环境配置
| ├──ES5 中的严格模式
| ├──ES5 中的一些扩展
| ├──ES6：变量 let、const 和块级作用域
| ├──变量的解构赋值
| ├──箭头函数
| ├──剩余参数和扩展运算符
| ├──字符串、数据和对象的扩展
| ├──内置对象扩展：Set 数据解构
| ├──Promise 入门详解
| ├──ES7：async 函数详解
| └──ES6：Symbol
|──JS 进阶
| ├──var、let、const 的区别
| ├──数据的赋值
| ├──JS 开发累积
| ├──call、apply、bind 的区别
| ├──this
| ├──作用域与闭包
| └──创建对象和继承
|──前端基本功
| ├──CSS 基础练习
| └──DOM 操作练习
|──Ajax
| ├──服务器分类及 PHP 入门
| ├──Ajax 入门和发送 http 请求
| ├──函数封装
| ├──同源和跨域
| └──模版引擎
|──移动 Web 开发
| ├──Bootstrap 入门
| ├──Bootstrap 使用
| └──Less 详解
|──Node.js 和数据库
| ├──Node.js 介绍
| ├──Node.js 的特点
| ├──Node.js 开发环境安装
| ├──Node.js 模块化规范
| ├──Node.js 内置模块
| ├──Node.js 操作 MySQL 数据库
| ├──CommonJS
| ├──ES6
| ├──JS 模块化：AMD
| ├──JS 模块化：CMD
| ├──JS 模块化：ES6
| ├──KOA2
| ├──Node.js 代码举例
| ├──WebSocket
| └──事件驱动和非阻塞机制
|──Vue 基础
| ├──指令系统
| ├──v-on 事件修饰符
| ├──系统指令（二）
| ├──举例：列表功能
| ├──自定义过滤器
| ├──自定义按键修饰符 & 自定义指令
| ├──Vue 实例的生命周期函数
| ├──Vue 中的 Ajax 请求
| ├──Vue 动画
| ├──Vue 组件的定义和注册
| ├──Vue 组件之间的传值
| ├──Vue-router 路由
| ├──Vue.js 在开发中的常见写法累积
| ├──Vue 开发累积
| └──Vue 组件
|──React 基础
| ├──React 介绍
| ├──JSX 语法介绍
| ├──React 组件：生命周期
| ├──React 组件：常见属性和函数
| ├──React 中绑定 this 并给函数传参的方法
| ├──React 单向数据绑定
| ├──React 路由的使用
| ├──Ant Design 的基本使用
| ├──AntD 框架的踩坑记录
| ├──AntD 框架 upload 组件自定义
| └──React Native 初识
|──前端面试
| ├──面试必看
| ├──面试题累积
| └──网友面经
|──前端进阶
| ├──代码规范
| ├──常见专有名词
| ├──数组的常见操作
| ├──前端监控技术
| ├──lazyload & 防抖动和节流阀
| ├──Vue 开发累积
| └──前端的几道题目
|──前端综合
| ├──2019 Web 前端入门自学路线
| ├──前端学习分享
| ├──Express
| ├──2018 前端日记
| ├──2019 前端日记
| ├──2020 前端日记
| ├──CSS 开发总结
| ├──Ajax 相关
| ├──HTML 相关
| ├──Json 字符串的解析和遍历
| ├──Json 相关
| ├──前端博客推荐
| ├──前端开发累积
| ├──前端语录
| └──网络抓包和代理工具：Whistle
└──扩展阅读
├──2020 Web 前端最新导航
├──GitHub 项目推荐
├──网站推荐
├──前端文章推荐
├──上海有哪些互联网大厂
├──北京有哪些互联网大厂
└──深圳有哪些互联网大厂
前端成长之路之打好根基相关推荐
- 蚂蚁金服@玉伯：我的前端成长之路
作者:@玉伯 原文:https://www.yuque.com/yubo/morning/grow-up-at-alibaba 注:这是玉伯在阿里内部前端大学的一个分享,整理了一份对外的版本,希望分享 ...
- 我的前端成长之路：中医药大学毕业的业务女前端修炼之路
简介: 前端工程师的修炼没有捷径,踏踏实实的通过一个个项目的实践来升级打怪实现进阶:本文仅分享自己11年的前端生涯,探讨一直在业务中的技术人的成长之路,也复盘再认识下自己,每个节点我遇到的问题和我的选 ...
- P6跨级晋升P8，再到P10，我的11年前端成长之路
点击上方蓝色字体,选择"标星公众号" 优质文章,第一时间送达 作者 | 蚂蚁金服玉伯 编辑 | 陶家龙 孙淑娟 链接 | yuque.com/yubo/morning/gro ...
- 我的前端成长之路-写给在迷茫路上的人
前面的话 我只是突然由感而发,写这篇文章的目的,是为了给一些迷茫的人一些心灵鸡汤,让我和你走在人生的路上,也是我几年的一个自我救赎,也给关注我的粉丝一个认识我的机会,也是自我介绍别人,重新认识我的机会 ...
- 蚂蚁金服@玉伯：我是阿里P10成长之路！
点击上方"码农突围",马上关注 这里是码农充电第一站,回复"666",获取一份专属大礼包 真爱,请设置"星标"或点个"在看&quo ...
- 蚂蚁金服玉伯：P6跨级晋升P8，再到P10，我的11年阿里成长之路
" 今天跟大家分享下个人成长和带团队的一些感悟.我可能更偏向于写作型或阅读型,很少在对外分享中讲关于成长的话题.今天尝试下,希望能对大家有所帮助. 图片来自 Pexels 注:这是在阿里内部 ...
- 前端工程师的成长之路
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
- 掌握未来趋势的前端开发成长之路
前端开发成长之路 入门 1.WEB 网页基础.编程基础 HTML5+CSS3入门 课程内容: ...
- 从前端到CTO——程序员的成长之路
前言 张云龙老师于2018年5月19日在「FDCON2018中国前端开发者千人峰会」上的发言.作为走在前端工程化前列,现任全民直播CTO的张云龙老师,分享了他的个人成长之路,希望能够在前端职业规划上, ...
- 猿创征文｜前端到全栈，一名 IT 初学者的学习与成长之路
目录导读 写在前面 创作之路 ❤ 前端开发工程师知识体系 ❤ Vue&React 开发框架 ❤ 前端开发实战 ❤ Linux&云原生 小马技术栈 ❤ 主打技术专栏 ❤ 其他专栏(实用干 ...
最新文章
- 正则匹配：Email 密码强度 身份证 手机号 日期 数字每4个字空一格等
- router linux命令,router os 常用命令详解
- linux系统安装文网卫士,360主机卫士 Linux 版本 安装
- [html] html如何创建图片热区（img usemap）？
- 【转】SharePoint 2013中修改windows 活动目录(AD)域用户密码的WebPart（免费下载）
- BugkuCTF-Reverse题不好用的ce
- markdown如何设置图片大小_不会吧，还不会用markdown排版吗
- 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第3节 接口_11_接口的常量定义和使用...
- 4月1日起 理想ONE零售价由33.8万元上调至34.98万元
- java大数据组件HBase
- c语言学习进阶-C语言程序实现生成指定区间指定个数随机数
- java并发编程:设计原则与模式_java编程设计模式一——策略模式
- json 在后天怎么接_前台向后台传一个json数据，后台怎么接？
- 春运期间长江海事局开辟四类运输“绿色通道”
- 用python调用ICTCLAS50进行中文分词
- 32位电脑适合装W ndows10,32位再见？微软将停止支持32位Win10系统
- Eclipse安装中文语言包
- 阿里云企业实名认证教程
- 六安构建智慧城市节水管理平台
- win7桌面不显示我的计算机名,win7系统桌面没有显示我的电脑图标的操作技巧