零基础想学好web前端首先要有规划，了解自学前端需要学哪些知识识。那么废话不多说，web前端自学学习路径如下：
web前端学习路线
其次工欲善其事必先利其器，学习前端的过程中都要掌握哪些软件呢?常用的开发软件主要有以下几种：(大家可以关注我的专栏，后期会陆续发布详细安装教程)
1、Sublime Text(官网：https://www.sublimetext.com/)
Sublime Text是一个跨平台的代码编辑器，同时支持Windows、Linux、Mac OS X等操作系统，也是HTML的文本编辑器。
Sublime Text具有漂亮的用户界面和强大的功能，主要功能包括：拼写检查、书签、完整的 Python API 、Goto 功能、即时项目切换、多选择、多窗口等等。
2、Visual Studio Code(简称：Vscode，官网：https://code.visualstudio.com/)
Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮。
3、notepad++(官网：https://notepad-plus.en.softonic.com/)
软件小巧高效，支持27种编程语言，包括C、C++、Java、C#、XML、 HTML、 PHP、JS 等，Notepad++ 内置支持多达27种语法高亮度显示。是一款小巧而功能强大的软件。
4、editplus(官网：https://www.editplus.com/)
是一套功能强大的文字编辑器，拥有无限制的Undo/Redo(撤销)、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。除了支持HTML、 CSS、 PHP,、ASP、 Perl、C/C++、Java、JavaScript、 VBScript的代码高亮外，还内建完整的HTML和CSS指令功能。
5、WebStorm(官网：https://www.jetbrains.com/webstorm/)
WebStorm是一款Java开发工具，WebStorm具有的优势是：智能的代码补全、代码格式化、html提示、联想查询、代码重构、代码检查和快速修复、代码调试、代码结构浏览、代码折叠、包裹或者去掉外围代码。
安装好了软件，也了解了都要学什么，那么要怎么开始学习呢，这就需要学习教程啦!学习教程可以从b站、慕课网、腾讯课堂这些平台找免费的学习教程，视频教程学起来更通俗易懂。初学者不建议通过看书学习，因为书上都是一些专业性比较强的词汇，比较难以理解的。
在学习到一定程度之后，你可以再通过看书对知识进行一个巩固提升。
当然，web前端在学习的过程中离不开各种交互效果，下面我就分享几个宝藏网站，一定要收藏哟!
1、17素材网(官网：https://www.17sucai.com/)
17素材网主要收集jQuery网页特效、jQuery网页代码、网站模板、网页模板、企业模板、商城模板、图标等素材，为html网站模板开发人员提供高效率的工作方式。这个网站我在找交互效果的时候经常用，里面有很多让人惊艳的动画效果。
2、GSAP(官网：https://greensock.com/gsap/)
GSAP 可能目前最炫酷的免费动画库之一了。它运行于纯粹的 JavaScript 之上，是目前最强健的动画资源库之一。
它符合 HTML5 的规范，并且和几乎所有的现代浏览器都能良好的协同，可以SVG、画布元素甚至 jQuery 对象良好地协同，诸如 EaselJS 这样的库也可以和 GSAP 联动。
3、CSShake(官网：https://elrumordelaluz.github.io/csshake/)
CSShake可以让你的元素摇晃起来，可以是轻轻的摇晃，水平的摇晃，也可以是疯狂的摇晃……
4、Instafavicon(官网：https://instafavicon.com/)
项目要展示了，少不了一个favicon。这个网站可以帮你快速生成一个简洁美观的站点图标。
5、GitHub(官网：https://github.com/)
GitHub是世界上最大的代码托管平台,帮助开发者存储和管理其项目源代码，且能够追踪、记录并控制用户对其代码的修改，超5千万开发者正在使用。
最后，在学习过程中会遇到各种各样的问题，如果问题很久不能解决，就会打击到你学习的信心，最终导致放弃。所以你最好还是有一个经验丰富的人在前期能够带一带你，帮你解答学习过程中遇见的问题。身边没有能够帮你解答问题的人，加一些学习群或者加我聊聊，帮你解决各种问题~
多年开发经验，你可以私信我你目前的情况，我可以帮你根据你的时间制定一个学习规划，学习过程中遇见什么问题也可以随时问我。
相关推荐
-
接口主要测试什么（接口测试的内容）
总结起来就是 后台写的接口只是接口走通了，不代表逻辑也是通的 前端测试只是测试功能，接口也只是走了一部分逻辑，没有完整的验证接口的安全 接口测试不是目的，接口自动化才是最终结果 今天被打败了，竟然有人问我...
-
使用jquery实现表单验证（jquery注册表单验证）
Parsley.js Parsley.js是一个轻量级且功能丰富的库，它使用DOM中嵌入的数据属性来实现相同的功能，而不是使用Javascript验证表单。令人惊讶的易于配置的插件还使您可以覆盖几乎所有默认行为，使其符合您的表单要求。...
-
前端图片裁剪组件（html裁剪图片）
介绍 cropperjs是一款基于JavaScript的网页端图片裁剪插件，可能相对于图片预览来说，图片的裁剪使用场景貌似并不是很多，但是图片预览插件又要比裁剪插件容易找到，而且从实现难度上来说也不及图片裁剪，今天我们就...
-
前端框架目前常用的有哪些（前端基本框架有哪些详细介绍）
前端技术 前端技术在最近10年的发展非常快，5年前流行的框架可能现在已经没有多少人用了。 Jquery库 AJAX（Asynchronous Javascript And XML）这一技术概念在2005年提出，用来描述与浏览器有关的一类技术，包括: HTM...
-
Pear Admin Layui（关于Pear Admin Layui说明）
Layui 官网近期要关闭了，但 Layui 还在维护，为了致敬永远的神，推荐一个基于 Layui 开发的 admin ，代码量少、学习简单、功能强大、轻量级、易扩展，轻松开发从现在开始。 关于 Pear Admin Layui Pear Admin Layui...
-
web前端简历怎样写（web前端开发简历这样写拿高薪）
最近正值“金三银四”春招旺季，但是很多正在找工作的Web前端工作者却纷纷抱怨自己工作难找，简历海投了非常多，收到回复的却很少很少，其实当你海投的简历收不到回复时，那么你的简历一定出现问题了，那么是什么问题...