最好拿出一个完整的案例，包含前后端的所有内容，然后按照自己最熟悉的部分深入学习。面试的时候就有话说了。就看你侧重的是啥。不能只学后端或只学前端，这样就不是前端开发了，只能是UI设计，偏向于美工。
桃花溪(张旭)
第1阶段：前端页面重构
内容包含了：(PC端网站布局项目、WEB前端+CSS3基础项目、WebApp页面布局项目)
第2阶段：Java高级程序设计
内容包含：1)原生 Java交互功能开发项目、面向对象进阶与 ES5/ES6应用项目、Java工具库自主研发项目)
第3阶段：PC端全栈项目开发
内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)
第4阶段：移动端项目开发
内容包含：(Touch端项目、微信场景项目、应用 Angular+Ionic开发 WebApp项目、应用 Vue.js开发 WebApp项目、应用 React.js开发 WebApp项目)
第5阶段：混合(Hybrid,ReactNative)开发
内容包含：(微信小程序开发、React Native、各类混合应用开发)
第6阶段：NodeJS全栈开发
内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)
第7阶段：大数据可视化
内容包含：(大数据可视化化基础与实战、一、数据可视化入门、二、D3.js详解、三、其他JS库)
想成为web前端大神，到底需要掌握哪些知识呢？
1.PhotoShop/Fireworks Design
配合美工将草图形成具体的符合WebPage的设计；
有快速制作分层高品质PSD、PNG的能力；
能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码。
2.Flash Design
基本动画效果；
复杂的交互体系设计，了解第三方swf辅助设计软件；
复杂的交互体系设计以及较强的对各类外埠资源（PNG、JPG、MP3、WAV等）的整合能力。精通部分第三方辅助设计软件（AE、SwishMax、Swift3D等）。
3.XHTML/CSS
基本的layout实现；
严格跨平台的layout实现以现。
4.JavaScript/Ajax/DOM
基本的DOM操作，了解AJAX，可以实现数据通信；
基本的DOM操作，能写高效率的OOP代码，以降低维护成本；
基于需求，进行不同的开发，选择合适的框架，做到代码效率最高，用户体验最好，代码下载量最小，并且可以在单独甚至更多产品线中最大限度重用代码。
5.Flash Developement
基于Timeline的ActionScript操作，能实现简单交互；
掌握a外，能实现数据层通信（与服务器以及本地SharedObject）；
精通AS1-3，能根据需求进行各类RIA开发。无论是要求支持FlashPlayer8的，还是FlashPlayer9的，都能做到开发效率最高、灵活性最大（比如对HTML层的接口设计，等等）。
6.Apollo
产品级的封装，基本技术了解（如何打包、如何加入HTML和JavaScript等）；
掌握a的同时，能利用Apollo的API独立设计、开发OS的文件I/O功能；
掌握基本技能的同时，对"3D概念体系"有所认知。这里"3D"即：Design（设计）、Development（开发）、Deploy（产品部署）。
欢迎补充……