零基础开始学 Web 前端开发，有什么建议吗？

拼搏现实的明天。 2022-11-15 14:04 187阅读 0赞

零基础学前端，学习之前，一定要问自己一个问题：

我适合学前端吗？

前端虽然相比较后端而言，没有那么难，但是对很多零基础的小白而言还是有点难度的。

所以我们会发现，一些同学刚开始对前端一无所知，然后盲目开始学习，花了钱，花了时间，最后学不会，找不到工作，一无所成。为了避免此类悲剧发生，这里请你先看看什么样的人适合学习前端。

一、什么样的人适合学Web前端？

Web前端开发因为脱离了书本，不需要你用笔写字，而是需要你会在电脑上操作，所以Web前端开发跟传统的行业不一样。企业去招Web前端开发工程师，是希望他可以胜任这一份工作，所以门槛还是有的，对学历和电脑操作这块这些方面都是有一定的要求的。

1、学历条件

一般而言学习前端最好学历在大专及以上，这样是方便你未来好找工作。但有的同学学历不高，比如高中学历，想学Web前端，可以学吗？当然可以，但是你要给自己建立充足的心理准备，要么努力学，要么就等着找不到工作这样的结局。

学历从来不是学习的门槛，只是就业的门槛。任何学历你都可以学习前端，没有基础也可以学习前端，毕竟没有人生下来就会写代码，大家都是从零学起。如果你没有学历，那么就努力用能力证明自己，如果既没有学历，又没有能力，只能劝你放弃。

2、兴趣条件

学习编程都是要吃苦的，就算前端简单，它也是编程。尤其对于零基础而言，肯定会遇到困难，但是你要对前端保持学习的兴趣，才能坚持下去。

有的人说，我对前端兴趣一般，我就看重它挣钱才想学的。没问题，那请你保持对钱的热情，为了你能挣更多的钱，也请把前端坚持学习下去。

3、需要数学和英语基础吗？

不一定。很多同学有这样的误解：英语不好不能学开发，数学不好不能学开发。

这种想法不一定对。

学习编程是需要一定逻辑思维能力，但不一定需要你的数学成绩很好。

编程的常用指令也就几十个单词，你花一周的时间去背记、练习使用，用不了多久也都熟能生巧，所以学习编程也不一定要你英语成绩很好。

如果看完以上你觉得自己可以学Web前端，还有兴趣学习Web前端，那就继续往下看。

> 我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流3000人裙：前面：851 中间：231 最后：348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

**二、Web前端需要学习哪些内容？**

这篇文章讲的十分详细，按照以下顺序学习即可：

1.HTML5+CSS3  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
**PC端网站布局：**

了解常用浏览器和浏览器内核;

了解语义化的概念;

掌握HTML5语法及使用技巧;

掌握HTML5常用标签。

掌握CSS语法及使用技巧;

掌握DIV+CSS布局方式;

掌握常见网页布局模式。

掌握Photoshop切图以及播件切图;

能够熟练使用开发人员工具进行页面调试

能够根据PSD文件独立完成静态页面的开发工作。

**WebApp页面布局：**

掌握HTML5新布局标签、多媒体标签;

掌握CSS32D.3D变换、动画效果;

能够使用CSS3新属性美化修饰网页;

了解移动端屏幕、移动端浏览器、操作系统的不同。

掌握常用移动端调试方法;

掌握常用移动端适配方法;

掌握CSS预处理器less的使用;

掌握常用移动端框架使用方法;

掌握常见移动端页面开发;

掌握响应式布局开发;

掌握Bootstrap开发响应式页面;

掌握适配不同终端的网页开发技术选型。

阶段学习成果检测，完成PC端商城页面布局，完成移动端页面布局

**2.JS交互设计**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]  
JavaScript基础-进阶-高级：

能够掌握JavaScript基本语法;

掌握常见JavaScript算法;

掌握DOM的各种操作;

熟练使用面向对象思想进行DOM编程;

掌握JavaScript的高级语法;

掌握JavaScript常见兼容性方案。

独立完成视频网站的页面搭建(包括HTML结构、CSS样式、 JavaScript 特效);

掌握应对业务编程的能力;

掌握团队合作开发流程。

**JQuery**

熟练使用jQuery操作DOM ;

熟练使用和编写jQuery案例。

