web前端开发初级—Web前端开发初级证书 收藏 0

最详细，快速入门Web前端开发的正确姿势

入门标准

入门标准很简单，就一条：达到能参与 Web 前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的，但要能参与实际项目开发，肯定还要掌握其他一些主流的框架体系。

几年前， jQuery + Bootstrap 可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着 Angular、React、Vue 等框架的兴起，变成了百家争鸣的局面。这几年，Web 前端的技术发展真是太快了，相应地，技术栈也就变得非常多，除了最基本的 HTML/CSS/JavaScript，以及 Vue/React/Angular 等这些 JavaScript 框架和各自的生态体系，还有 CSS 预处理器 Sass/Less/Stylus，还有 TypeScript，还有 grunt/webpack/gulp 等各种打包构建工具，还有其他一大堆技术栈。

这么多技术栈，我们不可能全都掌握，就算是资深的前端工程师，也只是精通其中一部分，比如，有些精通 Angular，有些掌握 React，有些则熟悉 Vue，很少有人对三种框架生态体系都非常了解。因此，我们入门也没必要每种框架都学习，只要挑选一种就够了。而且，作为全栈，我们学习一门技术更重要的是要学习技术背后的编程思想、设计思想、架构思想等。而不管是 Angular、React 还是 Vuew，其背后的核心设计思想都是组件化的设计，因此只要掌握一种框架，我们也就能学习到前端技术的核心思想了。

那么，我们应该学哪种框架体系呢？我的建议是从 Vue 开始，因为 Vue 的学习成本是最低的，入门简单，而且这两年 Vue 可以说是出现了爆发式的增长，已经直逼 React。React 的主要学习成本在于要掌握 JSX 语法，而且文档还大多都是英文。Vue 因为是国人开发和维护的，自然对国内的开发者更友好。Angular 则是个大而全的框架，显得太重，学习成本自然最高。至于 jQuery + Bootstrap 这套，已经过时了，建议没必要去学习了，毕竟我们的时间很宝贵，还有一大堆更有价值的东西等着我们去学。

因此，我们要入门 Web 前端开发的话，除了要学习 HTML/CSS/JavaScript 三大基础技术栈，还要了解 Vue 体系。而 Vue 体系，除了 Vue 框架本身，还包括其他技术栈，这个后面再说。

HTML/CSS/JavaScript

HTML、CSS、JavaScript 是前端的核心基础，所以必须要掌握。HTML 主要就是 HTML5，相比之前的版本，新增了很多新特性。CSS 则主要是 CSS3 了，相比以前的版本，主要就是作了模块化的拆分。JavaScript 其实分为三部分：ECMAScript、DOM 和 BOM。ECMAScript 简称 ES，是 JavaScript 的核心，目前最新版本已经是 ES2017，是 ES6 的第三个小版本。DOM 是文档对象模型，其实就是一套访问和操作 HTML 所有元素的 API。BOM 则是浏览器对象模型，用于访问和操作浏览器的一些特性。

HTML/CSS/JavaScript 的学习资源比较多，我推荐几个。首先是 w3school 的系列教程：

HTML：该教程也包括了 HTML5 新增的内容，但讲得没下面专门讲解 HTML5 的细，所以该教程我建议只看 HTML 基础教程和表单部分即可

HTML5：该教程讲解了 HTML5 的新特性

CSS：该教程并不包括 CSS3 新增的特性，所以还需要学习下面的 CSS3 的教程

CSS3：该教程内容比较少，只包含 CSS3 新增的特性

JavaScript：该教程只是讲解了非常基础的语法

不过，我更推荐菜鸟的教程，内容虽然也是来自 w3school，但部分内容比 w3school 的更详细，以下是教程地址：

HTML：www.runoob.com/html/html-t…

CSS：www.runoob.com/css/css-tut…

JavaScript：www.runoob.com/js/js-tutor…

HTML 和 CSS 只要根据以上教程学习就足够了，但 JavaScript 则是不够的，以上教程缺少了 ES6 及更高版本的内容，后面我再推荐其他学习资源进行补充。

