百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术教程 > 正文

2021年最新H5网页开发前端课程目录介绍

csdh11 2025-02-26 11:42 28 浏览

第一阶段:WEB网页基础

1 HTML5+CSS3基础入门

课程内容

熟悉HTML5入门基本内容(代码文件、基本结构、注释、编程问题规范、基本标签等);掌握CSS3的基础入门知识;

项目实战

京东登录注册案例(HTML+CSS) 登录界面指的是需要提供帐号密码验证的界面,有 控制用户权限、记录用户行为,保护操作安全的作 用。登录界面是所有在线系统的入口。

2 HTML5+CSS3进阶

课程内容

掌握继承与优先级;选择器、盒子模型、布局样式等使用方法;能够 进行合理的网页布局。

项目实战

个人博客(HTML5+CSS3) 个人博客是学员涉足前端领域的第一个项目,运用 前端基础知识,培养项目思维,在入学2周内搭建 属于自己的个人信息分享平台。

3 Photoshop

课程内容

采用商业案例来学习Photoshop使用,掌握Photoshop基本操作;能 够独立的进行网页切图。

项目实战

企业网站

(HTML5+CSS3+Photoshop+PxCook) 企业网站作为一家公司的互联网名片,是每家企业必备。强化学员对HTML+CSS+PS(切图)、各种布局等初期所学全部知识的综合应用,由于是第一个企业级项目,着重熟悉项目开发流程和培养使用HTML+CSS遇到问题时的分析和调试能力。

第二阶段:WEB编程基础

1 JavaScript基础

课程内容

了解最前沿JavaScript知识。掌握JS基础基本语法和基本语句以及ES6&ES7新特性,培养编程逻辑思维,实现网页的动态交互。

2 BOM+DOM编程

课程内容

认识和了解BOM和DOM模型; 掌握window、 location、 history、 navigator、document、 Form、Table等对象的使用;掌握事件处 理和DOM节点。理解BOM和DOM模型:掌握各浏览器API的使用、熟练操作元素节点理解网站事件类型与机制

项目实战

案例实践-H5音乐播放器、H5小游戏 (HTML5+CSS3+Javascript) 通过游戏应用开发,培养学员开发兴趣和参与感, 强化Javascript基础、DOM操作和事件机制在实际 场景的应用。

3 JavaScript交互及动画效果

课程内容

掌握运动框架的封装(匀速运动 缓冲运动 多物体运动) 分享到案例 右侧边栏滚动案例 透明度运动 轮播效果案例

项目实战

企业网站交互进阶(HTML5+CSS3+JavaScript) 掌握动画原理,利用原生JS技术编写动画交互效果 实现企业站的轮播,选项卡,楼层跳转等常规功能

4 jQuery+交互及动画 +jQuery优质插件

课程内容

认识jQuery;熟悉选择器;属性与样式; jQuery基本DOM操作;事件处理;文档处理;数组和对象操作。学会使用jQuery和JavaScript 和DOM编程的动画效果制作。 掌握jQuery生态圈的流行框架使用; 培养学员利用前端工具解决开发过程中问题的能力。

项目实战

案例实践-楼层跳动&轮播&表单验证(HTML5+ CSS3+jQuery)jQuery的流行得益于他庞大的插件 生态圈,掌握jQuery插件的使用,将是前端开发者 网站开发的利器。

5 版本控制工具SVN&GIT

课程内容

掌握SVN/GIT版本控制工具来维护项目的整个蓝图;熟练使用github 来管理云端代码仓库,快速项目组成员多人协作。

6 jQuery EasyUI

课程内容

熟悉jQueryEasyUI框架环境搭建, 掌握EasyUI常用插件, 使用Easy UI快速搭建后台

项目实战

电子购物网站(HTML5+CSS3+jQuery +EasyUI)通过本阶段的学习,具备常见动画需求 的开发能力常用插件的使用及开发;逐步培养良好 的编程习惯强化企业项目开发流程,培养团队协作能力。


