前端开发学习指南

前端是一个看似入门门槛不高,但要学好很难的领域。前端的知识体系庞杂又松散,技术演进快,如果摸不清脉络的话很容易陷入盲人摸象的困境甚至跑偏。

其实只要掌握了正确的方法,学习前端和学好前端就只是个时间问题,希望下面的回答对你有所帮助。

1.梳理清楚知识体系框架

学习前端,不管是入门还是进阶,一定都要有知识体系建设的想法。就算是刚开始学,也一定要有这样的意识。前面说过,因为前端知识点多而分散,所以如果不能构建起自己对于前端的知识体系框架的认识,很容易就会不知所措,没了方向。

现在网上关于前端知识体系的脑图很多,但是往往过于复杂,不适合初学者。作为一个初学者,每个人都应该自己做一份自己的前端知识体系脑图,先有一个最基本的框架,然后在学习的过程中慢慢完善。

这样通过和别人脑图的对比,你也很容易知道还有那方面的知识是需要补充完善的。

这里我给出一个简单的模版,其实作为一个刚入门的前端新人,有这样的大框架已经完全够用了,不用追求大而全,学习的畏惧心理也会小很多,随着你学习的深入,这个脑图也会慢慢丰满起来。

2.前期准备和基础的学习

要开始的时候做一些基础工作还是必要的,比如选一个自己喜欢的编辑器啊,比如科学上网啊,比如怎么高效的使用搜索引擎啊,比如git啊,比markdon语法啊,这些东西都可以大幅度提升你的学习效率或编程的幸福感,所谓磨刀不误砍柴功,你也可以把这些东西记在你的脑图里。

接下来你就可以开始学习基础知识啦。HTML,CSS,Javascript这三样真的很重要,刚开始的时候你压根不用去管那些花里胡哨的框架,一定要把基础打好。框架再怎么更新迭代,最基础的东西还是这三样,只要你能掌握好基础,就等于拿到了打开前端世界的钥匙。

不管你的前端学习到了哪个阶段,对基础知识的好奇心一定不能断,这里面有太多细碎的知识点,每一份spec都又臭又长,就算你已经工作两三年,这里面肯定都还有你不知道的东西。

到这个时候你的知识体系脑图差不多应该长成这个样子了:

进行到这里的时候其实又有一个坑,很多人到这儿的时候就一头扎进去去看里面的具体内容了,比如去看各种标签的属性用法啊,去看选择器啊,这就是比较典型的没重视知识体系框架建设导致的盲目做法。

推荐的做法是什么样的呢?其实很简单,就是再去细化这些知识点的层级,理清各个知识点的脉络,从宏观上先对这些知识的体系和框架有一个比较清楚的认识。

就拿HTML来简单的举例一下:

这样把知识点的层级关系抽象清楚,对每个小的知识点合理分类,才能让前端知识里那些庞杂的知识点形成体系。

现在你就可以去往里面补充些细节的东西了,你可以在脑图上用不同的颜色标出不同的优先级,以便划分学习的优先级并方便以后review。

3.把学的东西用起来

每次学过一些小的知识点,都要想办法把它们用起来,想清楚这些知识点有哪些使用的场景,等到基础知识学到一定程度了也可以反过来,先预先想好场景和要实现的功能,再去思考在这些场景下面该用哪些知识。如果遇到了解决不了的问题和没有学过的知识,去你的脑图里把它的位置搞清楚,写出来。列入后续的学习计划。

一定不要一直看,一直学,却不在具体的场景里去用,你应该养成拿自己学到的东西做些东西解决些问题的习惯。不断的做出东西,解决问题,不断给自己正向的激励,不断的完善自己的知识体系,一定要让自己有成就感。

4.多体验新工具

