【前端学习路线】(超详细版本)

先附上学习路线图:前端学习路线

第一阶段:前端入门(html+css)

前端最基本的知识,需要先将这些内容融汇贯通,学习后面内容才会不吃力。学习完可以做几个静态页练习一下。

推荐视频学习链接:

  黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

第二阶段:JavaScript

1.JavaScript基础知识

2.JavaScript 进阶(WebAPI/Dom Bom)

推荐视频学习链接:

    JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

第三阶段:核心技术进阶

1.Ajax扩展(动态数据的实现)

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。

推荐视频学习链接:

      【尚硅谷】3小时Ajax入门到精通_哔哩哔哩_bilibili

2.promise语法

推荐视频学习链接:

      尚硅谷Web前端Promise教程从入门到精通_哔哩哔哩_bilibili

3.es6语法

推荐视频学习链接:

      尚硅谷Web前端ES6教程,涵盖ES6-ES11_哔哩哔哩_bilibili

4.Node.js入门及应用

学习npm、nrm、yarn;内置模块、路由、express、MongoDB、身份认证、koa、MySQL、Socket、Mocha等知识点。

 推荐视频学习链接:

     黑马程序员Node.js全套入门教程,nodejs新教程含es6模块化+npm+express+webpack+promise等_Nodejs实战案例详解_哔哩哔哩_bilibili

尚硅谷Node.js零基础视频教程,nodejs新手到高手_哔哩哔哩_bilibili

第四阶段:框架学习(vue/react)

1.vue2.0+vue3.0 知识点+项目

Vue.js致力于构建数据驱动的web应用开发框架,以简洁化,轻量级,数据驱动,模块友好等优势深受企业以及前端开发者的喜爱,成为前端开发人员必备的技能。

   推荐视频学习链接:

   尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

2.ui组件库使用

直接看文档可快速上手

elementui对应vue2

Element - The world's most popular Vue UI framework

elementplus对应vue3

https://element-plus.org/zh-CN/guide/installation.html

第五阶段:微信小程序+app开发

 推荐视频学习链接:

    黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)_哔哩哔哩_bilibili

第六:建议学习的工具

1.代码编辑器:vscode(使用起来方便,有很多插件可以使用)

2.开发app:可以使用uniapp,操作与vscode类似,可一键发布多平台

3.代码管理工具:github或者gitee  (如果可以科学上网建议使用github)

4.学习完一定要多进行实战!!!例如开发一个自己的博客!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/34957.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Vue生成类似于打卡页面

数据表格 <el-table :data"tableData" border height"calc(100vh - 240px)" :cell-style"cellFun"><el-table-column label"姓名" show-overflow-tooltip prop"name" align"center"/><el-table-co…

JVM学习《垃圾回收算法和垃圾回收器》

目录 1.垃圾回收算法 1.1 标记-清除算法 1.2 复制算法 1.3 标记-整理算法 1.4 分代收集算法 2.垃圾回收器 2.1 熟悉一下垃圾回收的一些名词 2.2 垃圾回收器有哪些&#xff1f; 2.3 Serial收集器 2.4 Parallel Scavenge收集器 2.5 ParNew收集器 2.6 CMS收集器 1.垃圾…

波特图方法

在电路设计中&#xff0c;波特图为最常用的稳定性余量判断方法&#xff0c;波特图的根源是如何来的&#xff0c;却鲜有人知。 本章节串联了奈奎斯特和波特图的渊源&#xff0c;给出了其对应关系和波特图相应的稳定性余量。 理论贯通&#xff0c;不在于精确绘…

【Java】2、集合框架 JCF

目录 CollectionListArrayList扩容机制System.arraycopy() 和 Arrays.copyOf()方法 LinkedList Set MapHashMap *重点&#xff1a; 底层机制&#xff08;源码&#xff09;应用场景 好处&#xff1a; 数组&#xff08;长度不可改&#xff0c;同一类型&#xff0c;增删不便&#…

P5461 赦免战俘

P5461 赦免战俘 #include <iostream> using namespace std; #include <algorithm> #include <vector> #include <cmath> void pardon(auto & matrix,int x,int y,int size){if(size 1) return;int half size / 2;for(int i x;i < x half;i …

GoTrackIt应用指南:共享单车时空轨迹可视化

GoTrackIt平台集成了对 Kepler.gl 可视化工具的部分功能进行了封装&#xff0c;通过引入 KeplerVis 类&#xff0c;显著简化了地理空间数据分析与展示的过程。利用这一类&#xff0c;开发者和数据分析师能够在网页端快速实现复杂地理数据的动态可视化&#xff0c;而无需深入掌握…

LeetCode 力扣 热题 100道(十五)搜索插入位置(C++)

给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 代码如下所示&#xff1a; class Solution { public:int searchIns…

