前言
首先，任何技术实际都是从零基础开始的，不管是直接学习还是通过相近经历转行。所以不需要因零基础担心。
其次，一定要做好准备：一项技术的学习，意味着你各方面资源不同程度的消耗——时间、工具、资金，甚至融入相关交流圈子的准备。在这个准备过程中，最好是带有一个强硬的规划：“我要在一个月内达到能够实现XXX的水平”或者“我一定要在2周内把XXX项目完成”。如果没有这个规划，一般人都会越来越懒惰。
然后，选准一个或多个老师。这个老师，可以是一个页面，一本书，也可以是一个真实的人。
学习内容
主要有html,css,js入门得话推荐先到w3school学习上面的教程，上面的教程大多都有demo示例，通过这种方式也可以增加兴趣。新手进入后可以从下图的入口去先学习:
推荐书籍
入门
html就通过w3school-HTML教程来学习
进阶
《Javascript权威指南》(简称犀牛书)或者《JavaScript高级程序设计》(简称红书)
html5/css3
es6
github
推荐编辑软件
Dreamweaver
Adobe Dreamweaver，简称“DW”，中文名称”梦想编织者”，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Notepad++
Notepad++是一套非常有特色的自由软件的纯文字编辑器(许可证:GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8 技术)。它的功能比 Windows 中的 Notepad(记事本)强大，除了可以用来制作一般的纯文字说明文件，也十分适合当作编写电脑程序的编辑器。Notepad++ 不仅有语法高亮度显示，也有语法折叠功能，并且支持宏以及扩充基本功能的外挂模组。
Sublime
Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。[1] Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统
强烈推荐
git作为最近炙手可热的版本管理工具，作为前端工程师，这玩意儿不会用是不行的，强烈推荐学习git，并通过github记录自己的学习代码和历程。