书籍方面，HTML 和 CSS 基础方面的，首推《Head First HTML与CSS》，编排设计通俗易懂，就连完全零基础的非 IT 人员都适合学习。不过，Head First 这本书没有涉及到 HTML5 和 CSS3 的更新内容。不过，Head First 有另一本书讲解了 HTML5，叫《Head First HTML5 Programming》，不过，要熟悉 HTML5 的用法，还是要先掌握一点 JavaScript 基础。CSS3 方面 Head First 则没有相应的书籍，因此，我推荐另一本《CSS3实用指南》。

JavaScript 方面，我首推《JavaScript高级程序设计》这本书，书中内容由浅入深，也是写得通俗易懂，适合入门。另外，有些人会推荐《JavaScript权威指南》，但这本书主要还是一本字典书，略显晦涩，其实不适合入门。不过《JavaScript高级程序设计》还是基于 ES5 的，为了补充 ES6 的内容，推荐阮一峰的《ES6标准入门》，目前是第3版，内容已经覆盖了最新版本的 ES2017。另外，因为这是一本开源教材，所以也可以直接去阮一峰的官网免费阅读，以下是链接地址：

ECMAScript 6 入门：es6.ruanyifeng.com/

另外，有一套系列书叫《You Don\’t Know JS》也要推荐给大家，也是开源教材，这套书会让你对 JavaScript 知其然也知其所以然，也包含了 ES6 的内容，不过这套书面向初学者的，只适合用来进阶。也出版了中文翻译的书籍，叫《你不知道的JavaScript》，目前只有上卷和中卷两本，据评价，上卷的翻译还不错，但中卷的翻译则一般般，下卷不知道什么时候才出版。以下是系列书的github地址：

You Don\’t Know JS：github.com/getify/You-…

那么，这么多学习资源，我们应该如何学习才高效呢？其实，我们主要还是为了了解各种核心概念，我们不可能在短期内熟悉所有知识点，因此，我还是和前面的文章一样，也罗列出一些核心的知识点吧。

HTML基础：以 w3school 或菜鸟的 HTML 教程为主，熟悉各种常用标签的用法，尤其是标题、段落、链接、图像、表格、列表、表单、区块、布局、CSS、脚本等

CSS基础：同样以 w3school 或菜鸟的 CSS 教程为主，熟悉 CSS 语法和选择器、样式、框模型、定位等模块的内容

JavaScript基础：首先作为一门编程语言，语言本身的基础肯定要熟悉，包括数据类型、变量、运算符、控制流、函数、对象等；另外，也要熟悉 DOM；BOM 简单了解下就可以了，使用场景不多

HTML5：HTML5 的新特性肯定要了解，内容其实也不是很多，核心的就是 canvas、svg、对多媒体的支持、Web 存储、应用缓存、WebSocket等

CSS3：CSS3 也是要熟悉那些新特性，最核心的就是弹性盒子

ES6：ES6 自然也是要熟悉的，学好阮一峰的《ECMAScript 6 入门》教程就足够了

Vue 体系

在开始正式学习 Vue 之前，我们先来了解几个概念，这样才能更好理解 Vue 的一些设计理念。第一个概念是「单页应用程序」，就是只有一个 Web 页面的应用，是只加载单个 HTML 页面并在用户与应用程序交互式动态更新该页面的 Web 应用程序。第二个概念是「Virtual DOM」，即虚拟 DOM，简单说就是一个模拟 DOM 树的 JavaScript 对象，是为了避免大面积操作真实 DOM 而导致的性能问题。第三个概念是「响应式系统」，通过数据模型和 View 的数据绑定，系统可以对数据模型的修改自动响应到视图上。第四个概念则是「组件化」，Vue 和 React 都是通过组合各种组件组成应用程序的。理解了这些概念，你才能更好的理解 Vue/React 这些前端框架体系。

还有，开发工具方面，我推荐 Visual Studio Code，一款免费开源的轻量级代码编辑器，macOS、Windows、Linux 都支持，有人评价说比sublime开源，比atom更快，比webstorm更轻，所以说，你值得拥有。

Vue 体系包含了很多技术栈，一套完整的 Vue 项目一般包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，其中，vue + vue-router + vuex 又称为 Vue 全家桶，因为这三套技术栈都是 Vue 官方推出的，其他框架和工具则是第三方的。那么，就让我们来一个个了解这些技术栈吧。

