零基础学习web前端开发要怎么学习

在回答这个问题之前我们先要知道什么是 web 前端开发？ web 前端开发的职责是什么？学习 web 前端开发的目的是什么？只有弄清楚这些问题以后，才能制定一份学习计划，按照计划有效的学习。

推荐一个web前端学习 QQ群606721798，欢迎大家加入，每天晚上在腾讯课堂都有一个技术学习课,会有老师分享干货,帮助大家分析解答问题

什么是 web 前端开发？

前端开发通常指的是 web 前端开发，早前前端开发通常是指网页制作，就是简单的图片和文字的网页开发，随着互联网技术的发展，对前端开发提出的要求就越来越高，引出一个新兴职业-前端开发工程师。前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域

 

web 前端开发的职责是什么?

前端开发的职责范围比较广，根据公司的业务，侧重点有所不同，根据招聘网站的职责要求，大致总结如下几点：

1、使用 HTML、CSS、JS 等技术，根据需求文档，完成 PC 端、移动端面及交互的开发，并保证兼容性和确保产品具有优质的用户体验；

2、理解Ajax技术原理，调用后端接口进行数据通信，与后端工程师配合，为项目提供最优化的技术解决方案；

3、参与UI设计方案，使用 Vue.js、Angular.js,React.js 开发前端页面 UI 组件及功能组件；

4、将完成程序编制及单元测试，并确保开发过程遵循相关开发规范；

5、负责公司产品 Web 前端的架构设计与研发；

6、负责钻研 WEB 前沿技术，协助其他同事解决项目中遇到的难题，持续优化页面架构和性能。

 

学习 web 前端开发的目的是什么？

学习的目的不同，学习的方式有所不同，但是必须清楚自己的学习目的，我在这假设你学习 web 前端开发的目的是快速成为一名 web 前端开发工程师并获得第一份工作。

 

制定学习计划

根据快速成为一名前端开发工程师并获得第一份开发工作的目标，制定以下学习计划：

1. 学习 HTML 和 CSS
2. 使用 HTML 和 CSS 开发静态网站
3. 使用 Git 和 Github 管理并发布你的静态网站
4. 求职
5. 学习 JavaScript
6. 使用 HTML 和 CSS 以及 JavaScript 开发网站
7. 更新简历并投递

学习 HTML 和 CSS

HTML 和 CSS 是构建网站的第一步。HTML 是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。CSS 样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

值得庆幸的是有许多免费和收费的资源可以学习 HTML 和 CSS，一些值得荐的免费网站资源：

• w3school - html 在线教程

• mozilla - web docs

• 慕课网 - HTML+CSS基础课程

编程是技能，不是知识，技能只有在不断练习下才会有进步。

从一开始就多动手，多练习，最好把每天学的内容写成博客。

使用 HTML 和 CSS 开发静态网站

你已经学习完 HTML 和 CSS 基础知识，值得祝贺，你已经为成为一名优秀的开发工程师跨出第一步，接下来需要巩固和提升 HTML 和 CSS 技能，你能开发一些静态网站，为你找工作提供项目经验。

建议临摹一些知名的网站，比如：百度、知乎、简书、微博、淘宝等网站，推荐完成两个以上的网站临摹。

使用 Git 和 Github 管理并发布你的静态网站

从临摹网站就开始使用 Git 和 Github 进行版本控制，并使用 Github 发布临摹的网站，让更多的人浏览。

求职

学习完 HTML 和 CSS 基础知识，并能完成静态网站的开发，拥有项目经验，事实上你已经是初级前端开发工程师，可以开始准备简历并投递，寻找前端开发工程师的工作。

许多公司是需要初级前端开发工程师的，并且提供一些实习机会，在实习中和高级前端开发工程师一起工作，对技术的提升是飞跃的。

学习 JavaScript

如果你已经获得前端开发工程师的工作，那么恭喜你。如果你投递简历并没有获得面试或者面试失败，你可以继续提升自己，学习 JavaScript。

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给 HTML 网页增加动态功能。

使用 HTML 和 CSS 以及 JavaScript 开发网站

非常棒，你已经学习 HTML 和 CSS 以及 JavaScript 语言，你可以完成大多数网站的页面开发，包括一些动态效果。为了巩固和提升，你需要开发一些网站来增加实战经验，为求职助力。

同样可以临摹一些知名网站，可以根据喜好自由选择，至少需要临摹一个网站。

更新简历

你扩展了技术栈，新增 JavaScript 技术，并且有更多的项目经验，所以请更新简历并进行投递。

在这之前你已经进行过面试，知道一些不足之处，所以在面试之前请做一些准备，并弥补之前的不足之处。

进一步学习

完成计划以后，恭喜你已经是一名前端开发工程师，但成为优秀还需努力，或许你还需要学更多技能，比如：JQuery,Vue,Recet,SEO 等，值得一提的是坚持写作。

作为一名工程师，写作能力是一项必要技能。在工作中，开发文档的撰写、技术方案的出具，都需要用到此技能。并且写作能力出众的工程师通常具有逻辑清晰，沟通能力强等特质。写作也可以让我们对知识的学习更加巩固。