JS中递归函数的理解及展开运算符在递归种的运用理解

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>递归函数</title> </head> <body> <script>const list ["你好", "吃饭了吗",["好",[[&qu…

vue中.sync修饰符的用法

一、什么是.sync修饰符 在Vue.js中&#xff0c;.sync 修饰符用于创建一个双向绑定的 prop。它使子组件能够更新父组件的 prop 值&#xff0c;实现父子组件之间的双向数据同步。具体来说&#xff0c;.sync 修饰符主要有以下几个功能&#xff1a; 简化双向绑定&#xff1a; 使用…

element Plus中 el-table表头宽度自适应,不换行

在工作中&#xff0c;使用el-table表格进行开发后&#xff0c;遇到了小屏幕显示器上显示表头文字会出现换行展示&#xff0c;比较影响美观&#xff0c;因此需要让表头的宽度变为不换行&#xff0c;且由内容自动撑开。 以下是作为工作记录&#xff0c;用于demo演示教程 先贴个…

rockit 学习、开发笔记(五)(VDEC)

前言 后面由于业务需求有rockit编解码的功能开发&#xff0c;这里我是第一次接触编解码&#xff0c;所以后续有些概念表述可能不太清楚&#xff0c;请各位多多包涵。 先来说一下解码模块的使用&#xff0c;rockit中的解码模块是VDEC&#xff0c;如果想要开发rockit的vdec可能…

unicloud微信小程序云端一体项目DEMO

最近应客户需求&#xff0c;做了一个产品展示的云开发小程序&#xff0c;从了解云开发到应用到实际项目的产品demo&#xff0c;希望大家能从中获取到对自己有用的东西。 说下心得体会吧&#xff0c;一般小项目用这种云开发确实会减少很多开发成本&#xff0c;人力成本&#xf…

图的创建和基础操作(数据结构实验作业)

上面是我的实验作业要求&#xff1a;&#xff08;看不到的同学&#xff0c;移步&#xff1a;https://gitee.com/young-lion/picture-bed/raw/master/202412051939715.png&#xff09; 下面的代码使用的是go语言&#xff1a; package mainimport ("fmt" )// 访问标记…

flex布局容易忽略的角色作用

目录 清除浮动 作用于行内元素 flex-basis宽度 案例一&#xff1a; 案例二&#xff1a; 案例三&#xff1a; flex-grow设置权重 案例一&#xff1a; 案例二&#xff1a; 简写flex-grow:1 0 auto; flex作为一维布局,行和列的使用&#xff0c;忽略的小角色&#xff0c;大…

javascript-svg-在圆环上拖动并选中区域

目录 问题描述解决思路代码结构 问题描述 假设我某个页面上使用了<svg>&#xff0c;其中包括一个<circle>。我希望实现的是&#xff1a;在circle上点击某个位置后&#xff0c;拖动&#xff0c;出现圆弧状阴影。实现效果为&#xff1a; 解决思路 要实现这个效果…

Android 使用 Canvas 和 Paint 实现圆形图片

学习笔记 效果展示: 全部代码: public class YuanActivity extends AppCompatActivity {private ActivityYuanBinding binding;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 通过 DataBinding 获取布局文件binding …

python怎么将字母大写

Python中有三种将字母转换为大写的方法&#xff1a;upper()、capitalize()、title()。 下面通过实例给大家介绍具体用法&#xff1a; str "www.php.com" print(str.upper()) # 把所有字符中的小写字母转换成大写字母 print(str.lower()) # 把所有字…

鸿蒙Next星河版高级用例之网络请求和自适应布局以及响应式布局

目录&#xff1a; 1、发起网络请求的两种方式第一种使用httpRequest发送http的请求&#xff1a;1.1、在进行网络请求前&#xff0c;您需要在module.json5文件中申明网络访问权限1.2、GET 请求1.3、POST请求1.4、处理响应的结果第二种使用axios发送http的请求&#xff1a;1.1、在…

ClouderaManager 集群搭建

前提&#xff1a;服务器之前做过域名映射、免密登录 ClouderaManager 集群 1. 组件分布规划 服务器服务器h1zk、hdfs(dn)、yarn(nm)、spark、kafka、flumeh2hdfs(nn-standy)、yarn(rm-active)、sparkh3hdfs(nn-active)、yarn(rm-standy)、hive、sparkh4zk、hdfs(dn)、yarn(n…

如何获取谷歌新闻API密钥?

在信息获取和新闻传播领域&#xff0c;快速获取最新的新闻动态至关重要。谷歌新闻API为开发者提供了强大的工具&#xff0c;能够方便地集成全球各类新闻内容。通过使用该API&#xff0c;开发者可以实现对新闻的实时访问和管理&#xff0c;为用户提供丰富的信息服务。本文将指导…