vue：vue 即是 Vue.js 框架本身，是一套采用了 MVVM 模式的 JavaScript 框架，它和 React 一样使用了 Virtual DOM，也提供了响应式和组件化的视图组件。不过与 React 不同的是，Vue 更推荐使用基于 HTML 的模板，这也是它相比 React 等其他框架更容易入门的原因。

vue-router：因为现在大多数 Web 应用都是单页应用，那要实现单个页面里的不同视图的跳转，就要用到路由，vue-router 库就是用来实现单页应用的路由功能。

vuex：vuex 是一个类 Flux 的状态管理库，它采用集中式存储管理应用的所有组件的状态。关于什么是 Flux，可以参考阮一峰写的一篇文章《Flux 架构入门教程》。

vue-cli：vue-cli 是官方提供的命令行工具，用它可以快速创建 vue 项目。

axios：axios 是 vue 官方推荐的一个第三方 HTTP 库，它是基于 promise 的，promise 是 ES6 的新增特性。

sass：CSS 的一款预处理器，简单入门可以看看阮一峰的一篇文章《SASS用法指南》。预处理器另外还有 less 和 stylus，不过不少大牛最推荐的还是 sass。

webpack：webpack 是打包构建工具，可以类比为 Java 的 Gradle。不过 webpack 是基于 node.js 的，所以要用熟 webpack，还要学点 node.js 的基础知识，至少要懂得配置 node.js 的运行环境以及了解 node.js 的包管理工具 npm 的常用命令。

对于刚接触当代前端的人员来说，存在太多陌生的概念需要了解，一时可能难以消化，Vue 的作者尤雨溪写过一篇《新手向：Vue 2.0 的建议学习顺序》，可以按照他的建议去学习。

学习资源方面，最好的应该就是官方文档了。另外，《Vue.js实战》这本书有尤雨溪作推荐序，也可以买来看看，可以作为官网的补充资源。对于一些概念如果还不是很理解，也可以暂时先放一放，后面在做项目开发的过程中可能你就会理解了。

实战入门

最关键的还是要通过项目实战才能真正入门，这也是我一贯推崇的。也是和 Android、iOS 实战一样的建议，如果条件允许，你可以向上司申请参与自己公司的前端项目开发，然后开始去熟悉代码和实现一些简单的工作任务，建议先从完成一些简单的UI界面开始。同样，开源项目自然也是少不了，Vue 这块的开源项目我推荐两个：

vue2-happyfri：很简单的一个小项目，很适合入门练习

vue2-elm：用 vue 模仿饿了么的一个完整项目，重点推荐

另外，也附上一个汇总了众多 vue 开源项目的 github 地址：github.com/opendigg/aw…。

对于开源实战项目的操作上，我依然还是建议先给应用改皮肤开始，之后尝试着自己做出一个类似的App。以上面的 vue 版饿了么项目为例，你先给它所有页面先换个皮肤，包括背景、按钮、文字等等，通通换掉一遍，然后尝试自己做一个百度外卖或美团外卖，当你做完，应付一般的 vue 项目开发就应该没有问题了。之后也根据需要可以再去学下 React 体系，这时候学起来绝对不会吃力。

总结

前端开发入门，要学的技术栈真的很多，除了最基础的 HTML/CSS/JavaScript，还包括 HTML5、CSS3、ES6，还要学习目前流行的 JavaScript 框架，我的建议是从 Vue 开始，容易入门，要掌握的技术栈包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，另外，node.js 也要了解点基础。最后，实战项目我推荐了一个简单的小项目和一个完整的 vue 版饿了么项目。

思考和实践

前端开发的编程思想和移动开发有什么不同？如何将前端的架构思想应用到移动开发上？最后，还是要独立完成一款 Web 应用。

作者：程序员的青春链接：https://www.jianshu.com/p/dd70b1282f52

web前端该怎么入门?web前端入门教程(非常详细)

初学编程的小伙伴经常会遇到的问题，1.没资源 2.没人带 3.不知道从何开始 ，小编也是从新手期过来的，所以很能理解萌新的难处，现在整理一些以前自己学习的一些资料送给大家，希望对广大初学小伙伴有帮助！

这套「web前端入门教程」将多年的编程经验灌输其中，典型的实践派。既适合初学者入门，也适合程序员进阶（学习底层）。

