2022 最新前端开发工程师入门学习路线（imooc免费课程）（上）

使用指南（必读）

• 内容均来自于慕课网免费课程，无付费内容

• 每个课程都标注了难易程度及时长，可自行计划及调整

• 整体学习路线参考了慕课网官方提供的前端开发工程师学习路线图

前端学习必备工具-VScode

学习前端开发，最必不可少的入门工具就是VScode编辑器。搞好编辑器，就可以开始学习了！

下载地址：https://code.visualstudio.com/docs/?dv=win

免费视频课程-VSCode入门教程-慕课网（点击跳转）

本课程，面向0基础的小白用户，学习一个功能强大、操作简单的前端编程工具，学会本课程你将不再担心编辑器的配置与使用，轻松学习编程。

阶段一：前端0基础入门

学习目标：掌握网页开发必备基础和JS特效网页基础，包括HTML\CSS\HTML5\CSS3\JavaScript基础等。正确认识前端开发这个工作。

HTML/CSS/HTML5/CSS3

免费文字教程：

• HTML 入门教程：‍https://www.imooc.com/wiki/htmllesson‍

• Html5 入门教程：‍http://www.imooc.com/wiki/html5‍

• CSS入门教程：http://www.imooc.com/wiki/css3lesson

• 十天精通CSS3：http://www.imooc.com/learn/33

免费视频课程-HTML+CSS基础教程-慕课网（点击跳转）

本门课程专为零基础学员设计，囊括了目前使用比较广泛的HTML+CSS基础知识，以知识点结合小案例的形式书写代码，学与练结合，帮助学员顺利入门。

课程从最基本的概念讲起，逐步深入，带你学习HTML(5)和CSS(3)样式基础知识，了解各种常用标签的意义以及基本用法，讲解CSS(3)样式代码添加，为后续更深入的学习打好基础。

通过本门课程的学习，你可以基本掌握前端必备的HTML+CSS样式基础知识，并可以利用这些知识实现静态页面。

JavaScript 基础（入门+进阶）

在学习JavaScript的时候，可以选择看慕课网的免费教程，或者跟着免费视频课一起学习。

免费文字教程：http://www.imooc.com/wiki/Javascriptbase

免费视频课程：

1. JavaScript 入门（点击跳转）

本教程让您快速认识JavaScript，熟悉JavaScript基本语法、窗口交互方法和通过DOM进行网页元素的操作，学会如何编写JS代码，如何运用JavaScript去操作HTML元素和CSS样式，本JavaScript教程分为四个章节，能够让您快速入门，为JavaScript深入学习打下基础。

2. JavaScript 进阶（点击跳转）

本课程包含了很完善的JavaScript基础必备的知识。以知识点与小案例结合的形式书写，确保每个知识点都有对应的练习题，让你一边学习一边练习，重点知识及时实践，加深记忆，巩固学习成果。

学完本课程后，你可以掌握：js基础语法(变量、逻辑与、或、非)、数组、流程控制语句(判断、多种循环)、函数、事件、内置对象、浏览器对象、DOM等知识点

通过本门课程的学习，你可以顺利完成JavaScript基础入门，独立实现简单的页面交互，不论你是计算机专业毕业生，还是转行IT的新手程序员，本门课程都能带你无压力的入门JavaScript。

综合练习实战案例

切图基础教程-前端工程师版（点击跳转）

课程系统地介绍了PS基本操作工具，掌握蓝湖第三方切图标注工具的基本使用，着重教大家切图的方式和技巧。最终熟练掌握切图，并且游刃有余的处理设计师挖的"坑"。

元旦贺卡制作（点击跳转）

利用刚刚学到的HTML5和CSS3知识，来制作一个祝福元旦的贺卡H5小场景吧。

H5+JS+CSS3 实现圣诞贺卡（点击跳转）

本课程中使用面向对象的编程方式，采用H5+JS+CSS3的混合使用实现整个功能。课程当中总共分为3个主题场景图，多个精灵图以及雪碧图，实现了静与动的完美结合，并且由浅入深的将整个案例拆分讲解。