阶段学习成果检测，完成视频类目网站布局、交互、封装、性能优化等等

**3.Node开发**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]  
**ECMAScript6**

了解ES6和JS的关系;

掌握ES6的基础用法和兼容性;

熟练掌握ES6的核心语法;

熟练使用ES6实现前端模块化开发。

WebPack模块打包器

熟练使用Webpack模块打包器;

熟练掌握前端自动化工具;

Node基础、Express框架、前端模块化、MongoDB

能够建立客户端服务器交互模型，

熟悉网络通信相关概念;

能够使用Nodejs进行Web服务端开发;

能够掌握JavaScript异步编程模型;

能够掌握JavaScript模块化编程方式;

能够使用Nodejs操作MongoDB数据库;

能够理解HTTP协议;

能够独立开发基于后台接口的动态网站、Ajax 数据交互的项目;

能够独立完成企业网站从前台到后台的基本开发工作。

阶段学习成果检测，完成即时聊天系统

**4.前端框架**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]  
**数据可视化、Vue、React**

能够掌握JavaScript基本语法;

掌握常见JavaScript算法;

掌握DOM的各种操作;

熟练使用面向对象思想进行DOM编程;

掌握JavaScript的高级语法;

掌握JavaScript常见兼容性方案。

**Angular**

掌握Angular常用的指令

掌握如何定义和使用模块与组件

掌握路由的配置

阶段学习成果检测，完成商城后台管理系统、电商网站注册登录、订单管理、条件筛选等等功能

**5.小程序与APP开发**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]  
**微信小程序开发**

能够掌握小程序的开发基础;

能够独立开发小程序项目;

能够掌握Canvas的使用;

能够掌握小程序的部署与发布;

能够掌握小程序开发框架mpwue的使用;

掌握第三方AI平台的使用。

**微信小游戏开发**

能够掌握小游戏开发基础;

能够独立开发小游戏项目;

能够掌握小游戏的部署与发布;

掌握第三方AI平台的使用。

**React Native**

能够独立使用React Native开发原生APP ;

阶段学习成果检测，完成微信小程序开发、微信小游戏开发、原生APP开发

**三、Web前端入门学习书籍推荐**

对于零基础学习其实最好的学习方式还是看视频课程或者参加面授的培训更高效。

书可以作为辅助培训学习的学习资料，因为这些书专业性较强，而且书与书之间没有关联，你学习的内容凌乱不系统，越看越懵，最后把自己还绕晕了，以为前端太难，然后放弃学习。

**1、《网站重构：应用Web标准进行设计》**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 5]  
《网站重构：应用Web标准进行设计》是对网站原有艺术结构的检查和挑战，被称为Web设计史上的罗塞塔碑。原本该书是为了希望自己网站成本变得更低，运行得更好，访问者更多的网页设计师、开发者、网站所有者及管理者所写，但因书中着重分析了目前网站建设中存在的一些问题，以及“Web标准”思想的产生、发展和推广，并从技术细节上讲解了网站实际制作和开发的过程中如何向Web标准过渡，如何采用和符合Web标准，成为初学者必看书籍。小白用户阅读该书可以熟悉Web标准思想，改变思想后才能更好地从事前端开发工作。

2、《JavaScript高级程序设计》  
![在这里插入图片描述][20210401165743819.png]  
《JavaScript高级程序设计》被誉为JavaScript技术名著，html+css+javascript教程精粹，html 实战实例，以口碑好、逻辑强、内容棒被称为JavaScript入门进阶一本通。本书分为九大板块分别对“对JavaScript实现各个组成部分的详尽解读、对JavaScript面向对象编程的全方位阐述、对DOM、BOM及浏览器事件模型的透彻剖析、Web应用基本数据格式JSON、XML及其存取、Ajax、Comet服务器端通信和基于File API的拖放式文件上传、HTML5涵盖的表单、媒体、Canvas（包括WebGL）、离线应用级客户端存储（包括IndexedDB）、新兴API及ECMAScript Harmony展望”等知识进行讲解。第三版继承之前版本全面深入详尽、贴近实战的优点，系统讲述JavaScript语言核心内容后，条理清晰的为读者展示现有规范及实现为开发Web应用提供的各种支持，《JavaScript高级程序设计》被一些技术培训机构选入作为教材，适合有一定编程经验的web前端开发者阅读，小白阅读稍有吃力，但对日后学习工作有益，可入手一本。