近几年,在技术领域低代码是比较热门的话题,通过低代码工具,自动代码生成和可视化编程,只需要少量代码,即可快速搭建各种应用。我现在在体验的一款低代码是JNPF快速开发平台(http://www.jnpfsoft.com?csdn),感兴趣的可以自行体验!除了低代码工具,其他工具我在以往的文章中都有提到,你可以自己看看。

今天就先说到这儿,以后如果有机会看需要再更新。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV图像坐标系

绘制代码: X轴 # 选取两个点 point1 = (20, 0) point2 = (200, 0)# 在图像上绘制连接线 cv2.line(img, point1, point2, (

解决找不到x3daudio1_7.dll的方法,快速解决x3daudio1_7.dll丢失问题

在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是“找不到x3daudio1_7.dll”。这个问题可能是由于多种原因引起的,例如文件丢失、损坏或被病毒感染等。下面将详细介绍如何解决这个问题。 首先,我们需要了解x3daudio1_…

Kotlin HashMap entries.filter过滤forEach

Kotlin HashMap entries.filter过滤forEach fun main(args: Array<String>) {val hashMap HashMap<String, Int>()hashMap["a"] 1hashMap["b"] 2hashMap["c"] 3println(hashMap)hashMap.entries.filter {println("filter $…

2023年【北京市安全员-C3证】考试题库及北京市安全员-C3证在线考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 北京市安全员-C3证考试题库是安全生产模拟考试一点通总题库中生成的一套北京市安全员-C3证在线考试&#xff0c;安全生产模拟考试一点通上北京市安全员-C3证作业手机同步练习。2023年【北京市安全员-C3证】考试题库及…

Nignx及负载均衡动静分离

目录 一.Nginx负载均衡 1.1.下载 1.2.安装 1.3.负载均衡 二.前端部署 2.1. 准备工作 2.2.部署 好啦今天就到这里了哦&#xff01;&#xff01;&#xff01;希望能帮到你哦&#xff01;&#xff01;&#xff01; 一.Nginx负载均衡 1.1.下载 输入命令 : cd javaCloudJun/…

键盘win键无法使用,win+r不生效、win键没反应、Windows键失灵解决方案(亲测可以解决)

最近几天发现自己笔记本的win键无法使用&#xff0c;win失灵了&#xff0c;但是外接键盘后则正常:。 这个问题困扰了我一周&#xff0c;我都以为自己的枪神坏了。 寻找了几个解决方法&#xff0c;网上看了好多好多稀里糊涂的办法&#xff0c;都是不管用的&#xff0c;这里给大…

超简单的Linux FTP服务搭建教程

目录 前言1、检查vsftp是否已安装2、安装vsftpd3、启动ftp服务4、测试ftp服务5、上传文件配置总结 前言 本文记录了在Kylin Linux Desktop V10(SP1)系统上搭建FTP服务的过程。FTP是File Transfer Protocol的缩写&#xff0c;译为文件传输协议&#xff0c;是用于在网络上进行文…

向量的点积和外积

参考&#xff1a;https://www.cnblogs.com/gxcdream/p/7597865.html 一、向量的内积&#xff08;点乘&#xff09; 定义&#xff1a; 两个向量a与b的内积为 ab |a||b|cos∠(a, b)&#xff0c;特别地&#xff0c;0a a0 0&#xff1b;若a&#xff0c;b是非零向量&#xff0c;…

【读点论文】结构化剪枝

结构化剪枝 在一个神经网络模型中&#xff0c;通常包含卷积层、汇合层、全连接层、非线形层等基本结构&#xff0c;通过这些基本结构的堆叠&#xff0c;最终形成我们所常用的深度神经网络。 早在 1998 年&#xff0c;LeCun 等人使用少数几个基本结构组成 5 层的 LeNet-5 网络&…

GitHub Copilot Chat将于12月全面推出;DeepLearning.AI免费新课

&#x1f989; AI新闻 &#x1f680; GitHub Copilot Chat将于12月全面推出&#xff0c;提升开发者的生产力 摘要&#xff1a;GitHub宣布将于12月全面推出GitHub Copilot Chat&#xff0c;这是GitHub Copilot的一个新功能&#xff0c;旨在帮助开发者编写代码。它能够集成到开…

解决Docker启动之npm版本不兼容问题

报错内容&#xff1a; npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion1, but package-lock.json was generated for lockfileVersion2. Ill try to do my best with it! npm WARN tar ENOENT: no such file or directory, open /home/wvp-…

一个轻量级 Java 权限认证框架——Sa-Token

一、框架介绍 Sa-Token 是一个轻量级 Java 权限认证框架&#xff0c;主要解决&#xff1a;登录认证、权限认证、单点登录、OAuth2.0、分布式Session会话、微服务网关鉴权 等一系列权限相关问题。 官网文档: https://sa-token.cc/doc.html 二、Spring Boot 集成Sa-Token 2.1、…

【机器学习】七、降维与度量学习

1. 维数灾难 样本的特征数称为维数&#xff08;dimensionality&#xff09;&#xff0c;当维数非常大时&#xff0c;也就是现在所说的维数灾难。 维数灾难具体表现在&#xff1a;在高维情形下&#xff0c;数据样本将变得十分稀疏&#xff0c;因为此时要满足训练样本为“密采样…

函数的连续性

函数在某一点极限存在&#xff0c;不一定连续 函数的左极限 函数的右极限 函数在某点连续需要满足三个条件 1、左右极限存在 2、左右极限相等 3、函数在该点的极限值等于在该点的函数值 满足1、2两个条件函数在该点极限存在。

kubernetes集群编排——k8s调度

nodename vim nodename.yaml apiVersion: v1 kind: Pod metadata:name: nginxlabels:app: nginxspec:containers:- name: nginximage: nginxnodeName: k8s2 nodeName: k8s2 #找不到节点pod会出现pending&#xff0c;优先级最高 kubectl apply -f nodename.yamlkubectl get pod …

【Node.js入门】1.2 部署Node.js开发环境

1.2 部署Node.js开发环境 在 Windows 系统上安装 Node.js 两种文件格式的安装包 Windows安装包&#xff08;.msi&#xff09;Windows二进制文件&#xff08;.exe&#xff09;安装包 检查Node.js版本 node --version 在 Linux 系统上安装 Node.js Linux操作系统上安装Nod…

深度学习 python opencv 动物识别与检测 计算机竞赛

文章目录 0 前言1 深度学习实现动物识别与检测2 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 3 YOLOV53.1 网络架构图3.2 输入端3.3 基准网络3.4 Neck网络3.5 Head输出层 4 数据集准备4.1 数据标注简介4.2 数据保存…

Day26力扣打卡

打卡记录 搜索旋转排序数组&#xff08;二分&#xff09; 链接 class Solution {int findMin(vector<int> &nums) {int left -1, right nums.size() - 1; // 开区间 (-1, n-1)while (left 1 < right) { // 开区间不为空int mid left (right - left) / 2;if…

Python语法基础(字符串 列表 元组 字典 集合)

目录 字符串(str)字符串的创建特殊情况字符串的转义字符字符串的运算符字符串常用方法求字符串长度去掉多余空格是否包含某子串分割字符串合并字符串替换字符串统计统计字符串出现的次数 练习&#xff1a;判断字符串是否为回文串 列表(list)列表的创建列表常用方法遍历列表列表…

概念解析 | Richardson-Lucy去卷积算法

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:Richardson-Lucy去模糊算法 Richardson-Lucy去模糊算法:重现图像的真实面目 Blind deconvolution by means of the Richardson–Lucy algorithm 背景介绍 在图像处理中,图像获取…