第三阶段:响应式网站与项目自动化开发

1 HTML5、CSS3高级进阶

课程内容

掌握HTML5时代多媒体、Web存储技术及基于浏览器的(LBS)地理定位技术,熟悉基于高德地图、百度地图等地图API的应用开发;介 绍了H5图形技术SVG和Canvas;能够动手编写图形报表和使用百度 echarts地图API的能力。掌握CSS3新选择器, 响应式原理及CSS3媒体查询,移动端流行的伸缩布局,Web字体、渐变、过渡动画等技 术使用动画库实现基于网页的酷炫动画效果。

项目实战

H5动效简历/H5原生移动商城(HTM L5+CSS3+Swiper+动画框架)H5动效简历是每 一

个H5er的个性化名片,H5原生移动商城和适配 调试是面向前端是时代的必须技术。

2 Bootstrap4

课程内容

掌握来自Twitter工程师开发的目前流行度很高的前端响应式框架, 包括内置样式、组件和JavaScript插件;掌握基于Bootstrap 打造的电影主题页设计。

项目实战

电影主题页设计 (HTML5+CSS3+Bootstrap) 快速打造能够适应多端的信息展示网站

3 前端依赖管理+CSS预处理 语言(Less+Sass)

课程内容

熟练使用bower来管理前端库,达到一个命令搞定所有项目依赖。

掌握基于CSS的预处理框架Less/Sass,以最简单的代码实现复杂 样式;目前主流的前端框架都是基于css预处理语言搭建,学会后 具备Bootstrap等框架的阅读和使用能力。

项目实战

响应式股票交易平台(Bootstrap4+Sa ss+PHP+Mysql+GIT)通过本阶段学习,通过Boot

strap等框架具备响应式开发能力;并使用多种版本 控制工具,进行企业项目的迭代;同时使用预处理 框架完成样式重用和扩展。具备高效快速开发企业 项目的能力。

4 Grunt/Gulp自动化构建工具

课程内容

了解前端自动化构建工具的原理;掌握基于Node平台的Grunt和Gulp 两大自动化构建工具。

5 Mysql

课程内容

了解Mysql背景,快速搭建Mysql环境,熟悉Sql基础语法,实现对数据 的CRUD操作

项目实战

响应式股票交易平台(Bootstrap4+Sa ss+PHP+Mysql+GIT)通过本阶段学习,通过Boot

strap等框架具备响应式开发能力;并使用多种版本 控制工具,进行企业项目的迭代;同时使用预处理 框架完成样式重用和扩展。具备高效快速开发企业项目的能力


第四阶段:Web高级编程与框架原理

1 JavaScript高级编程

课程内容

掌握jJavaScript面向对象思想;原型设计原理及使用。了解 JavaScript程序的编译原理;掌握递归、惰性载入、匿名、闭包及 回调等高级函数的使用。掌握ES6前沿新特性。

2 jQuery插件开发

课程内容

学习插件开发模式,并自己动手实现动态表格查询和表单验证等插件。

案例实践

原生表单验证插件(HTML5+CSS3+ ES6)能够通过面向对象思想开发jQuery插件,学

习实践JS设计模式,具备初级JS框架的编写能力。

3 NodeJS

课程内容

掌握Node服务端编程技术,Expres搭建服务器,基于Express框架编写 后端代码,实现前端和后端全栈开发

4 WebSocket

课程内容

掌握掌握HTTP协议、客户端数据传输方式,掌握WebSocket 在 HTML5 领域的应用场景,用于实现客户端和服务器的长链接。

案例实战

在线聊天室 (HTML5+CSS3+JS+WebSocket) 快速打造能够多人在线聊天的聊天室案例。

5 MVVM架构源码解析

课程内容

掌握MVC、MVP和MVVM架构的演变历史,掌握分层开发的思想,了 解双向绑定原理,实现基于面向对象方式实现一个基于MVVM架构的 minVue框架。

