谢谢邀请。
在回答这个问题前我们需要先了解一下什么是Web前端工程师，主要的工作内容是什么。WEB前端工程师是将后台工程师的数据信息按照界面设计师的设计效果图开发呈现到浏览器、APP及应用程序上供用户浏览使用的一个职位。
Web前端开发工程师的职位，要求掌握的基础技能有：html5、css3、javascript、JQuery、Ajax等，除了以上需要掌握的基础内容，还需掌握多个前端框架、UI库以及代码管理工具等多个工作中常用到的工具，并结合公司实际要求，增加学历、工作年限、项目经验等其他要求。
按照由简入深，由易到难的方式学习Web前端开发，我个人建设：首先学习html、css、javascript，之后学习JQuery、html5、css3，最后升级学习JS模块化工具、CSS扩展语言、主流前端UI框架、代码管理工具等工作中需要掌握的技术内容。
事实上，要想学好任何一门技术，都必须要掌握好基础，只有基础牢固了，根基牢固了，后期才能发展。
另外想补充说明的是，想零基础学习Web前端开发，除了需要掌握专业开发知识外，还因具备一定的审美眼光，喜欢快节奏的生活，能及时了解并学习前沿的新技术，只有与时俱进，才能有更辽阔的发展空间。
CCS HTML JS 都要学 可以在一些免费的网站学习比如菜鸟教程：http://www.runoob.com/ 慕课网 腾讯课堂 这样的学习网站上学习 下面是我学习的计划
随着互联网的深入发展，前端开发工程师一跃成为市场上非常抢手的人才。很多同学，包括以前做UI的、土木工程的、或者对于IT完全零基础的同学都想学习web前端。那想学好web前端，应该先学什么？
1、HTML5介绍
内容包括：(互联网发展趋势、HTML5语言的优势、简单易学人人都能编程、HTML5就业和薪资情况、HTML5常见的项目与产品、HTML5的未来与方向)
2、HTML基础
内容包括：(HTML简介与历史版本、常用开发软件、常见标签与属性、表格与表单、标签规范与标签语义化、实战：网页结构布局)
3、CSS基础
内容包括：(css简介与基本语法、常见的各种样式属性、CSS选择器与标签类型、理解盒子模型与CSS重置、浮动与定位、利用photoshop工具测量样式、HTML+CSS开发网页、实战：高仿电商首页效果)
4、CSS3基础
内容包括：(css3常见样式、css3选择器、变形与动画、3D效果与关键帧、弹性盒模型、移动端布局、移动端基本概念、viewport窗口设置、移动端布局方案、rem、vh、vw等单位、响应式布局、bootstrap框架)
5、JavaScript基础
内容包括：(JS简介、JS变量、数据类型与类型转换、运算符与优先级、流程控制-if..else流程控制-switch…case、流程控制-while、do..while、for循环、break、continue语法、函数定义与调用、全局变量与局部变量、函数传参与返回值、函数作用域与变量作用域。而且还有DOM的基本操作、定时器使用、this指向与修改指向、数组、字符串等方法操作、时间对象与正则对象、掌握常见BOM操作、常见事件与事件细节、JSON与AJAX、JSONP跨域操作、前端cookie的使用、实战：JS配合HTML与CSS完成电商项目)
6、jquery框架
内容包括：(jquery框架介绍及优势介绍、jquery核心思想、jquery常见方法、jquery动画操作、jqueryAJAX操作、jquery工具方法、利用jquery快速开发网页)
7、PHP基础
内容包括：(PHP简介与基本语法、mysql数据库及sql语法、apache服务器与集成开发工具、PHP链接数据库、PHP与AJAX交互、实战：留言板、登录、注册等)
8、H5基础项目
内容包括：(项目简介、项目功能演示、项目划分及框架、编写HTML页面结构、设置CSS样式、添加JS交互、可选框架：bootstrap、jquery、PHP等、项目调试及兼容、项目验收)
当然除了以上这些基础的知识点，软件之外，并不能足够解决前端开发要怎么学的问题，作为一名优秀的前端开发工程师要时刻保持一种学无止境的态度!
首先，优秀的web前端开发工程师要在知识体系上既要有广度和深度。做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
web前端开发要怎么学？基础的知识点是必须的，但是仅仅这些不够，web前端工程师必须不断提升自己，不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的web应用程序来体现这种翻天覆地的变化。
说了那么多，希望能帮助到题主！
在回答这个问题之前我们先要知道什么是 web 前端开发？ web 前端开发的职责是什么？学习 web 前端开发的目的是什么？只有弄清楚这些问题以后，才能制定一份学习计划，按照计划有效的学习。
什么是 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 前端开发工程师并获得第一份工作。
制定学习计划
根据快速成为一名前端开发工程师并获得第一份开发工作的目标，制定以下学习计划：
- 学习 HTML 和 CSS
- 使用 HTML 和 CSS 开发静态网站
- 使用 Git 和 Github 管理并发布你的静态网站
- 求职
- 学习 JavaScript
- 使用 HTML 和 CSS 以及 JavaScript 开发网站
- 更新简历并投递
学习 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。
使用 HTML 和 CSS 以及 JavaScript 开发网站
非常棒，你已经学习 HTML 和 CSS 以及 JavaScript 语言，你可以完成大多数网站的页面开发，包括一些动态效果。为了巩固和提升，你需要开发一些网站来增加实战经验，为求职助力。同样可以临摹一些知名网站，可以根据喜好自由选择，至少需要临摹一个网站。
更新简历
你扩展了技术栈，新增 JavaScript 技术，并且有更多的项目经验，所以请更新简历并进行投递。在这之前你已经进行过面试，知道一些不足之处，所以在面试之前请做一些准备，并弥补之前的不足之处。
进一步学习
完成计划以后，恭喜你已经是一名前端开发工程师，但成为优秀还需努力，或许你还需要学更多技能，比如：JQuery,Vue,Recet,SEO 等，值得一提的是坚持写作。
随着Web前端的技术日趋成熟，越来越多的行业巨头开始不断向Web前端示好，在未来几年，Web前端将会以更多的形式渗透到我们生活中的方方面面。因此更多的从业者开始关注Web前端开发行业，企业也更加重视Web前端开发人员。
如果想要专业的学习Web前端技术，更多需要的是付出时间和精力，学一门技术需要自己努力坚持下去，应该根据自己的实际需求考虑一下，如果没有基础的话，最好专业全面的学习。只要努力学到真东西，前途自然不会差。
很高兴可以回答楼主的问题！
楼主所说的零基础是没有接触过任何的IT技术学习吗？
web前端开发技术包括三要素:HTML、CSS、JavaScript。
但仅仅学会这些并不能很好的完成web前端开发工作！还要学会SEO、DOM、BOM、Ajax等主流技术！
楼主没有很好的基础和IT技术思维还是不要盲目入行，如果楼主确实想入行建议找人带或者进行专业的技术培训以免走更多的弯路而浪费时间！
web前端开发不仅仅是会技术就可以的，对于审美及用户体验思维也是有要求的！
以上就是对楼主提问的回答，希望对楼主有所帮助！
零基础学习前端，首先要学习的是html，css，学完了这两个，再去看javascript，javascript也看完了，你已经入门了，剩下的就是不断练习，动手做项目，做了两三个项目之后，去看看bootstrap，这是框架，很能提高工作效率；看看jQuery、Ajax、sass等
–河南新华电脑学院
入门需谨慎！首先你要知道前端是做什么的，前端能做什么…然后是前端三大件，html,css和javascript…推荐先了解html，上w3c和mdn上把所有常用的标签都熟悉一遍了解标签的特性和属性，然后学css，推荐css权威指南，通读一遍，照着书去了解各个知识点…等html和css都了解入门后，就可以学习常用的布局方式，照着一些大的网站还原出静态页面…最后是js，基础的语法，数据类型，函数都要搞懂，最好是在学习js的时候去leetcode或openjudge等在线网站刷一刷简单的算法题，对锻炼自己的编程思维很有帮助！然后是原生bom和dom，熟悉浏览器的特性，了解常用api,到了这个阶段你就能用你所学的知识做出各种特效了…在这个基础上去学习jq,bootstrap很快就能上手，你也就算是真正入门了…后面的es6,7..vue,react照着官方文档去写，做几个项目就懂了…前端不难学，就是知识点太多太碎，找几个小伙伴一起学或者找个好老师领进门会事半功倍，学会看文档，乐于看文档，多动手写代码…
现在很多人都想转行做前端，觉得前端可以做出酷炫的页面效果，可以很装逼，入门也很简单。但是，想要爬的更高飞的更远还是需要不懈的努力以及对技术的追求。这里说一下初级前端如何入门吧。
首先呢，对于刚跨入前端界的小白来说，你要先知道一个网页是由html+ css+javascript组合来完成的。其中html的作用是让你写好整个网页的框架，每个模块放在什么位置。而css起的作用的就是修饰你所搭好的框架，让页面看起来更加的多姿多彩。最后呢javascript也是最难的一个模块，它的作用就是为你的页面添加动效，比如图片切换、页面的动效等等，都可以使用它来完成。这些基础的教程在网上有很多，建议你去慕课网或者腾讯课堂搜索html+css入门教程学习即可。
如果你真的有学习前端的想法，那么要坚持自己的信念，最主要的是要多看多写，只有自己练习的多了才能在平时的工作中熟练的使用。没事也可以多看看别人的页面是怎么做的，想一想自己要做的话有没有更好的实现方式。多学习别人在网页制作中的优点。
如今学习web前端的人越来越多，作为一个初入行的新手，一定要想清楚为什么要学习web前端，出于一种什么样的心态去学习，然后给自己做好定位。下面，千锋杭州web前端培训小编就给大家总结一下，零基础新手在学习web前端时应该掌握哪些知识点。
1、HTML学习
超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因此，我们必须掌握HTML的基本结构和常用标记及属性。
2、CSS学习
CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。
3、JavaScript学习
JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等，使我们的页面看起来不那么呆板。
4、jQuery学习
jQuery 是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)，同时现在有很多基于jQuery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便快捷，大大节省了我们开发的时间，提高了开发速度，这也充分体现了其 write less,do more的核心宗旨
5、bootstrap
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。一经推出后颇受欢迎，一直是GitHub上的热门开源项目。
6、实战
人生学习的态度是：不急不躁，不快不慢。持之以恒，相信自己。不求能改变世界，但求能改变自己的生活。我们学习web前端最终的目的是为了找到一份满意的高薪工作，那么实战经验对于我们就至关重要，所以，在学习的过程中除了学习各种基础知识，我们还应该积累自己的实战项目经验。
零基础新手想要快速学成web前端，参加培训班无疑时最高效快捷的方式。千锋杭州web前端培训以实战项目驱动教学，除了培养学员的开发技术，覆盖热门大数据可视化内容，深度贯穿前端后端开发，紧贴主流企业一线需求，助力千锋学员毕业即高薪就业。