给你学习前端的新手几个建议：

第一：

切记学习前端开发不可以依赖任何人，我做了开发这么久，十年了，见过很多依赖老师的学生，这样的后果就是自己没有解决问题的能力，也没有自主学习的能力，面试不能通过，找工作会非常难，因为学习开发就是锻炼这种自我学习的能力。

第二：

必须而且一定要有一个老师带着学，无论是学习JAVA还是前端，根据我见过的人的经验，如果没有一个明白人帮你解决一下问题，首先会浪费非常多的时间。而且学习的不专业，对于基础的把握不牢靠，后面的都是白扯。

第三：

坚持很重要，确实有很多学习前端的人在学习JS的时候学着学着就放弃了，这叫知难而退，JS确实难，但是就是因为难才有价值，我们评判一个前端开发者是什么水平，就是用JS来说话。

下面是基本的学习路线，跟着这个基本没有什么问题：

第一阶段：HTML+CSS/HTML5+CSS3

项目实战：淘宝官网、京东官网、小米官网等等。基本可以做了五个静态这样的网页，静态部分就不会有任何的问题。

第二阶段：JS

项目实战：实战小游戏项目开发

第三阶段：JS高级/Ajax/JQ

项目实战：自动义插件封装

第四阶段：前端主流框架

项目实战：大型网站建设

小编是一个有着5年工作经验的架构师，关于web前端，自己有做材料的整合，一个完整学习we前端的学习路线，学习材料和工具。需要的伙伴可以私信我，发送“前端”等3秒后就可以获取领取地址，免费送给大家。对于学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我。希望你也能凭自己的努力，成为下一个优秀的程序员！

这是我自己总结的学习路线，比较简洁，一般跟着这个走，这些知识都学会了找到工作没有任何的问题。有什么前端不懂的问题可以随时问我，希望帮助每一个想学习的小伙伴学到东西。

新手学web前端有哪些攻略？

web前端入行门槛低、薪资高、发展前景好，已经成为近几年的热门岗位，很多人在想要转行时也会首选web前端。想要学好web前端，尤其是对于没有任何基础的新手来说，一定要找到好的学习方法。下面小编就为大家分享一下前端新手学习的攻略有哪些?　　第一：基础的重要性　　无论做什么都一定要有扎实的基础，参加web前端开发培训也不例外，只有基础牢固，才能更深入的学习新技能。作为一名初级的web前端工程师，你必须要具备基础的技术要素：html、CSS和Java。这是作为web前端工程师所必须要掌握的。web前端的入门门槛其实很低的，与其他语言先慢后快的学习节奏相比，他是一个先快后慢的过程。所以在前期的学习过程中，你会很容易的掌握其基础的技能。而随着html5技术的广泛应用，web前端的学习也会变得更加简单。　　第二：细节的重要性　　有句俗语是这样说的：“细节决定成败”，很多web前端开发者在工作过程中为了追求速度，而忽略了一些细节性的东西。比如：给代码加备注，代码的命名规范，代码的简洁等。所有的这些看似不重要，其实却严重影响了项目的进度以及自身能力的提升。在开发过程中，适当的添加备注，能够加深对技术点的印象，也便于以后在修改的过程中迅速查找;规范的代码命名能够方便团队之间的沟通，提高工作效率。　　第三：网站布局的重要性　　做网站的目的除了向大众群体直观的展现公司的形象以外，更重要的还是便于SEO优化，为了提升网站在百度搜索引擎中的排名，以获取更多的浏览量。作为一名web前端培训者，想要进一步提升技能，就一定要研究网站的优化布局。　　第四：学习的重要性　　优秀的web前端工程师之所以优秀，不是因为工作的年限有多久，而是具备快速学习的能力。web前端开发是一个特殊的工作，涵盖的知识面非常广，而且互联网行业技术的更新速度是非常快的，如果没有快速学习的能力，就很难跟上时代的步伐。所以，作为web前端工程师一定要不断的学习，提升技能。

查看更多：https://yqh.aliyun.com/detail/6935?utm_content=g_1000107285

上云就看云栖号：更多云资讯，上云案例，最佳实践，产品入门，访问：https://yqh.aliyun.com/

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com