前端学习路线,带你入门程序猿

news2024/12/24 21:51:59

相信很多想学前端的小伙伴是非常迷茫的
前端知识体系很多,不知从何学起
而且框架也有不少,不知道该如何下手
很多学习前端的小伙伴都没有一个很好的学习路线图,简直可以说是看见啥学啥
而且自己在学习的时候非常吃力,感觉总是学不会,有时候前面学完后面忘都已成常态

我们在学习的时候一定要有几个重点

  1. 学习时间一定要充足,不能学一阵玩一阵,断断续续往往反反
  2. 要有一个良好的学习路线图,不能看见啥学啥
  3. 选择一套好的教学体系课程视频(不能只是文字知识)
  4. 要有配套的项目,不能只学理论,不做实战

先放一张前端路线图

在这里插入图片描述

静态实现员

这说的就是刚刚入门我们就需要学会的,可以根据一张图来进行实现静态页面(我们需要自己和PS切图)

了解互联网基本原理 -> HTML -> CSS入门 -> CSS高级 -> HTML5 -> CSS3 -> CSS3动画 -> Bootstrap ->页面编写 -> DOM、BOM编程-> PS切图 -> 完整静态页面实现(简称实战)

我们想要学习前端首先需要会搭建页面,只有将页面搭建完美才可以
有的人可能会说了,我们是不是必须将页面百分百还原呢?
这是不可能的,页面百分百还原根本不存在,没有一个人可以根据设计图做到一点都不到达到百分百的
有的人还会问为什么我们还要学习使用PS切图呢?
因为有的时候我们需要自己在设计稿上面将图片切下来放到页面中使用

动态实现员

这说的是我们可以使用其他属性来进行对属性进行操作了

JavaScript基础 -> JavaScript操作DOM、BOM -> JavaScript高级进阶 -> jQuery -> HTML5进阶 -> CSS3进阶 -> 响应式页面实现 -> 移动Web端 -> JavaScript面向对象 -> JavaScript异步编程 ->ECMAScript新特性 -> 了解服务器 -> Ajax -> Typescript入门 ->Typescript高级 -> 函数式编程规范 -> JavaScript性能优化 -> canvas动画

这时候学完有的人就开始蠢蠢欲动了,说自己学完这些就能够拿到高薪了
其实非也
学完这些只是说已经入门了,找工作可能会找到,但是高薪就别想了
原生写法开发速度是非常慢的,每个公司都是追求高效率的,没有一个公司会让你自己慢慢的去进行揣摩各种步骤

独立作战员

这就是我们可以找工作的利刃了

这时候我们需要将一些依赖的工具安装好:

nodeJs. 官网地址:https://nodejs.org/en/

右上角可以切换中英文哦
我们点击DOWNLOADS/下载

在这里插入图片描述

根据电脑系统去选择安装相应版本

图片

我选择mac版本点击图标下载(一定要选择长期维护版哦,尝鲜版没有那么稳定)

下载完之后。傻瓜式安装即可,我这里安装了就不做掩饰了

JavaScript框架(BackboneJS、Polymer、Aurelia等等)-> ES6新特性(ES2016-2020都得学 JavaScript官方每年6月份都会进行更新的,要进行不停地学习哦)-> 模块化开发 -> node.js -> MySQL -> Webpack -> Vue.js(了解Vue 、Vue基础、 Vue组件、 VueAPI、 Devtloos、 Vue脚手架->Vue CLI 、Vue Loader 、Vue Router 、Vuex、服务端渲染等) -> Sass、Less语法和使用 ->微信小程序 -> uni-app -> React.js ->Angular.js ->前端UI框架(要根据学习哪个阶段学习对应得UI框架) -> Git(或Svn) ->Web移动端 -> 原生App开发

这时候有人会说了 为啥我们需要学这么多?
其实还有许多没有学到呢,后面还有的,只是学完这些你就可以出去找工作了
有人会问前端UI框架我们学哪些呢?
那我来做几个介绍吧

