前端开发从入门到进阶完全指南,不用再迷茫前端要怎么学啦!_前端进阶教程-程序员宅基地

技术标签: css  前端  html  编程  javascript  

我经常会看到很多同学在学习前端的时候比较迷茫,不知道到底应该以怎样的学习路线来入门和进阶前端领域。每次遇到这种问题我也会分享一下自己的学习经验,但是发现这是一个问得非常多的一个共性问题。
作为程序员,肯定是不能容忍重复无味的劳动的,因此我就系统地总结分享一下我的前端学习路线,希望对你能够有所帮助。

前言

前端学习是一个螺旋上升的过程,既要反复地看书,也要抓紧时间进行实战。只看书,看了就会忘,所以必须将看书和写代码相结合。只要你认真学,入门前端的话三个月左右就可以了。之后我还给出了前端进阶路线,帮助你提升前端技能水平。我把前端入门和前端进阶一共分为六个阶段,并对相应阶段所需要的大致的学习时间进行了标注。

前端入门

入门前端开发主要需要学习 HTML,CSS 和 JavaScript 三大件。之后学习前端主流框架的使用,并基于已学内容开发一个小项目进行实战。当你把这些学习并理解透彻以后,也就算真正地入门前端了。

阶段一:HTML + CSS

前端对于入门者相当友好,因为开始学习的时候你只需要一个浏览器,推荐 Chrome。HTML 和 CSS 可以直接运行在浏览器中,浏览器就是它们的运行环境。你也可以使用编辑器,推荐 VSCode,这是前端开发使用最多的编辑器。

HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 其实并不是编程语言。HTML 中文名叫做超文本标记语言,其实就是一些标签。CSS 中文名为层叠样式表,也就是一些样式的配置。

首先学习 HTML,非常简单。HTML 有非常多的标签,刚入门的时候不要沉浸在记住这些标签中,你也记不住。你只需要整体浏览一遍,知道有哪些标签,各自的作用是什么,整体有一个印象就行了。

学习css过程中千万不要剥离HTML学习。当你什么时候理解了html的重要性(从页面开发角度而言,它可以视为是后续良好css和js编码得以实施的基础,相当于程序中的数据结构,设计好了可以让你事半功倍),你才可以称得上是一个合格的页面开发对于新人,我建议除了几个关键概念,如布局、盒模型、单位等等,都不应该花大量去扣细节,甚至背书记忆,浏览性学习知道有这个东西就行,在实际应用时再去加深记忆。前端入门
入门前端开发主要需要学习 HTML,CSS 和 JavaScript 三大件。之后学习前端主流框架的使用,并基于已学内容开发一个小项目进行实战。当你把这些学习并理解透彻以后,也就算真正地入门前端了。

阶段二:JavaScript

学习了 HTML 和 CSS,可以开始学习 JavaScript 了。这也是至关重要的阶段。JavaScript 主要包括语言基础(ECMAScript)、DOM 和 BOM 三部分,如果你是初学者,会想这到底是啥,咋还三个东西。那就开始学起来,学完你就知道啦,其实没那么难。

JavaScript这几年变化很快,但是对于初学者来说要摒弃浮躁的气氛,静下心来打好基础。记住:自己是初学者,玩的东西就是:JavaScript和jQuery,工具就用一个编辑器和一个浏览器,这些就够了,别的不要碰

阶段三:入门前端框架

学完前端三大件,打好了大树的根基,就可以开始扩展技能树了,开始学习前端框架。前端的主流框架目前主要为 React,Vue 和 Angular。选择哪个框架呢?你可以去知乎或者其他网站搜一搜,然后根据你的个人喜好进行选择。一般是在 React 和 Vue 中选一个。React 的开发体验更类似于写原生的 JavaScript,要求你有较好的 JavaScript 基础。Vue 则引入了模版,将很多实现封装成了 API,你需要记住并调用 API 来进行开发,因为很多都是封装好的,所以学习起来较为简单,只是编程的感觉稍微弱了一些。

这两个都是非常优秀的框架,新人不必纠结于选择哪个框架,学了一个,另一个也很容易学。如果你不知道选择哪个,我推荐你先学习 React。

前端进阶
成功入门前端开发之后就要开启进阶部分了,主要是加深对各个知识的理解程度,打牢计算机领域基础知识,扩展技能树,提升项目开发和宏观理解及把控能力。前端进阶是需要终生学习的,活到老学到老

阶段四:语言基础进阶
这个阶段就是加深对编程语言的理解,多阅读进阶书籍.

