准备工具;vscode(轻量软件;推荐入门使用) WebStorm;较吃内存;卡;推荐项目使用; sublime(没用过;嘿嘿;;)
前提准备;学习git,学会代码上交github
https://mp.weixin.QQ.com/s/Bf7uVhGiu47uOELjmC5uXQ
HTML 超文本标记语言;Hyper Text Markup Language;;能够帮助我们在网页中书写内容。
----目标;大致掌握经常使用的标签;多去网页按f12查看;;记住常用的head配置;理解HTML书写标准,记住主要常用标签 — div img a p span i h1 h2 h3 h4 h5 h6 ui li table tr td input button body em
----学习时长;7天
推荐视频;https://www.bilibili.com/video/BV14J4114768
CSS 层叠样式表 (Cascading Style Sheets) 它是一种用来表现HTML;标准通用标记语言的一个应用;或XML;标准通用标记语言的一个子集;等文件样式的计算机语言。能够丰富页面;丰富的文档样式外观;以及设置文本和背景属性的能力;增加网页的展示能力。
-----目标;记住常用的属性;背单词;;能够结合HTML做出简洁的的网页。
----学习时长;10天
推荐视频;https://www.bilibili.com/video/BV14J4114768 (同上)
推荐网站;https://www.sojson.com/web/panel.html — 配色网站
https://www.iconfont.cn/ — 阿里巴巴图标库;以后找ui上这里找
HTML5 CSS3—最新的前端页面技术;需要掌握新的html标签 video audio canvas;这个简单学习;;然后是BootStrap开源工具包–教你一步快速构建网页;
----目标;学会使用音视频标签;学会css动画和3d效果;简单掌握BootStrap基础用法;会玩就行;;养成使用官方文档的习惯
----学习时长;7天
推荐视频;https://www.bilibili.com/video/BV14J4114768 (同上)
推荐网站;https://v3.bootcss.com/ — BootStrap中文网
JAVASCRIPT: 脚本语言;解释语言;临时编译;能够实现页面与用户的交互;实现信息的提交与后端的接轨。
推荐网址;https://www.bilibili.com/video/BV1ux411d75J — js基础
https://www.bilibili.com/video/BV1k4411w7sV — js DOM BOM
建议上面两个视频一起观看
https://www.bilibili.com/video/BV1pt411H7D6/ — Jquery
https://www.bilibili.com/video/BV1xW411x7sw — ES6
http://www.axios-js.com/ — axios官网
https://developer.Mozilla.org/zh-CN/ — MDN官网;这里有所有的JS知识;平时百度js问题时可以上这里看看。
I;编程语言基础知识点 ;; ---- 全面掌握
----目标;知道JS数据类型 函数 判断 for循环等基础逻辑方法的使用以及对JS的对象;数组;函数有了解;常用数组方法;切数组;截取数组方法;为对象添加数据方法;修改对象方法;理解浅拷贝和深拷贝;理解通过遍历树比较对象的方法(数据结构的树这一节知识点);…
----时长;;20天;
II;JS DOM(文档对象模型) BOM(浏览器对象模型) 实现与页面元素的正式交互;----简单掌握;7天;
目标;理解DOM树;学会使用js指令获取页面元素;了解常用的window对象中的属性和方法;理解js中的事件;知道如何与用户交互;初步理解用户体验的重要性。
III;----到这里建议去找一些你认为OK的网页或网页的一部分去临摹;找感觉;搭得多了;就老油条起来了
IV;Jquery:这是一个JS的库;比原生的JS写起来要来得方便;建议简单了解;记住核心方法比如选择器;常用的API;收发请求的方法等。;这玩意比较老套了;个人感觉没有深入学习的必要;
----简单掌握;5天;
V: 理解什么是JSON ;半天;
VI;AJAX;和后端接轨的第一步;掌握原理即可----;需要接口可以问我要;我可以写一些简易的后端小服务器;
----目标;掌握如何向后端发送请求(不要使用form表单发送;这个过时了);并尝试使用axios来简化你的请求代码。
----时长;;3天;
VII: 理解异步函数与同步函数-------;5天;
目标;理解回调函数原理;掌握ES6 Promise 和ES7 Async await 和 生成器(Generator)
VIII;ES6 最新的js技术;包含语法糖能更加方便你书写业务逻辑 (ES7 ES8 ES9 ES2020学有余力的可以康康)
----目标;掌握新变量名 let const 箭头函数; 数组新方法; 对象新方法; 模板字符串; 新数据类型Symbol Map Set ;Class语法…
----时长 20天
IX;js原型链----学有余力的同学建议看看。(这一块我都妹彻底吃透)
友情链接;https://cn.vuejs.org/ — 国人开发的框架;文档相对会友好一些和好理解一些
vue;js 开始正式接轨项目 – 使用vue-cli来快速打包 — 建议网课;15天;实战视频自己找;网站实战视频非常多;挑一个自己喜欢的写就可以了
I;了解NPM的使用方法;包括装包;npm i;;卸载包;npm uninstall;;跑项目;npm run xxx;;分清楚工具包(dependence)和开发依赖包;devDependence;的区别;了解打包的基本原理
II;了解一些常用的工具包以及其使用方法 SCSS LESS axios element-ui …
III: 理解vue-cli项目结构;熟练运用;理解 .vue文件的使用 ,能够写出数个有逻辑有业务的页面;建议学习完下面的node之后再写;
友情链接;https://element.eleme.cn/#/zh-CN — element-ui官网
https://less.bootcss.com/ — less官网
http://www.axios-js.com/ — axios官网
nodejs的学习 ---- 算是一个后端编程—建议网课(25天)
I: 理解js在node端与浏览器端的不同
II: 学习基础语法;学会编写路由;学会i/o读写文件
III;掌握框架 express 或 koa
IV: 接轨数据库;掌握mysql或mongodb的基础语法;以及nodejs调用数据库的过程
V: 处理前端的各种请求;包括对各种类型文件的请求(图片视频文件…);理解多线程。
VI;websocket实时连接;理解计网的握手机制
友情链接;http://nodejs.cn/ — nodejs官网
推荐视频;https://www.bilibili.com/video/BV1Ns411N7HU
学习webpack正式开始理解前端项目打包的原理(25天)
I;webpack5个核心概念 Entry Output Loader Plugin Mode;记住常用的依赖包
II;配置devServer提高开发效率
III:深化用户体验;学会 提高性能;缓存;预处理;懒加载;PMA,多进程打包…
推荐视频;https://www.bilibili.com/video/BV1e7411j7T5
最受欢迎的框架 React
I:理解React核心概念;虚拟DOM;理解树结构;建议学习数据结构;
II;利用webpack的知识自己手撸一个简单的React项目;理解React的基本机制
III;开始使用jsx文件简化项目
IV;理解ES6的class;对象继承;组件;组件传值;生命周期;路由;数据请求
V;React一些脚手架的使用— create-react-app next.js create-next-app
VI:React Native的使用-----------
VII;使用react编写小程序
推荐视频;https://www.bilibili.com/video/BV11t411S7iG
https://www.bilibili.com/video/BV1Et41137Sb
Js的超集;TypeScript