案例实践

miniVue框架(面向对象编程) 动手打造第一款属于自己的前端主流框架。


第五阶段:VUE全家桶与多端项目管理

1 VUE2-VUE3

课程内容

掌握Vue2框架的环境搭建,指令,表达式,计算属性、侦听器、生命 周期和组件开发,掌握主流的VUE2组件高阶、消息通讯,熟悉Vant、 iView、MintUI移动端框架,使用Vue-cli来搭建工程和开发Vue项目。

2 ElementUI+ Koa2(Node.js)+Mysql

课程内容

熟练使用基于Vue2的饿了么前端视图框架ElementUI,高效打造大型 复杂的用户界面。Koa是Express 原班人马打造 更小、更健壮、更富 有表现力Node框架,使用Koa2打开更前沿的后台开发模式,使用甲 骨文公司的Mysql关系数据库来管理更为大型并发的数据。

项目实战

大型超市管理系统、外卖后台管理系统 (ElementUI+Koa2+Mysql+GIT) 通过最热门的Node+Koa2+Mysql开发模式独立完成网站开发 通过NPM生态圈通过分享和实践编码进行自我提升 成为一名真正的全栈工程师。

3 TypeScript

课程内容

TypeScript是一种由微软开发的自由和开源的编程语言。它是 JavaScript的一个超集,而且本质上向这个语言添加了可选的静态 类型和基于类的面向对象编程

4 webpack模块加载器 &打包工具

课程内容

掌握最前沿模块化打包工具,形成组件化开发思想,极大简化项目开 发的成本。

项目实战

外卖APP、源码音乐App (TS+Vue+Vuex+Vant+axios+GIT) 熟练掌握Vue全家桶项目架构。

5 uniapp/Taro微信小程序

课程内容

微信小程序作为引爆H5时代的标识技术,通过学习了解视图层、逻 辑 层相关知识,深入小程序框架和组件的使用。uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到 iOS、Android、H5、小程序等多个平台。Taro是来自京东凹凸实 验室的多端统一开发框架Taro,可以让你使用一套代码打通WebApp、 微信小程序、支付宝小程序、百度智能小程序、字节跳动小程序等。

项目实战

源码电影小程序/四海香美食小程序 (WXML + WXSS + JS + 豆瓣开放接口API)通过

本阶段学习,具备微信、支付宝小程序、百度智能 小程序和字节跳动小程序的开发能力。


第六阶段:React移动混合式开发

1 React

课程内容

掌握来自Facebook工程师开发的流行前端框架-ReactJs;熟练使 用ReactJs基本语法、声明周期、React-Router及基于ES6的 React组件开发;掌握React Redux架构在实际项目中的应用。掌 握基于ReactJS衍生出来的本地化跨平台框架;

项目实战

源码房产App、源码电影App (TS+React+Redux+Webpack+Antd-mobile+ GIT)熟练掌握React全家桶项目架构

2 React Native/Flutter

课程内容

熟练搭建ReactNative环境、掌握本地化布局和常见组件。 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高 质量的原生用户界面(原生应用)。 Flutter可以与现有的代码一起 工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并 且Flutter是完全免费、开源的。

项目实战

源码生活APP(ReactNative/Flutter +AntD+DVA+高德地图API)通过本阶段学习,具

备与移动端开发人员的合作完成低成本、高性能、 高健壮的App应用的能力。


第七阶段:就业与服务

1 就业指导

企业通用面试技巧、知识点面试技巧、模拟面试、项目面试技巧、语言表达练习、互面总结、总结和复习面试题。

2 面试直通车

面试经验交流、面试技术解惑、面试项目跟踪。

3 售后服务

随时随地为同学们提供全方位工作问题解决方案!源码时代是独家具有售后的服务机构!

相关推荐

pdf怎么在线阅读?这几种在线阅读方法看看