进阶必读书籍:
《你不知道的 JavaScript 上/中/下卷》:必买书籍,将 JavaScript 的疑难问题,细节知识一网打尽。原版是 GitHub 上开源的电子书,英语水平高的可以去读英文原版。
《JavaScript 忍者秘籍》:深入讲解 JavaScript 的核心知识点,必买书籍。
《了不起的 JavaScript 工程师》:从宏观来看 JavaScript 语言,以及前端工程师所需要掌握的一些技能,推荐阅读。
《JavaScript 函数式编程指南》:学习函数式编程思想
《JavaScript 函数式编程》:也是一本函数式编程思想的好书
《JavaScript 设计模式》:学习 JavaScript 设计模式,推荐阅读
《JavaScript 设计模式与开发实践》:另一本同等分量的设计模式书籍,推荐阅读
《锋利的 jQuery》:jQuery 现在已经很少有人用了,除非是很老的项目或者写小东西。不过这本书值得买,学习 jQuery 的优秀思想,还可以去学习一下它的源码,对你进阶很有帮助。

阶段五:框架和学习边界进阶
通过阶段三,你已经掌握了前端框架的基本使用,开发一个完整项目的流程。那么在框架和学习边界进阶阶段,你就可以:

学习框架周边的生态,社区总结出来的优秀组件,以及各种好用的工具库。
造一些自己的轮子,使用框架搭建自己的开源项目
学习 Webpack,Gulp,Babel,ESLint 等工具的使用、思想和原理
带着问题去阅读框架源码,学习性能优化
养成良好的编程习惯
扩展技术边界,学习 Node.js 等后端相关技能
……

推荐阅读书籍:

以下推荐的书籍都是比较出名的书籍,你可以根据自己的技能树,选择所需要的书籍进行阅读。并不是一字不差地整本阅读,而是在每本书中学习自己所需要的部分。很多都是非常著名的好书,有精力尽量买来学习。

Webpack 相关:

《深入浅出 Webpack》
《Webpack 实战:入门、进阶与调优》

React 相关:

《深入 React 技术栈》
《深入浅出 React 和 Redux》
《Redux 实战》
《React 学习手册》
《React 快速上手开发》
《React 设计模式与最佳实践》

Vue 相关:

《Vue.js 实战》
《Vue.js 开发实战》
《深入浅出 Vue.js》
《Vue.js 权威指南》
《Vue.js 从入门到项目实战》
《Vue.js 前端开发基础与项目实战》
《Vue.js 项目开发实战》
《Vue.js 快速入门》
《Vue.js 前端开发》

Node.js 相关:

《狼书卷1》
《狼书卷2》
《Node 学习指南》
《了不起的 Node.js》
《深入浅出 Node.js》
《Node.js 实战》
《Node.js 开发指南》
《Node 即学即用》
《Node 与 Express 开发》

样式和布局相关:

《Bootstrap 实战》
《Bootstrap 用户手册》
《响应式 Web 设计:HTML5 与 CSS3 实战》

性能相关:

《Web 性能权威指南》
《高性能网站建设指南》

PWA 相关:

《PWA 开发实战》
《PWA 实战:面向下一代的 Progressive Web APP》

其他:

《SVG 精髓》
《深入理解 SVG》
《前端架构设计》
《重构:改善既有代码的设计》
《同构 JavaScript 应用开发》

阶段六:计算机基础知识进阶
编程编程,万变不离其宗,那就是计算机基础知识,算法、数据结构、计算机原理、网络等内容。在这里我只推荐最经典的好书,每一本都是必读书籍。学好这些内容,大厂任你选。

数据结构和算法:

《剑指offer》
《程序员面试金典(第 6 版)》
《编程之美》
《漫画算法》
《算法图解》
《程序员代码面试指南》
《大话数据结构》
《趣学算法》
《学习 JavaScript 数据结构与算法》
《数据结构与算法:JavaScript 描述》

计算机网络:

《HTTP/2 基础教程》
《HTTPS 权威指南》
《计算机网络:自顶向下方法》
《图解 HTTP》
《图解 TCP/IP》
《TCP/IP 详解》
《UNIX 网络编程》

操作系统:

《深入理解计算机系统》
《现代操作系统》
《UNIX 环境高级编程》
《The Linux Programming Interface》

总结

至此,你已经完成了前端开发从入门到进阶,已然成为了一个巨佬,之后再学什么已经了如指掌。希望我的分享对你有帮助,如果你觉得有用,可以收藏本文,并分享给你有需要的朋友。让我们一起学习,共同进步!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/BOM485480/article/details/118608966

智能推荐

PHP语言教父Gutmans炮轰Java:已经输掉Web之战 _php8 暴打java-程序员宅基地

文章浏览阅读1.3w次。【图灵图书推荐】PHP与MySQL基础教程(第2版) PHP与MySQL 5程序设计(第2版) 最佳PHP入门教程,原版销售超过10万册 PHP新圣经!PHP 3之后的主要语言开发者之一、Zend公司的创始人之一Andi Gutmans最近在blog中直言不讳地批评了Jav_php8 暴打java