**3《JavaScript设计模式》**  
![在这里插入图片描述][20210401165808277.png]  
《JavaScript设计模式》全面讲解web前端设计模式，书中涵盖针对JavaScript的36个设计模式，深入剖析面向对象的设计原则及代码重构，帮助读者快速融入开发项目中，提高开发效率。本书借助职场主人公“小铭”实战历练，讲述他由菜鸟蜕变到高级开发的故事，在故事讲解中介绍各种设计模式、应用方法及实践，更易引人入胜。值得提及的是《JavaScript设计模式》除了基础知识讲解外，还介绍了几种适配器、代理模式、装饰者模式和MVC模式，讨论如何实现对数据、视图、控制器的分离。本书几乎包含了关于JavaScript设计模式的全部知识，可以说是进行JavaScript高效编程的必备学习手册，适合JavaScript初学者、前端设计者、JavaScript程序员学习。

**4、《CSS权威指南》**  
![在这里插入图片描述][20210401165825763.png]  
国际公认的HTML、CSS和Web标准领域的专家Eric A. Meyer力作！初学者如果对复杂页面形式、改进可访问性、节省时间感兴趣一定不能错过《CSS权威指南》，本书涵盖选择符、特制度、层叠，值、单位、字体、文本属性，内边距、边框、轮廓、外边距，颜色、背景、渐变，浮动、定位，弹性盒布局，全新栅格布局系统、2D和3D变形、过渡、动画，滤镜、混合、裁剪、遮罩，媒体查询和特性查询等内容。作者通过案例详细讲解知识点，同时展示如何遵循css最新规范将层叠样式表应用于实践。CSS作为不断发展的语言，主要用于描述Web内容在屏幕、屏幕阅读器、打印机、语音合成器、聊天窗口中的表现，如果你期望成为Web前端开发，这本书不容错过。

**6《JavaScript权威指南》**  
![在这里插入图片描述][20210401165850455.png]  
本书是程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册，第六版增添HTML5、ECMAScript5知识点及Web开发实战内容。新增章节包括jQuery、服务器端JavaScript、图形编程以及JavaScript式的面向对象等知识点。本书虽适合有编程经验的人阅读，但初学者尤其是想让自己对JavaScript语言和Web平台的理解和掌握再上一个台阶者，本书最适合不过。

**7《HTML5秘籍》**  
![在这里插入图片描述][20210401165906716.png]  
本书共分四部分，第一部分介绍HTML5发展历程，利用HTML5重新构造网页，以及HTML5的语义元素；第二部分介绍HTML5对传统Web表单的翻新、HTML5中的音频与视频、Canvas绘图技术、CSS3；第三部分介绍数据存储、离线应用、与Web服务器通信及HTML5与JavaScript技术的强大结合等内容；第四部分为附录，简单介绍CSS和JavaScript。全书不仅通俗易懂的讲解了HTML5技术，同时介绍了实用的离线应用、地理位置，服务端通信，既适合新手学习，也能帮助web 从业者解决工作中遇到的难题。

新手不推荐多，你能先把第一本看完就不错了。

想要自学的可以先试试看看书，看书看不下去看不懂就还是考虑培训吧。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: /images/20221022/19351583ad1045c08913bed5692a2772.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]: /images/20221022/9516f213a9f34a0186bf64c3cfe5f234.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]: /images/20221022/98c9440d379b42f5b83509bbfffb86f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]: /images/20221022/b6f0d921297b4996a3e79ec39d7efc25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]: /images/20221022/0e2e789dfef14e8b8ea94eb5b1fa0205.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 5]: /images/20221022/fc2f52a3f34e4e138c46164f655c5a6f.png
[20210401165743819.png]: /images/20221022/eff47c07cf25473eb65545902f01d6eb.png
[20210401165808277.png]: /images/20221022/59f3f985844449aebfe5f186f3558557.png
[20210401165825763.png]: /images/20221022/c07fa6d9c55647609c10c0d71416c4b3.png
[20210401165850455.png]: /images/20221022/848696f528b649e8b214fcc184f2f8fa.png
[20210401165906716.png]: /images/20221022/324690cfa1b543fea641af6426290f94.png