前端新手必看:从零开始的快速学习指南

发表时间: 2022-08-16 16:09

随着互联网不断的发展,很多小伙伴包括做UI的、Java的,乃至各行各业的,或者是从没接触过IT、完全零基础的都开始注意到前端,想要学习前端。但对于初学者而言,前端繁多的知识点对他们来说实在是太陌生了。的确,要学好吃透前端并不是很容易,但也不需要太过畏惧,因为这都是有路线可循的,依照着下面的前端学习路线,尽管你会碰到难题,但绝不会出现东一榔头西一棒子的情况,大大节省了时间和精力。


学习路线概览:

HTMLCSSJavaScriptGitGitHubNodejsNpmVue(和React任选一个学)WebpackHTTP

HTML

1、学习HTML标签:<span><p><a><h1><div><form><ul><ol>等等,尽量把每种标签都写一遍。

2、学习标签分类:块级标签,行级标签,知道他们的特点和区别即可。


CSS

1、引入CSS的方式

2、常见的CSS属性:颜色、背景色、字体大小、宽高等等,这里自己多写写改一改。

3、基本的选择器:通用,类,ID,后代选择器,这里自己多写写。

4、学习盒子模型:2种盒子模型以及marginpadding,这里自己多写写。

5、定位:固定定位,相对定位,绝对定位,粘性定位,这里自己多写写,区别一定要知道。

6、布局:浮动,Flex,两栏布局,三栏布局。

7、实战:仿制静态页面,比如网站首页、好看的网页等等,一切你都可以自己写。

JavaScript

1、JavaScript基础:变量,数据类型,操作符,while语句,if语句,数组,函数,这里一定要多动手写,熟悉常见的API

2、DOM:学习JavaScript是如何操作DOM、如何获取HTML元素的,这里一定要多动手写,熟悉常见的DOM API

3、JavaScript进阶:事件冒泡,作用域,原型链,闭包,this,自执行函数,这里有的概念一时间理解不了没关系。

4、Ajax请求:学习如何发Ajax请求,以及获取数据和处理请求错误。

5、ES6基础:letconst,解构,setmap,这里自己要多写,不要死记硬背。

6、实战:纯前端轮播图,简单留言板,实现lodash高频方法。


GitGitHub

1、Git概念:什么是Git,好处,分支概念,版本管理。

2、常见的Git命令:addcommitmergepushfetchreset

3、GitHub:注册GitHub账号,新建GitHub远程仓库,实践Git操作。

NodejsNpm

1、安装NodejsNpm:这里为什么需要装Nodejs,因为无论你是学Vue还是React,本地开发和构建都会依赖NodejsNpm,所以我们提前安装它,这里只需要知道它是干什么的就好,安装成功即可不用深究。

2、学习基本的NodeNpm命令:这里不用深究,了解最基础的,对Nodejs不再陌生即可。

Vue(和React任选一个学)

1、Vue文档基础部分:Vue文档写的很好,先把基础部分好好学完,多手写代码练习。

2、Vue组件:自己实现常见的Vue组件,比如按钮、卡片、下拉框、弹窗、轮播图等等,把这些实现一遍之后,你对Vue的基础使用已经很熟练了,写代码过程中多上官网查文档。

3、学习Vue文档深入部分:有了前面的实战,现在看文档深入部分可以有更深刻的理解。

4、Vue-Router:了解什么叫做前端路由,知道如何配置,练习基本的例子。

5、Vuex:了解什么叫前端状态管理、单向数据流,知道如何写,练习基本的例子。

6、实战:写一个综合性的前端项目,使用到VueVue-RrouterVuex,比如一个博客系统。


React(和Vue任选一个学)

1、React文档基础部分:学习React官网的教程,多手写代码练习。

2、React组件:自己实现常见的React组件,比如按钮、卡片、下拉框、弹窗、轮播图等等,写代码过程中,多上官网查文档,理解函数式编程思想。

3、React-Router:了解什么叫做前端路由,知道如何配置,练习基本的例子。

4、Redux:了解什么叫前端状态管理、单向数据流,知道如何写,练习基本的例子。

5、实战:写一个综合性的前端项目,使用到ReactReact-Redux,比如一个博客系统。

Webpack

1、官网学习基础:明白Webpack是干什么的,pluginloaderentry等等常见的概念。

2、根据项目学习:你在学习VueReact的时候肯定会遇到Webpack,这个时候可以返回去看看项目中Webpack是怎么配置的,使用到了哪些pluginloader,这里学不明白也很正常,很多已经工作的配置起来Webpack也很难受。

HTTP

1、HTTP基础:它是干什么的,有哪几部分。

2、HTTP状态码:有哪些常见的状态码,分别是什么意思。

3HTTP缓存:如何实现缓存,特点。

以上就是这次分享的前端学习路线的全部内容。当然,这只是一个大致的学习路线,不像一本书、一套视频、一份资料这么详尽,它只是用来辅助你的学习,真正吃透前端还是要靠自己多看多听多动手。并且,如果你在一个地方纠结了太长的时间,比如CSS布局都学了一个月,但又确实不想放弃学习前端,选择一家好的培训机构也不失为一个正确的选择。

这并不是让你马上做出决定,毕竟谁的钱也不是大风刮来的,况且自己的学习进度也只有自己最清楚,不过你耗费了许久时间都未能解决的问题,一经老师点拨突然开窍完全有可能,好的培训机构的作用就在于此,那就是做你迷茫路上的一盏指路灯。