有前端的大佬吗？我想自学该怎么开始。各位大佬指点一下好吗？
看楼主的问题应该是刚打算开始学前端吧，不知道你现在资料这准备怎么样了，我送你一份我上次看的资料（短链接如果失效的话，单独找我要）
链接:https://pan.baidu.com/s/1KdYGkrweQxPHht47yyyN2Q
提取码:y3qd
前端相比较后端而言是简单的，不过要说它简单，单js这部分就会让很多人头大，前端的难点有：
js，它是三大基础最难的，这部分学的概念太多，记不住，像基本语法，内置对象、DOM、闭包、函数库等等，自学的话没人指点还真挺困难的
vue，是目前比较流行的前端框架，这部分的数据驱动，状态管理，还有工程量大无从下手是难点
node.js，它能使前端不再局限于客户端，还可以用来做伺服器端，要求一定要有js基础，懂资料库处理，是不是听起来就不简单
回归正题，那要怎么开始学习呢，给以下几点建议
1.做好时间规划，一定要每天规定自己能学多长时间，一般建议纯自学，每天要保证4-5小时的学习时间，才不会影响整体进度。
2.做学习计划表，三大基础多长时间学完，框架多长时间学完，什么时间做一个项目，这点很重要，很多人就是佛系学习，到最后学了三四个月，发现css还没学完。
3.别总想著学会之后会怎样，先设定小目标，脚踏实地的去实现，每一个小目标实现之后，你会发现离offer越来越近了。
4.尽可能找个组织，自学先不说自律不自律的问题，就出现一个超低级的bug，思维陷进去可能就够你琢磨一小天，找个组织，把问题抛出去，别人一句话可能就点醒你了。
5.多啰嗦一点也就是多敲代码，一名优秀的工程师就是在敲代码中成长起来的，每天都要敲，切记只看视频，不动手。
最后不管你是本专业的伙伴还是想转行的伙伴 ，只要你下定决心要学习前端，想要在前端中给自己谋求一份发展，我都欢迎你加入我的前端自学团，我还会组织一些实战项目，到时候会严格要求大家做项目 ~
先来看 github 上一大神制作的路线图：
Learn to become a modern frontend developer?roadmap.sh
核心技能
第一步就是把前端的核心装备拿下，它们分别是 html, css 和 JavaScript。前端的初衷是开发网页来让其他人看的，可以向全世界分享信息，直到最近几年才诞生了利用这些核心知识去开发移动 APP、小程序等多终端前端应用的工具，学好核心是前端工程师必备的素养。下边就是核心技能的简介：
HTML
HTML 是用来编写网页代码结构的，它有一系列的标签用于显示不同的页面元素，比如用 & 显示一个超链接，& 显示一张图片，就跟写一个 word 文档一样，只是单纯用 html 只能写内容，不能进行排版和美化样式，如果让网页变得漂亮，需要 CSS。
学习 HTML ：指南与教程
书籍：Web 开发经典丛书：HTML CSS 设计与构建网站
CSS
CSS 是用来美化 HTML 编写的页面的，通过一些语法选择特定的 html 标签，然后用一些属性来给它们添加样式，比如文字颜色，背景，位置，边距，定位等等，还可以添加动画效果让页面显示的栩栩如生~。重点要掌握 CSS 的盒子模型、常用的布局方式，比如 flex、grid 等。
CSS - 设计 web
书籍：CSS 权威指南（第四版）（上下册）
JavaScript
在写完 html、css 之后，咱们就可以写漂亮的页面了，那么接下来就是需要学习 JavaScript，让网页能和人进行互动，比如点击按钮弹出个对话框，处理用户输入的表单信息，添加一些复杂的动画，使用 ajax 载入远程数据等等。它可以直接操作 HTML 元素，给网页开发提供了无限可能~这里咱们一定要把 JavaScript 基础语法掌握扎实，可以观看我 B 站上的 JavaScript 视频：
JavaScript 基础教程 | 2020 年最新
JavaScript — 用户端动态脚本
书籍：JavaScript 权威指南（第 6 版）
书籍：Eloquent JavaScript 3rd edition (包括 HTTP)
网路基础
现在咱们可以做成型的网站了，那咱们该如何让全世界的人看到咱们的杰作呢？那这里网路基础就派上用场了，不需要精通，只需要掌握几个基本概念就好了。
域名
访问网站咱们都知道需要使用 url (网址)，比如 www.baidu.com，这个 baidu.com 就是域名，域名可以从域名提供商购买，比如阿里云。在购买域名之后要通过 DNS 解析服务把它对应到一台伺服器的 IP 地址上。
什么是域名？
伺服器
伺服器就是一台安装了伺服器程序的电脑。用户用域名访问一个网站时，会有 DNS 解析服务把域名解析成 IP，再通过 IP 找到相应的伺服器，伺服器程序就把网站内容传递给用户的浏览器。咱们的网站就部署在伺服器上，它也是从提供商处购买
Linux
伺服器的操作系统一般是 linux，它可以没有用户界面，可以节省很多 CPU 和内存资源，这样就要求咱们掌握一些常用命令，比如创建文件，切换目录，复制和移动文件，显示文件列表等。另外访问伺服器常用的工具是 SSH 和 FTP，咱们需要通过这几个工具来从自己的电脑连接到远程的伺服器，然后安装伺服器程序和上传网站程序。
书籍：鸟哥的 Linux 私房菜 基础学习篇(第 4 版)
伺服器程序
常用的伺服器程序有 apache、nginx，它们都是基于 HTTP 协议的，有了伺服器程序，网站文件比如 html 页面才能发送到用户的浏览器上。
Nginx 中文文档
apache 中文文档
HTTP 协议
协议好比如说医生开药方，写的龙飞凤舞，但是药房药师居然都看得懂~这个可以说他们都有固定套路来理解对方~那么在计算机领域，协议就是电脑之间用来交换数据的规则。HTTP 协议是用来在网路上交换和传输数据的，比如说咱们的网站 html、css 和 js 就是通过这个 http 协议来发送到浏览器的。
HTTP 概述
进阶技能
上边核心技能都掌握了的话，你就已经超过一半的前端工程师了，接下来就是成长为更高级一些的前端工程师，这里的目的是除了理解一些高级的概念之外，还要提高开发效率，也就是用到所谓的框架。
响应式布局
现在手机和平板差不多要比电脑都流行了，所以一个网站要适应不同尺寸的屏幕，有这种特性的网站就叫做响应式网站。实现响应式主要就是通过 css 的 media query 针对不同的屏幕宽度，编写不同的 CSS 样式。
响应式 Web 设计
兼容性调整
网站需要在不同的操作系统和浏览器下都要保持一致。对于 CSS，可以使用 css hack 来对不同的浏览器载入不同的样式。 对于 JavaScript，则可以使用 Babel 等转化工具，把新的 JS 语法转换成旧的，或者使用 polyfill 加上浏览器不支持的语法。
跨浏览器测试介绍
UI 框架
UI 框架提供了页面的基本 UI 样式和布局系统，比如按钮、对话框、轮播图，省了自己去开发，常用的有 Boostrap, Semantic UI， Tailwind CSS。
Bootstrap
Semantic UI
Tailwind CSS
SEO
SEO 全称是 Search Engine Optimization，搜索引擎优化。咱们常见的百度、谷歌这些搜索引擎会定期爬取线上的网站内容，然后进行收录，网站内容质量优秀、结构良好、访问量大的还会排名比较靠前。为了给自己的网站增加曝光量，这就需要针对搜索引擎给咱们的网站添加一些内容，比如关键字。
如何带著 SEO 的思维将 MDN 的 Web 文档写的更符合搜索引擎展现
SEO 基础知识教程
Node.js、npm / yarn
因为 Node.js 的出现，JavaScript 的开发可以脱离浏览器了，这样就产生了好多借助 Node.js 来写前端代码的方式，然后用相应的打包工具去打包成浏览器可用的代码。这样的好处是，咱们可以充分利用 node.js 的包管理工具来方便开发，比如使用 npm 或者 yarn 管理项目的依赖。
Node.js
npm
yarn
书籍：Node.js 实战 第 2 版
CSS 预编译
咱们在写 CSS 的时候可能一段代码要重复好多次，写一连串的选择器，重复的属性组合等等。这时 CSS 预编译工具就派上用场了，比如 SASS、LESS，它们支持 CSS 选择器嵌套、定义变数、Mixins、函数、继承等等。
SASS
LESS
自动化工具
自动化工具有 grunt、gulp 等，可以监控文件变动，或者做一些自动化操作，比如编译 SASS 或 LESS 的代码为 CSS 等。
gulp
grunt
React, Vue, Angular
这里就不得不提当下十分热门的前端开发框架了，React、Vue、Angular 三大件。它们都提供组件化开发的方式，这就让前端开发模式发生了巨大的变化，以往以页面为核心现在转为了以组件为核心，有了这些组件可以方便的在不页面进行复用。另外基于状态的数据管理，也让改变组件状态变得十分简单。这三个框架可以都学，但是工作中基本上只会用到一个，深入一个就可以了。至于它们的 UI 框架也可以根据工作的需要去学习比如 ant design、element UI 等。
React
Vue
Angular
Ant Design
Element UI
模块化 CSS
因为 React 等组件化工程的出现，CSS 分散在不同的组件中，很容易因为命名冲突而导致样式被覆盖，模块化的 CSS 开发方式通过使用 css modules， 或者 styled-components (css-in-js 方式) 工具能很好的避免这些问题，它们也提供了其它类似 SASS/LESS 的功能。
CSS Modules
styled-components
工程化工具
所谓工程化的工具，也就是打包工具，前端项目的各种 JS、SASS 源代码可能分散的不同的地方，利用打包工具，比如 webpack、parcel，可以把它们打包成一个单一的 js 和 css 文件，它们支持按需打包，用到的代码才会打包到最终产品上，没用到的则不会。另外图片等静态资源也可以指定规则进行打包。
webpack
parcel
测试工具
没有人想要不健壮的代码，在改动一个地方之后引起全局崩塌~，咱们写好的组件需要进行详尽的测试才能确保不出问题，另外也方便咱们工程师节省时间，因为只要添加的新功能保证测试结果还是正常，那么就不需要再人工去测试了。常用的 UI 测试工具有 jest, enzyme 等等。
Jest
Enzyme
Puppeteer
高级技能
在把编写网页的技能掌握熟练以后，就要从多端开始拓展自己的技能了，另外还要深入已经掌握的技能。
TypeScript
TypeScript 是微软编写的一款带类型的 JavaScript 语言，它的代码可以编译成普通的 JavaScript，但是编写的时候支持强类型，并且支持完全面向对象的形式。它的好处在于带有了类型之后，代码更容易维护，适合大型项目的开发。
TypeScript
移动开发
移动开发包括移动的页面 H5 开发、小程序和移动 APP 开发，好在这些有统一的开发平台，使用 React 或者 Vue 就可以进行一次开发，多平台使用。React 生态的有开发移动 APP 的 React Native，开发多端平台的 taro。 Vue 有多端开发的 uni-app。
React Native
Taro
Uni-App
桌面开发
桌面应用到现在还是有用武之地的，比如音乐软体，聊天软体，写作软体等等，这些也可以用前端技术开发，具体的工具有 eletron、proton native 等等。
Electron
Proton Native
静态网站生成工具
静态网站因为是纯 html、css 和 JavaScript 网站，所以拥有最快的速度、对 SEO 搜索引擎优化友好，最适合用于数据不常变动的展示、博客类的网站的搭建，常用的工具有 hexo, gatsby, docusaurus 等。
Hexo
Gatsby
Docusaurus
SSR（服务端渲染）
如果使用 React、Vue 等前端框架开发网站，那么最终的页面源代码是没有 html 的，因为它们是用 JavaScript 去动态生成 html 代码，这样对 SEO 很不利，不过有了 serer side rendering，服务端渲染技术，就可以解决这个问题，它是把 JavaScript 生成好 HTML 之后，再把页面发送给浏览器。常用的有 react 系的 next.js，vue 系的 nuxt.js。
Next.js
Nuxt.js
GraphQL
GraphQL 是一种查询语言，跟普通的 restful 结构不一样，它是按照类型来组织数据的，不同的类型之间也会有对应关系，就像数据一样，前端开发者根据自己的需要编写 graphql 语句来按需查询想要的数据，它的这种模式非常适合 React 这种项目结构的开发。
GraphQL
Apollo
Relay
性能优化
性能优化的概念比较广泛，而且根据应用的用户量、用户类别而不同。总体来说就是提高页面首次载入的时间、动画执行的效率、事件响应的效率。这些可以通过优化代码结构、文件大小、DNS 缓存、lazy loading 等来实现。
Web 性能
书籍：Web 性能权威指南
安全
安全也是一个宽泛的概念，要了解 CORS（跨域资源共享）, XSS（跨站脚本攻击）, CSRF（跨站请求伪造） 等常见安全问题，也要了解 HTTPS 等安全协议，要尽量以周全的形式考虑，不要相信任何用户的输入，严格检查需要接收用户输入的地方。
Web 安全
书籍：Web 安全测试
工作与团队技能
工作与团队技能是在工作中所必备的，无论是初级还是高级前端工程师，这些只要在工作遇到了，就都需要掌握。
Git
Git 是一个分散式的代码协作工具，几乎所有的公司都在用。Github 是 git 的一个远程仓库，咱们可以把代码发布到 github 上，既可以作为公开的向全世界展示自己的代码、进行合作，也可以作为私有的只限自己或者公司内部使用。
Git
Github
书籍：精通 Git 第 2 版
Docker
Docker 是一种新的虚拟化技术，介于虚拟机和操作系统之间，它所用的资源少，并且能自动化管理镜像的运行环境和集群。因为前后端开发的分离的方式，大型的前端应用也会部署到 Docker 上。
Docker
CI
CI，持续集成，是一个自动化的部署过程，开发人员只需要改动代码，提交到 git 仓库，CI 系统会抓取代码进行打包部署并发布，节省了人工运维的时间。
Jenkins
ESLint 和 Prettier
代码合作经常会有风格和规范不统一的情况。ESLint 除了可以检查语法错误外，还可以定义开发规范，比如缩进字元的数量、命名方式等，而 prettier 则可以根据一些规范自动格式化代码。
EsLint
最新技术
下面是一些未来很有可能会火的新技术，提前了解一下。
WebAssembly
Web Assembly 是浏览器新支持的编程语言，用于辅助 JavaScript。确切的说，它不是一个编程语言，咱们可以用它的编译器编译其它语言，用来编写更强大的功能，它目前支持 c++和 rust
Web Assembly
Web Components
Web Components 是类似 React、Vue 开发的方式，但是是 JS 原生支持的方式，不再需要依赖额外的库。它的核心概念有 Custom elements（自定义元素），Shadow DOM（影子 DOM），HTML templates（HTML 模板）。
Web Components
最佳实践
在前端开发过程中有一些最佳实践需要了解，比如 JavaScript 的设计模式、组件设计原则、代码结构等。
JavaScript 设计模式
持续进步
在掌握了上边所有技能之后~咱们等级就算满级了，现在就是真正的开始了，要不断精进自己的技能。前端技术的发展相比其它技术要快的多，咱们要时常关注一些前端新闻还有业界大佬的博客或微博，自己主动去搜索一些新的前端库或者设计模式，然后应用到工作中去，这样才不至于落后。另外，因为好多技术都是外国人写的，所以要想得到第一手且最准确的消息，一定要把英语学好。一些包和工具的官方文档就算是靠著翻译也要把它们看懂，相信我，过不了几天，你会发现需要查的词越来越少，阅读速度也越来越快。
视频版：
2020年最新前端学习路线_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili?b23.tv
话不多说，直奔主题
自学前端
1、找一套学习前端开发的视频教程和文档；最好是最新版的。
Web前端开发HTML/CSS/JavaScript/H5/react_Vuejs教程_web前端开发必会的技能_从入门到精通__前端WEB202002期_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili?www.bilibili.com
对应的视频文档：
下载链接： https://pan.baidu.com/s/1OlqeBw4K06sVad6yxW2fwA
提取码: kvnp
2、整理好学习路线。
尚学堂前端学院：前端学习路线图?zhuanlan.zhihu.com
3、整理一套学习计划。
比如：每天坚持学习几个小时、每天要学会几个知识点、打算多久可以学完等等。
以下几个回答希望对你学习前端开发有一定的帮助：
- 27岁自学前端可以找到好的工作吗？
- web前端想拿10K需要会哪些技能？
- 没基础的怎么学习编程才能具备编程能力?
- 零基础想学程序员一开始有什么推荐看的书和需要注意的吗？
- 自学web前端 如何坚持？
- 那些已经工作的程序员，如果学习新的技术或者编程语言，他们是看书自学的还是看视频？
评论区欢迎补充！
（ps:如果您觉得有用，请点赞转发，让更多人看到哦）
发布于 2020-09-14继续浏览内容
知乎发现更大的世界打开
Chrome继续
IT锅炉野野IT培训套路深，IT学生网求真。前端开发并没有什么很艰深难学的东西，想要自学也完全没有问题，开始是非常容易的，就是html5，css3呗。互联网上的相关学习资料和教程，一搜一大把，虽然我那时候自学只能看书，不过我知道现在入门的和基础的视频课都可以直接免费在线看，有什么不好开始的呢？如果你想看书的话，我可以给你推荐这一本：
学完这个接下来你就开始学 JavaScript typescript就可以了，你可以去看那个JavaScript权威指南那本书。然后把vue和react两个框架学到位就可以去找前端的工作了。
我是 @IT锅炉野野 ，一直想要提前退休的老猿，记得点赞，喜欢收藏加关注。
前端开发并没有什么很艰深难学的东西，想要自学也完全没有问题，开始是非常容易的，就是html5，css3呗。互联网上的相关学习资料和教程，一搜一大把，虽然我那时候自学只能看书，不过我知道现在入门的和基础的视频课都可以直接免费在线看，有什么不好开始的呢？如果你想看书的话，我可以给你推荐这一本：
学完这个接下来你就开始学 JavaScript typescript就可以了，你可以去看那个JavaScript权威指南那本书。然后把vue和react两个框架学到位就可以去找前端的工作了。
我是 @IT锅炉野野 ，一直想要提前退休的老猿，记得点赞，喜欢收藏加关注。
可以看一下这个：
如何系统的自学前端??www.zhihu.com
怎么样才能快速的学好前端？?www.zhihu.com
推荐阅读：