首字母转换大写_htmlelement 首字母大写-程序员宅基地

文章浏览阅读604次。 01.html "keywords"content="keyword1,keyword2,keyword3"> "description"content="this is my page"> "c_htmlelement 首字母大写

react全家桶实战_react+antd共享单车-程序员宅基地

文章浏览阅读4.8k次。Tab.jsimport React,{Component} from 'react'import {Link,NavLink} from 'react-router-dom'export default class Tab extends Component{ constructor(){ super() } render(){ ..._react+antd共享单车

JS获取指定字符串中的img标签并替换成指定字符串_js判断字符串里包含img标签并且替换掉整个标签-程序员宅基地

文章浏览阅读1.8k次。1.//需要拼接进img标签的字符串var previewStr = 'aaaa ';//准备用来做替换的字符串var prepareStr = "这是一个字符串";2.//img的正则表达式var imgReg = /<img.*?(?:>|\/>)/gi;var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;var..._js判断字符串里包含img标签并且替换掉整个标签

Struts2中java.utilDate类型的在页面上面显示_java.util.date中存入的值怎么显示-程序员宅基地

文章浏览阅读1.3k次。"showtable(this);"> 或者首先在struts.properties中配置struts.custom.i18n.resources=globalMessages  然后在globalMessages_zh_CN.propert_java.util.date中存入的值怎么显示

CSS字体设置中常用字体大全_css 学校名字应该用什么字体-程序员宅基地

文章浏览阅读1.5w次,点赞8次,收藏26次。CSS字体设置中常用字体大全.selector { font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu}css如何设置各种中文字体如雅黑、黑体、宋体、楷体等等说明:加上中文名“微软雅黑”是为了兼容opera。MicrosoftJhengHei为微软正黑体,STHeiti..._css 学校名字应该用什么字体

随便推点

两分钟了解什么是CDN_acdn-程序员宅基地

文章浏览阅读1.1k次。什么是CDN 内容分发网络(Content Delivery Network,简称CDN)是建立并覆盖在承载网之上,由分布在不同区域的边缘节点服务器群组成的分布式网络。CDN应用广泛,支持多种行业、多种场景内容加速,例如:图片小文件、大文件下载、视音频点播、直播流媒体、全站加速、安全加速。 CDN工作原理请看下图: 假设通过 CDN 加速的域名为 www.a.com,接入 CDN 网络,开始使用加速服务后,当终端用_acdn

mysql 体系结构_mysql 刷脏时merge吗-程序员宅基地

文章浏览阅读1.2k次。学习目标一、MySQL体系结构 二、MySQL内存结构 三、MySQL文件结构 四、Innodb体系结构MySQL体系结构一、MySQL体系结构图1、Mysql是由SQL接口,解析器,优化器,缓存,存储引擎组成的(SQL Interface、Parser、Optimizer、Caches&amp;Buffers、Pluggable Storage Engines) (1) Connectors指的..._mysql 刷脏时merge吗

向数据库中插入含有单引号的字符串_java 替换单引号插入数据库-程序员宅基地

文章浏览阅读1w次,点赞4次,收藏4次。在项目中很容易遇到需要向数据库中插入含有单引号的字符串,但是字符串的单引号又会作为字符串的截止符号从而使得sql语句产生错误。因此需要对字符串进行相应处理之后才可以继续操作。在java中可能会出现如下异常:Exception in thread "main" com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Y_java 替换单引号插入数据库

TypeError: __init__() got an unexpected keyword argument 'shape'-程序员宅基地

文章浏览阅读1.1w次。采用TensorFlow支持通过tf.Graph函数来生成新的向量图,代码如下:import tensorflow as tfg1 = tf.Graph()with g1.as_default(): v = tf.get_variable( "v",initializer=tf.zeros_initializer(shape = [1]))g2 = tf.Graph..._typeerror: __init__() got an unexpected keyword argument 'shape

RDD DataFrame DataSet 的相互转换_dataframe结构化转换select-程序员宅基地

文章浏览阅读618次。RDD、DataFrame、Dataset 三者有许多共性,有各自适用的场景常常需要在三者之间转换DataFrame/Dataset转RDD:这个转换很简单val rdd1=testDF.rddval rdd2=testDS.rddRDD转DataFrame:import spark.implicits._val testDF = rdd.map {line=> ..._dataframe结构化转换select

利用matplotlib中imshow()函数绘图_matplotlib canvas imshow-程序员宅基地

文章浏览阅读3.9k次。matplotlib 是python最著名的2D绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图。而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中。通过简单的绘图语句,就可以绘制出高质量的图了。这里我们就主要讲一下inshow()函数的使用吧。一、引入matplotlib函数库如果你使用的是windows平台,大家可以直接下载对应版本的m_matplotlib canvas imshow

推荐文章

热门文章

相关标签