目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨。

Web前端工程师的岗位职责是利用HTML、CSS、Java、DOM等各种web技能结合产品的界面开发,制作标准化纯手工代码,并增加交互功能,丰富互联网的Web开拓,致力于改进用户体验。现如今,Web前端工程师已经成为各大互联网公司不可或缺的热门职位,从业者队伍日渐庞大,这其中不乏零基础学习者和转行人士。为了方便大家系统而全面的掌握前端基础知识,小编特意整理了web前端开发入门学习线路图,涵盖20大实战项目的知识点详细讲解,希望对大家的学习有所帮助。

项目一:PC端网站布局

所含知识点:HTML基础,CSS基础,CSS核心属性,CSS样式层叠,继承,盒模型,容器,溢出及元素类型,浏览器兼容与宽高自适度,定位,锚点与透明,图片整合,表格,CSS属性与滤镜

项目二:HTML5+CSS3基础项目

所含知识点:HTML5新增的元素与属性,表单域增强元素,CSS3选择器,文字字体相关样式,CSS3位移与变形处理,CSS3 2D转换与过度动画,CSS3 3D转换与关键帧动画,弹性盒模型,媒体查询,响应式设计

项目三:WebApp页面布局项目

所含知识点:移动端页面设计规范,移动端切图,文字流式/控件弹性/图片等比例/特殊设计的100%布局,等比缩放布局,viewport/meta,rem/vw的使用,flexbox详解,移动web特别样式处理(reset, 1px border, 高清图片)

项目四:原生Java交互功能开发项目

所含知识点:基本语法,循环语句,函数与数组,String与Date,BOM与DOM,事件,拖拽效果,cookie存储,正则表达式,Ajax,面向对象基础,运动与游戏开发

项目五:面向对象进阶与ES5/ES6应用项目

所含知识点:Promise/A+,设计模式(观察者模式等),原型链,构造函数,执行上下文栈与执行上下文,变量对象与活动对象,作用域链,闭包,this,ES5,ES6

项目六:Java工具库自主研发项目

所含知识点:DOM库,事件库,AJAX库,原型和继承库,MVVM核心库,基于SPA的路由库

项目七:jQuery经典交互特效开发

所含知识点:时间轴特效,tab页面切换效果,网页定位导航特效,滑动门特效,焦点图轮播特效,导航条菜单效果,瀑布流特效,弹出层效果,倒计时效果,抽奖效果

项目八:PHP+MySQL后端基础项目

所含知识点:PHP,MySQL,HTTP(s)协议详解,Ajax进阶、跨域与Defered,Apache与Nginx 环境搭建与配置,接口的定义,Mock数据,Restful,前后端联调,前端安全(XSS,CSRF,JSON注入)

项目九:前端工程化与模块化应用项目

所含知识点:Gulp,Webpack,NPM,Git/SVN,CommonJS,AMD,CMD,ES6模块化

项目十:PC端全栈开发项目

所含知识点:大首页、列表页与详情页展示与交互特效、搜索、登录与注册、购物车、jQueryUI 与 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平台系统前端

项目十一:应用Vue.js开发WebApp项目

所含知识点:Vue.js基础,模块化,单文件组件,路由,与服务器通信,状态管理,单元测试与生产发布,服务端渲染SSR与Nuxt.js,基于Vue.js企业级项目开发(Mint UI, Element UI)

项目十二:应用React.js开发WebApp项目

所含知识点:ReactJS基础,JSX语法,组件,flux+Redux,React,Router路由,动画效果,基于React 企业级项目研发( Antd, Antd Mobile)

项目十三:应用Angular开发WebApp项目

所含知识点:Type 基础与进阶,开发环境配置,Hello World,架构、模块与组件,模板,元数据、数据绑定与数据显示,表单,服务与指令,依赖注入,路由,Ionic 3 MUI框架

项目十四:微信公众号开发

所含知识点:初识微信公众号,订阅号的基本功能,使用百度BAE实现代码的快速上线,使用Git完成线上代码部署,公众号开发权限及功能接入,微信JSSDK接口API,微信场景项目开发与接入