pdf怎么在线阅读?我们日常生活中经常使用到pdf文档。这种格式的文档在不同平台和设备上的可移植性,以及保留文档格式和布局的能力都很强。在阅读这种文档的时候,很多人会选择使用在线阅读的方法。在线阅读P...

PDF比对不再眼花缭乱:开源神器diff-pdf助你轻松揪出差异

PDF比对不再眼花缭乱:开源神器diff-pdf助你轻松揪出差异在日常工作和学习中,PDF文件可谓是无处不在。然而,有时我们需要比较两个PDF文件之间的差异,这可不是一件轻松的事情。手动逐页对比简直是...

全网爆火!580页Python编程快速上手,零基础也能轻松学会

Python虽然一向号称新手友好,但对完全零基础的编程小白来讲,总会在很长时间内,都对某些概念似懂非懂,每次拿起书本教程,都要从第一章看起。对于这种迟迟入不了门的情况,给大家推荐一份简单易懂的入门级教...

我的名片能运行Linux和Python,还能玩2048小游戏,成本只要20元

晓查发自凹非寺量子位报道|公众号QbitAI猜猜它是什么?印着姓名、职位和邮箱,看起来是个名片。可是右下角有芯片,看起来又像是个PCB电路板。其实它是一台超迷你的ARM计算机,不仅能够运...

由浅入深学shell,70页shell脚本编程入门,满满干货建议收藏

不会Linux的程序员不是好程序员,不会shell编程就不能说自己会Linux。shell作为Unix第一个脚本语言,结合了延展性和高效的优点,保持独有的编程特色,并不断地优化,使得它能与其他脚本语言...

真工程师:20块钱做了张「名片」,可以跑Linux和Python

机器之心报道参与:思源、杜伟、泽南对于一个工程师来说,如何在一张名片上宣告自己的实力?在上面制造一台完整的计算机说不定是个好主意。最近,美国一名嵌入式系统工程师GeorgeHilliard的名片...

《Linux 命令行大全》.pdf

今天跟大家推荐个Linux命令行教程:《TheLinuxCommandLine》,中文译名:《Linux命令行大全》。该书作者出自自美国一名开发者,兼知名Linux博客LinuxCo...

PDF转换是难题? 搜狗浏览器即开即看

由于PDF文件兼容性相当广泛,越来越多的电子图书、产品说明、公司文告、网络资料、电子邮件选择开始使用这种格式来进行内容的展示,以便给用户更好的再现原稿的细节,但需要下载专用阅读器进行转化才能浏览的问题...

彻底搞懂 Netty 线程模型

点赞再看,养成习惯,微信搜一搜【...

2022通俗易懂Redis的线程模型看完就会

Redis真的是单线程吗?我们一般说Redis是单线程,是指Redis的网络IO和键值对操作是一个线程完成的,这就是Redis对外提供键值存储服务的主要流程。Redis的其他功能,例如持久化、异步删除...

实用C语言编程(第三版)高清PDF

编写C程序不仅仅需要语法正确,最关键的是所编代码应该便于维护和修改。现在有很多介绍C语言的著作,但是本书在这一方面的确与众不同,例如在讨论C中运算优先级时,15种级别被归纳为下面两条原则:需要的...

手拉手教你搭建redis集群(redis cluster)

背景:最近需要使用redis存储数据,但是随着时间的增加,发现原本的单台redis已经不满足要求了,于是就倒腾了一下搭建redistclusterredis集群。好了,话不多说,下面开始展示:...

记录处理登录页面显示: HTTP Error 503. The service is unavailable.

某天一个系统的登录页面无法显示,显示ServiceUnavailableHTTPError503.Theserviceisunavailable,马上登录服务器上查看IIS是否正常。...

黑道圣徒杀出地狱破解版下载 免安装硬盘版

游戏名称:黑道圣徒杀出地狱英文名称:SaintsRow:GatOutofHell游戏类型:动作冒险类(ACT)游戏游戏制作:DeepSilverVolition/HighVoltage...

Exchange Server 2019 实战操作指南

...