1、首先HTML和CSS是入行前端的第一个台阶，内容非常简单易学。

2、Div为HTML文档中大模块的内容提供结构以及背景支持。

3、HTML5+CSS3是HTML和CSS最新的标准版本。在原有的基础上增加了很多特性，例如HTML5中增加了一些语义化的标签和多媒体标签，从而能够通过JTML5+CSS3的组合实现原来JavaScript才能实现的功能。目前HTML5+CSS3主要应用于移动端的网页制作，目前万门熟知的微信小程序就有HTML5的影子。

4、JavaScript是一种具有函数有限的轻量级解释型的编程语言，通常JavaScript脚本是通过嵌入在HTML中来实现自身功能，可以为网页添加各种动态功能，因此在企业实际开发应用中JavaScript是考核前端工程师的重要标准。甚至有一些大型互联网企业有专职从事JavaScript开发的岗位。

5、jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，拥有便捷的插件扩展机制和丰富的插件。

6、node.js是一个让JavaScript运行在服务端的开发平台，掌握node.js可以让JavaScript成为与Python等后台编程语言平起平坐的脚本语言。

7、前端开发常用框架。目前前端开发中被使用最多的三种主流框架是Angular、React、Vue。React拥有较高的性能，代码逻辑非常简单，Vue是一个构件数据驱动的Web界面的库主要聚焦在view视图层，Angular是相对来说更加完善的前端框架。

8、微信小程序开发本质上就是HTML5+CSS+JS开发的，但是并不能直接使用HTML标签，微信提供了一个组件库，其中没有DOM和其他浏览器上的API，对于网络和Canvas也做了重新的包装。只要掌握了前面的知识学起来是非常轻松的。目前微信小程序开发已经成为前端开发中非常重要的一个方向。

9、还需要掌握一些SEO优化相关技术，作为前端开发工程师经常与网站接触，因此掌握SEO技术，可以大大提高网站开发的效率，降低后期网站运营过程中反复调试修改的问题。

10、完整地掌握网站开发的流程并且了解业务相关联的部分技术知识，在实际工作中，前端开发工程师主要业务会与产品经理、UI设计、后端开发关联，因此一个合格成熟的前端开发工程师需要对产品经理、设计以及后台开发有一定的了解，甚至完成相应的基础应用。 作者：前端美娜姐 https://www.bilibili.com/read/cv7739472/ 出处：bilibili

学习前端一般分为以下几个阶段：
一阶段：html标签、html5新增标签、css样式、css3样式、媒体查询等；
二阶段：Java、jQuery、ajax、面向对象、http传输协议等；
三阶段：canvas、js高级应用、JS-SDK、H5新增技术；
四阶段：node.js、vue.js；
学习建议以视频为主，书本为辅，千万不要只看书，敲代码的过程是很重要的。

基本上按照这样的课程流程走，如果自学效果不好的话，报个线下培训也是非常不错的，学好技术之后去就业

如果是小白的话，入门肯定会比较困难的。建议选择合适的有经验的去带着学习。

一、学习HTML5和CSS3基础
随着这移动互联网快速发展的时代，尤其是4G时代，HTML5+CSS3已然成为新一代的web前端技术。
随着HTML5的发展和普及，了解 HTML5 也将成为 Web开发人员的必修课。涉及到网页外观时，就需要学习 CSS 了，它可以帮你把网页做得更美观。
利用 HTML5 和 CSS3 模拟一些你所见过的网站的排版和布局(色彩，图片，文字样式等等)。
当然，远标Web前端开发课程第一阶段还会学习 PS设计工具使用和互联网UI设计理论。
二、学习Java，了解DOM
Java 是一种能让你的网页更加生动活泼的程序语言。学习 Java 的基本语法，学会用 Java 操作网页中 DOM 元素。
Web前端开发课程第二阶段完全可以实现大家平常喜欢玩的 2048 游戏。(是不是感觉挺有意思)
接着学习使用一些 Java 库，比如 Jquery 是大部分 Web开发人员都喜欢用的，通过 Jquery 可以有效的提高 Java 的开发效率。
三、学习Web前端核心
学习 Jquery 之后，大家就要学习 HTML5 高级阶段(HTML5 Canvas 绘图、HTML5 SVG、音频和视频处理、表单处理、表单验证...等)
四、学习HTTP协议及Server端技术
服务器端脚本编程(后台开发)也是Web开发人员的基本功之一。
要构建动态页面通常会使用到数据库，通常PHP使用Oracle、MySQL数据库。
对于Web服务器来说，Apache 一个就已经是了。那么Apache、php、数据库，该怎么理解它们的关系?
1、Apache是服务器基础，php和数据库都需要Apache来协调工作
2、php是脚本解释，如果不用php，那么Apache出来的东西就只是静态的，而不能在服务器实现功能
3、数据库完全可以单独使用，但是和Apache、php一起，则是由php代码调用数据库接口，而apache就负责解释php代码，让他能真正地实现对数据库的调用
五、学习Web前端高级技术
当你掌握了HTML5，CSS3，Java等技术之后，就应该找一个Web框架加快你的Web开发速度，使用框架可以节约你很多时间。
学习的Bootstrap是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVA 的，它简洁灵活，使得 Web 开发更加快捷，是web前端开发者最喜欢，也是现在企业里最常用的前端框架。
Angular JS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC编程、模块化、控制器、路由、事件绑定等等。
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。