项目十五:微信小程序开发

所含知识点:微信小程序初探,小程序入门必学,小程序组件体验,小程序大功能,项目实战带你征服小程序

项目十六:React Native

所含知识点:React Native 初探,React Native 项目导航,React Native 项目文本框,React Native 项目滚动分页,React Native 项目第三方登录,React Native 其他组件

项目十七:各类混合应用开发

所含知识点:自主原生Navtive Hybrid(iOS、Android),第三方Hybrid框架Cordova/Phone gap,第三方Hybrid框架MUI + HTML5+

项目十八:NodeJS全栈开发

所含知识点:

(1)Node.js基础项目——NodeJS介绍,开发环境搭建,模块与包管理工具,CommonJS模块,URL网址解析,QueryString参数处理,HTTP模块,HTTP小爬虫,request方法,事件 events模块,文件 fs模块,Stream 流模块,原生路由与参数接收,读取图片文件,npm s,Yarn 与 PM2

(2)MongoDB——MongoDB介绍与环境搭建,数据库常用命令,Collection聚集集合,document文档操作,聚集集合查询,NodeJS连接MongoDB

(3)GraphGL——GraphQL初探:从REST到GraphQL,GraphGL安装,准备数据源,搭建GraphQL服务器,数据查询

(4) Express——express 介绍,安装和创建基于Express的项目,Express 4.1x 初始化项目详解,路由简介,模板引擎EJS,模板引擎Pug(Jade)

(5)Koa——Koa入门、Koa应用、中间件、Context、async await、请求与响应

(6)测试框架mocha——搭建框架、断言assert、项目测试、运行多个测试

(7)socket 即时通信项目——Socket简介和通讯流程,基于net模块实现socket,WebSocket,Socket.io

项目十九:Node.js高级全栈项目

所含知识点:基于Vue+Node+MongoDB+微信的高级全栈项目开发

项目二十:大数据可视化

所含知识点:数据可视化入门,数据可视化基础,零编程工具使用:ChartBlocks、Infogram、plotly、Raw、Tableau,D3.js详解,D3.js 入门,D3.js 高级应用,D3.js 应用工具:NVD3、n3,charts,Highcharts,FusionCharts,Polymaps

在前端学习的起步阶段,最重要的就是要有明确目标和合理的学习规划,为此小编特别为大家总结了web前端基础学习阶段的四大学习要点,希望能让大大家的学习变得更加高效:

一、基本知识的掌握 在我们梳理的知识架构中,按照我们分析的两个维度里最前置的、最浅显的部分,作为打基础的阶段,必须要在这个过程中更多投入到实践中去,我们通常做的多了、熟练了,就认为这部分知识和内容掌握。

二、常用工具的掌握 对于常用工具的掌握应该掌握一些有大公司或专业团队背景的流行工具,这些工具的熟练掌握能够提升专业度、职业度,同时,能提升我们的工作效率。

三、沟通技巧的掌握 在国内,技术人员通常都是自己制定方案、自己执行方案,在执行过程中又缺乏相关产品、交互设计等人员的沟通,大多是在自己的思路贯彻下进行开发,久而久之,我们习惯于信任自己的观点、在自己的视角看问题,对于挑战总是百般地“据理”力争。我们需要更多提升的是,如何在对方的视角看问题、如何在用户的视角看问题。

四、良好的开发习惯 开发习惯是养成的,一旦有不好的习惯,对于将来去修正带来的将是很大的麻烦,培养良好的开发习惯一定要从起步时做起,例如:写代码之前先分析、先写文档、先写注释等等。

最后希望大家通过自己的努力与学习,都能成为一名能力全栈的web前端工程师。