Vue:elementUI、vant、iView、vuetify等(其余可以百度搜到)
React:Ant、Material-UI、Semantic UI、React-Bootstrap等(其余可以百度搜到)
其他几个都可以自行在百度搜索对应得UI框架

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

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

相关文章

SQLite 学习笔记1 - 简介、下载、安装

SQLite 简介 SQLite是一款非常轻量级的关系数据库系统,支持多数SQL92标准。SQLite 是世界上使用最广泛的数据库引擎。SQLite 内置于所有手机和大多数计算机中,并捆绑在人们每天使用的无数其他应用程序中。 SQLite 是一个由C语音开发的嵌入式库&#xff…

DataGrip汉化

一、关闭DataGrip,下载新的jar包 链接:https://pan.baidu.com/s/1gTHpyMuIME_n8qC9KYbOzA 提取码:ute3 二、把下载的jar包放在lib文件里,把原来自带的jar替换掉 三、打开datagrip

nginx代理故障总结

一、故障现象 今天公司的某个系统文件下载功能失败,报错network error,其他功能正常。 二、故障定位 首先我们检查了公司的网络情况,包括网络路由、防火墙策略、终端安全产品等,均未发现异常。 尝试访问http://X.X.X.X:7002端口&…

uniapp——实现二维码生成+保存二维码图片——基础积累

最近在做二维码推广功能,自从2020年下半年到今天,大概有三年没有用过uniapp了,而且我之前用uniapp开发的程序还比较少,因此很多功能都浪费了很多时间去查资料,现在把功能记录一下。 这里写目录标题 效果图1.根据接口返…

元数据管理平台Datahub0.10.5版本安装部署与导入各种元数据手册

官网文档连接 DataHub Quickstart Guide | DataHub (datahubproject.io) 本文所选择的Python的版本为3.8.16,Docker版本为20.10.0,Datahub为0.10.5版本 python必须为3.7以上的版本。0.10.5不支持以下的版本 如果要使用web上的 添加数据源 直接调用的…

开源分布式存储系统(HDFS、Ceph)架构分析

