前端都需要学习什么?_前端需要学习什么-程序员宅基地

技术标签: css  web  前端  编程语言  html  

一、前端是什么?

前端即网站前台部分,也叫前端开发,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。
在这里插入图片描述

(核心技术:HTML、CSS、JavaScript)

核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单,但这里面需要掌握的东西绝对不会少。在进行开发前,需要对这些概念弄清楚、弄明白,这样在开发的过程中才会得心应手。

二、前端都需要学什么(可以分为八个阶段)?

1、第一阶段:

HTML+CSS:

HTML进阶、 CSS进阶、p+CSS布局、HTML+CSS整站开发、

JavaScript基础:

Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效:

常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征:

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

JQuery:基础使用

悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

2、第二阶段:HTML5和移动Web开发

HTML5:

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.

CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、flex布局、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发:

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、手机聚划算页面、手机滚屏。

3、第三阶段:HTTP服务和AJAX编程

WEB服务器基础:

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

AJAX上篇:

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用、会处理简单的GET或者POST请求、

AJAX下篇:

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

本人在职前端开发,如果你也想学习前端开发技术,可以加入我组建的前端学习交流裙:851 231 348 自己根据
多年来的开发经验总结录制的一套web前端精讲视频和学习方法,以及一些前端学习手册,前端面试题,
端开发工具,PDF文档书籍教程,无偿分享给大家。需要的话都可以自行来获取下载。

4、第四阶段:面向对象进阶

面向对象终极篇:

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、ES6中变量的作用域(let ,const(声明变量只读),块级作用域),ES6中函数新特性。

面向对象三大特征:

继承性、多态性、封装性。

面向对象中创建对象的五种方法:

自定义对象 、工厂模式创建对象、构造函数、 混合模式创造对象、JSO格式创建对象。

5、第五阶段:封装一个属于自己的框架

框架封装基础:

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级:

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充:

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

6、第六阶段:模块化组件开发

面向组件编程:

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程:

AMD设计规范、CMD设计规范、RequireJS,LoadJS、淘宝的SeaJS。

7、第七阶段:主流的流行框架

Web开发工作流:

GIT/SVN、Vue-cli脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

前端主流框架:

Vue.js、Angular.js、React.JS、Bootstrap。

常用库:

React.js、Vue.js、JQuery.js。

8、第八阶段:Node.js全栈开发:

快速入门:

Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程,非阻塞I/O、模块概念,模块管理工具、开发流程,调试,测试。

核心模块和对象:

全局对象global,process,console,util、事件驱动,事件发射器、加密解密,路径操作,序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO。

Web开发基础:

HTTP协议,请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

快速开发框架:

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

Node.js开发电子商务实战:

需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车,订单结算、在线客服即时通讯模块。

以上就是前端都需要学习什么?的详细内容

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/BOM485480/article/details/107908740

智能推荐

读取HG-S1010测量值 RS485通信 modbus协议 FP7_hg s1010接线-程序员宅基地

文章浏览阅读210次。HG-S1010配有模拟量输出(电压、电流),NPN/PNP输出,也可通过外接通讯模块进行输出。通信模块包括SC-HG1-485模块(RS485接口协议)、SC-HG1-ETC模块(EtherCAT总线)、SC-HG1-C模块(CCLink协议)等。本文介绍连接松下FP7与HG-S1010配RS485通信模块进行通信,通过modbus协议读取HG-S1010当前测量值。主控制器测量值位置在地址H64处,占两个字节。将SC-HG1-485模块与控制器HG-SC101连接,在端子台+、-插入通信用线。_hg s1010接线

关于计算机一级考试的相关整理(巨详细版)-程序员宅基地

文章浏览阅读328次,点赞6次,收藏10次。关于计算机一级考试的局详细版整理

Java 面向对象基础篇【接口、抽象类、实现类之间的关系】-程序员宅基地

文章浏览阅读740次,点赞10次,收藏7次。在面向对象设计中,根据具体需求选择使用接口、抽象类或实现类来组织扩展与维护的代码结构 ···

巧用Superset大数据分析平台搞定各类图表_superset分析hive表-程序员宅基地