web前端学习路线(含20个真实web开发项目集合)的更多相关文章

  1. (纯干货)最新WEB前端学习路线汇总初学者必看

    Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...

  2. web前端学习路线与书籍推荐

    什么是web前端? 在以前,通俗的讲是网页制作,在现在,哼哼,可以参考这篇文章 http://tieba.baidu.com/p/4817153404 那么如果高效优雅的学习web呢? 注:以下纯属个 ...

  3. web前端学习路线和步骤

    H5+全栈工程师  (学习下列技术可以加QQ: 1416 7596 61)第一阶段:初级入门阶段基本功 1.HTML入门 Windows概述.浏览器概述.HTML简介.HTML标签详解.前端开发工具概 ...

  4. 这绝对是有史以来最详细的web前端学习路线

    定要善用开发者工具.firefox的firebug和Chrome的F12都是很好的选择,用好了这个必会发现他带给你的帮助比看一本书更多.你把firebug摸透了你还担心对DOM理解不够?考虑到未来,h ...

  5. web前端学习路线推荐(讲的很细致)

    前端要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML是内容层,它的目的是表示一个HTML标签在页面里是个什么角色. CSS是样式层,它的目的是表示一块 ...

  6. Web前端学习路线

    第一阶段: HTML+CSS:HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  7. web前端学习路线:HTML5教程之前端模块化开发

    1. 命名冲突 首先从一个简单的习惯开始. 由于以前一直做 JavaEE 开发的缘故,在 JavaScript 开发中,我已经习惯将项目中的一些通用功能抽象出来,形成一个个的独立函数,以便于实现代码复 ...

  8. 漫谈WEB前端学习路线

  9. web前端学习路线(干货)

随机推荐

  1. VMware Tools的简易安装---解决Ubuntu 14.10不能满屏显示问题

    由于使用的VMware WorkStation是中文破解版,安装时又是简易安装,因此VMware Tools并没有安装上,导致Ubuntu 14.10在VMware中装上之后,并不能满屏显示,如图1所 ...

  2. jquery 中substring,substr,split的用法

    substring 方法 返回位于 String 对象中指定位置的子字符串. strVariable.substring(start, end) 参数 start 指明子字符串的起始位置,该索引从 0 ...

  3. JAVA 静态代码块

    特点:随着类的加载而执行,并且只会执行一次,并且还优先于主函数.作用,用于给类进行初始化 /* 静态代码块 格式: static{ 静态代码块中的执行语句 } 特点:随着类的加载而执行,并且只会执行一 ...

  4. 论文笔记(4):Fully Convolutional Networks for Semantic Segmentation

    一.FCN中的CNN 首先回顾CNN测试图片类别的过程,如下图: 主要由卷积,pool与全连接构成,这里把卷积与pool都看作图中绿色的convolution,全连接为图中蓝色的fully conne ...

  5. C++题解:Matrix Power Series ——矩阵套矩阵的矩阵加速

    Matrix Power Series r时间限制: 1 Sec 内存限制: 512 MB 题目描述 给定矩阵A,求矩阵S=A^1+A^2+--+A^k,输出矩阵,S矩阵中每个元都要模m. 数据范围: ...

  6. Django(十)COOKIE和session

    https://www.cnblogs.com/haiyan123/p/7763169.html from django.shortcuts import render,redirect # Crea ...

  7. linux下查看项目端口号,杀掉对应端口号的方法

    查看端口号:netstat -anp 结束端口号:sudo iptables -A INPUT -p tcp --dport 8012 -j DROP"

  8. Python小白学习之路(二)—【Pycharm安装与配置】【创建项目】【运算符】【数据类型】

    写在前面: 第二天的学习,感觉比昨天学习相对轻松一些,但是对于我这个编程语言功底很弱的人来说,还是稍稍微有些.....哈尔滨的天气一天天冷了下来,还飘着小雨,不过还是挺有意境的.充实而又忙碌的生活,让 ...

  9. openshift 入门 部署 openshift-origin-server-v3.7.0

    OpenShift是一个基于容器技术的云平台,这里的容器技术指的就是docker和kubernetes. Openshift 错误解决 错误信息 failed to run Kubelet: fail ...

  10. 2017 NWERC

    2017 NWERC Problem A. Ascending Photo 题目描述:给出一个序列,将其分成\(m\)份(不需要均等),使得将这\(m\)份重新排列后构成的是不下降序列,输出最小的\( ...