文章目录 中间控制节点架构-HDFSNameNode节点分析DataNode节点分析SecondNameNode节点分析Client分析 完全无中心架构-CephCeph Monitor分析Ceph OSD分析Ceph Manager分析Ceph Clients分析 小结HDFS优点缺点 Ceph优点缺点 参考 中间控制节点架构-HDFS 以HDFS( Hado…

五、点击切换、滚动切换、键盘切换

简介 通过事件改变当前展示的信息组件&#xff0c;交互的事件有点击上下切换、鼠标轮动上下切换、键盘上下键切换。欢迎访问个人的简历网站预览效果 本章涉及修改与新增的文件&#xff1a;App.vue、public 一、鼠标点击上下箭头切换 <template><div class"a…

Learn Prompt-Prompt 高级技巧:Agent的颠覆性影响

OpenAI联合创始人Andrej Karpathy在一个开发者活动上发表讲话&#xff0c;谈及了他和OpenAI对AI Agents的看法。他将过去开发 AI Agents 的困难与现在依靠新技术工具而带来的新机会进行了对比。Andrej Karpathy 认为普通人、创业者和极客在构建 AI Agents 方面相比 OpenAI 这样…

还有一天活动就开始我定好闹钟准时上线

&#xff08;整理衣服&#xff09;&#xff08;大步流星走上台&#xff09;&#xff08;拿起麦克风&#xff09;&#xff08;激情发言&#xff09;请大家&#xff08;热泪盈眶&#xff09;&#xff08;哽咽&#xff09;关注&#xff08;流泪&#xff09;&#xff08;擦眼泪&…

蓝桥杯打卡Day11

文章目录 最长上升子序列最长上升子序列II 一、最长上升子序列IO链接 本题思路:本题是一关于dp问题中的一个类型是最长上升子序列问题&#xff0c;首先我们将状态表示出来&#xff1a;f[i]表示以a[i]结尾的最大的上升序列。状态计算&#xff08;集合划分&#xff09;&#xf…

如何防盗版软件

有多少公司&#xff0c;至今都无法摆脱被盗版软件支配的恐惧&#xff1f; 其实大多数时候&#xff0c;企业都是被动当了大冤种&#xff0c;因为他们也并不会主动要求员工使用破解软件。实在是架不住有些不懂版权的、心存侥幸的员工私下里使用。只要公司联网&#xff0c;就一定…

猫头虎博主第5️⃣期赠书活动:《Java官方编程手册(第12版·Java 17)套装上下册》

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

JK405R-SOP16录音芯片ic方案的常见问题集锦包含录音长度功耗以及外挂spiflash

目录 问题1 1、KT405R是什么&#xff1f; 具备哪些功能&#xff1f; 有什么特色&#xff1f; 问题2 2、KT405R录音的机制是怎样的&#xff1f; 问题3 3、KT405R的供电电压详细说明&#xff1f;以及功耗控制手段 问题4 4、KT405R支持多段录音&#xff1f;每段时长如何划…

招商信诺人寿基于 Apache Doris 统一 OLAP 技术栈实践

本文导读&#xff1a; 当前&#xff0c;大数据、人工智能、云计算等技术应用正在推动保险科技发展&#xff0c;加速保险行业数字化进程。在这一背景下&#xff0c;招商信诺不断探索如何将多元数据融合扩充&#xff0c;以赋能代理人掌握更加详实的用户线索&#xff0c;并将智能…

mysql redis的区别

.mysql和redis的数据库类型 mysql是关系型数据库&#xff0c;主要用于存放持久化数据&#xff0c;将数据存储在硬盘中&#xff0c;读取速度较慢。 redis是NOSQL&#xff0c;即非关系型数据库&#xff0c;也是缓存数据库&#xff0c;即将数据存储在缓存中&#xff0c;缓存的读取…

Stm32_点灯

利用HAL库基本语法实现C8T6点灯操作 引脚配置 PB3、4 、5 //设置为output PB6、7 设置Input且为上拉初始化代码&#xff1a; 由于3、4、5引脚默认输出为0灯泡默认点亮所以要将他们初始化为1 void Inint(){//初始化灯泡函数熄灭HAL_GPIO_WritePin(GPIOB, GPIO_PIN_3, GPIO_PI…

无涯教程-JavaScript - RADIANS函数

描述 RADIANS函数将度数转换为弧度。度和弧度之间的转换是通过以下关系式计算的 180度π弧度 其中π是数学常数,PI3.14159265358979 ... 语法 RADIANS (angle)争论 Argument描述Required/OptionalAngleAn angle in degrees that you want to convert.Required 适用性 E…

主动写入流对@ResponseBody注解的影响 | 京东云技术团队

问题回溯 2023年Q2某日运营反馈一个问题&#xff0c;商品系统商家中心某批量工具模板无法下载&#xff0c;导致功能无法使用&#xff08;因为模板是动态变化的&#xff09; 商家中心报错&#xff08;JSON串&#xff09;&#xff1a; {"code":-1,"msg":&…

http概念

概念&#xff1a;HTTP&#xff0c;hyper text transfer protocol&#xff0c;超文本传输协议&#xff0c;规定了浏览器和服务器之间数据传输的规则。 特点&#xff1a; 1.基于TCP协议&#xff1a;面向连接&#xff0c;安全。 2.基于请求-响应模型的&#xff1a;一次请求对应一…

2.求循环小数

题目 对于任意的真分数 N/M &#xff08; 0 < N < M &#xff09;&#xff0c;均可以求出对应的小数。如果采用链表表示各个小数&#xff0c;对于循环节采用循环链表表示&#xff0c;则所有分数均可以表示为如下链表形式。 输入&#xff1a; N M 输出&#xff1a; 转换…