文章浏览阅读6.2w次,点赞5次,收藏46次。前言其实大数据图表展示的这类平台有很多,Superset是其中之一,最近有个需求对各类图表展示的开发较多,索性将工作量交给这个平台。介绍Superset的中文翻译是快船,而Superset其实是一个自助式数据分析工具,它的主要目标是简化我们的数据探索分析操作,它的强大之处在于整个过程一气呵成,几乎不用片刻的等待。 部署docker方式(推荐)docker pull amancevice/carav_superset分析hive表

win10安全中心误删文件怎么办?解析恢复与预防策略-程序员宅基地

文章浏览阅读1.3k次,点赞28次,收藏21次。在使用Windows 10的过程中,许多用户依赖于其内置的安全中心来保护电脑免受恶意软件的侵害。然而,有时安全中心的误判可能导致重要文件被错误地删除。当面对这种情况时,了解如何恢复误删的文件并掌握预防措施显得尤为重要。本文将为您详细解析恢复误删文件的多种方法,并为您提供一系列实用的预防策略,以确保您的数据安全。

随便推点

大数据框架版本_你们公司的大数据框架版本-程序员宅基地

文章浏览阅读157次。Hive 3.12Hadoop 3.1.3hbase 2.0.5spark 3.0.0zookeeper 3.5.7flume 1.9.0ranger 2.0.0sqoop 1.4.7_你们公司的大数据框架版本

jvm学习-程序员宅基地

文章浏览阅读126次。Java虚拟机一 java内存区域和内存溢出异常运行时数据区域栈帧是方法运行期的基础数据结构。程序计数器是一块较小的内存空间,它的作用可以看做是当前线程所执行的字节码的行号指示器。字节码解释器工作时就是通过改变这个计数器的值来选取下一条需要执行的字节码指令,分支、循环、跳转、异常处理线程恢复等基础功能都需要依赖这个计数器来完成。Java虚拟机的多线程是通过线程轮流切换并分配处理器执行时间的方式来实现的,在任何一个时刻,一个处理器(对于多核处理器来说是一个内核)只会执行一条线程中的指令。因此,为

vue x 兼容iphone_vue 项目对iphoneX底部兼容处理-程序员宅基地

文章浏览阅读379次。import Vue from 'vue'Vue.directive('isIphoneX', {bind: function (el, binding) {const _local = 'ios'let isIphoneX = falseif (_local === 'ios' && window.screen.height) {isIphoneX = window.screen..._min-height: 89vh;

MyBatis-Plus和SpringBoot的整合_<dependency> <groupid>com.baomidou</groupid> <arti-程序员宅基地

文章浏览阅读2.8k次,点赞2次,收藏4次。简介MyBatis-Plus是一个 MyBatis (opens new window)的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。一、MyBatis-Plus和SpringBoot整合应用1.1 项目依赖在原项目依赖上,加上下面依赖<dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-start_ com.baomidou mybatis-plus-boot-s

解决cURL resource: Resource id #147; cURL error: SSL certificate problem: unable to get local issuer.._requestcoreexception: curl error: ssl certificate -程序员宅基地

文章浏览阅读3.7k次。我这边抛出这个问题是因为我在php后端接口上 调用了阿里云OSS-SDK:"aliyuncs/oss-sdk-php": "~2.0"请求删除文件的操作后出现这个错误提示的:RequestCoreException: cURL resource: Resource id #147; cURL error: SSL certificate problem: unable to get lo..._requestcoreexception: curl error: ssl certificate problem: unable to get loc

AI绘画工具有哪些?-程序员宅基地

文章浏览阅读1.1k次,点赞40次,收藏6次。NVIDIA GauGAN:NVIDIA GauGAN是一款基于生成对抗网络(GAN)的AI绘画工具,它可以将简单的草图快速转换为逼真的图像,帮助用户实现快速的绘画创作。DeepDream:DeepDream是谷歌开发的一种图像处理算法,它基于卷积神经网络,可以将图像中的模式和特征进行增强和变形,产生具有梦幻般效果的图像。ArtBreeder:ArtBreeder是一个基于神经网络的在线创作平台,它可以通过混合不同图像的特征生成新的艺术作品,帮助用户进行创作和探索。

推荐文章

热门文章

相关标签