前端要入门的话，首先需要学些HTMI和CSS

先说一下自学前端如何入门吧。

方法：

第一：理清Web前端的知识结构。要想高效学习Web前端知识，首先应该搞清楚Web前端都包括哪些技术结构。Web前端开发虽然技术难度并不高，但是技术细节却比较多，内容也比较杂。Web前端的基础包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是学习的重点，也是难点。另外，vue等框架也是需要熟练掌握的。

第二：紧跟技术发展趋势。目前Web前端的技术发展趋势有三个，其一是前端开发数据化;其二是前端开发高效化;其三是前端开发全栈化。前端开发数据化主要是大数据发展的影响，在大数据的推动下，Web前端逐渐涉及到了大量的数据展示任务。前端开发高效化主要体现在Web前端正在进行独立部署，前端与后端的沟通主要通过资源接口的方式来进行。前端开发全栈化也是一个比较明显的趋势，比如Nodejs的应用。

零基础入门（html，CSS）前端开发概况、代码入门页面基本结构、文档声明、编码声明、css语法、style属性、link和style标签、id属性、基本样式、Border 、Background、 Font、盒模型、文本设置…常用标签集合

header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd…绝对路径、相对路径、标签语义化、标签嵌套规范、SEO…常用选择器&标签类型划分d、class、类型选择、包含选择、群组选择、通配符、选择器优先级、标签样式初始化订制方案、超链接及伪类划分、标签类型划分及特性、inline、inline-block、block…浮动进阶浮动的作用、浮动的特性、文档流、浮动的各种问题、clear、BFC(块级格式化上下文)、触发BFC的条件、Haslayout、Haslayout的触发条件…定位relative相对定位、Absolute绝对定位、Absolute绝对定位、Fixed 固定定位、inherit 继承、static静态定位、默认值、zIndex层级问题、margin负值、透明度…表格和表单表格标签、表格样式重置、单元格合并、表单元素、表单相关的属性操作、表单默认样式初始…兼容性问题处理兼容性问题总结、浮动在IE6，7下的各种问题、表单在低版本IE的问题、处理低版本IE对新增标签的支持、CssHack、条件注释语句、PNG问题、透明度的问题、固定定位在IE低版本的处理方式…整站进阶样式规划、favicon、Css Sprite、Data URI、隐藏元素、测试工具使用、滑动门、等高布局、三列布局、未知宽高图片在容器内水平垂直居中、文本水平垂直居中、多行文本水平垂直居中…css3入门transition、属性选择器、nth-of- type、nth-child、backgroundSize、box-sizing、圆角，盒模型阴影、文字阴影、rgba、表单高级、H5表单新增属 性、E:not(s)、E:target、E::selection、background-clip…移动端布局测试环境Emulation、viewport、 window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移动端布局相关问题、 window.deviceorientationevent、横竖屏判断…Animation和Transform浏览器前缀、keyFrames、Animation调 用、播放次数设置、动画偶数次调用顺序、Animation的问题、无缝滚动、动画播放|暂停、rotate旋转、deg、skew斜切、scale缩 放、translate位移、transform-origin、transform的执行顺序问题…Bootstrap前端开发框架Html语法规范、CSS语法规范、Less 和 Sass 中的嵌套、class 命名、选择器、Normalize.css、栅格系统、排版、代码、响应式工具

入门很简单的，但是想学好就比较难了