2021前端最新学习路线,干货,是真干~

简介: 学习对于每个人来说,都是比较痛苦,也是比较枯燥的。但是如果您真的想学习前端的知识,就一定要耐住性子,静下心来,一步步的学习。学习是一个循序渐进的过程,是一件非常难得坚持的事情。要掌握学习的方法,人们常说:兴趣是最好的老师。先培养兴趣,学习起来会有事半功倍的效果

前言

学习对于每个人来说,都是比较痛苦,也是比较枯燥的。但是如果您真的想学习前端的知识,就一定要耐住性子,静下心来,一步步的学习。学习是一个循序渐进的过程,是一件非常难得坚持的事情。要掌握学习的方法,人们常说:兴趣是最好的老师。先培养兴趣,学习起来会有事半功倍的效果~~~加油!!!

文末有惊喜!!!

web基础

干啥事也得有基础,路才能越走越远。很多小伙伴们上来就想做一个大系统、做一个漂亮的网站,结果发现越做越没有信心,导致最后越来越不愿意学习。所以千万不要好高骛远

  • html、css、Javascript:
    原来的网页三剑客:HTML  、CSS  、   Javascript组成了web的体系。现在依然具有举足轻重的地位。所以这三个知识是必须要学会。基础知识不用过多说什么。

这里要特别说一下 Javascript 这门语言。只有学会这个编程语言才能真正意义上说是一名合格的程序员。很多人也因为这个能力一直停滞不停。所以得花点时间好好去学,这对于以后的技术路走多长有至关重要的作用。

  • jQuery
    在前几年的时候,jQuery可以说是每个网站必备的开发库。直到现在依然还有很多网站也一直在用这个库,只不过最近几年 reactangularJSvue 这些开发框架的快速崛起,jQuery好像没有原来那么火热,这个库可以简单的学习一下。会基本的用法就好,如果将来有一天真正的需要这个库的时候,再深入学习一下。
  • Ajax
    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
    AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
    AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
    (以上是从网上复制的~~~~)
    这个是与后台开发交互的必备技能。也有很多成熟的库对它进行了封装,如:jQuery、axios等。
    当然,要真正实现前后交互还得学习HTTPJSON 等一些网络知识。总之,你得学习~~~

好了,如果你想做一些简单的网站,以是的知识已经完全够用了,这里还有很多好用的框架和库没有列举,如:bootstrap。还有如何适配pc、手机、平板等一些 响应式和自式应的知识。这些知识可以等用到了再深入去学,基础打得好,学习起来都不是~ 很快。嗖嗖的~~~~哈哈

前端进阶

作为一个有逼格的前端开发,怎么能只学习一些基础的知识。是不,得进阶一下子。

  • ES6、7等一系列、模块化
    如果你想进阶,麻烦先过一关吧。进阶中的基础,重要性不多说了
  • CSS模块化、预处理器
    postcss 是每个前端小伙都知道的吧~ 这个东西是真好用啊,尤其是在做 css厂商前缀的时候。再也不用一个个手动写了。框架都给整合好了。去官网学吧,还等啥。
    预处理器目前比较火的有三个:sass、less、stylus。让你写css和编程一样,也是比较方便的,学会一个就行。其它两个就自然会了。你懂得
  • node、npm、yarn
    node 这个东西会点基础就行,毕竟做为一门主要用于后端开发的环境,但学习好了这个,路子会更长的。
    npm yarn 都是包管理器,必须学会基础的用法。
  • 构建工具
    目前比较流程的构建工具有:webpack 和以及最近尤大出品的 vite 。原来还有 gulp (我没有用过,不要鄙视我哦~),这个东西怎么说呢,基础配置和原理得掌握,其它的当然是学会的越多越好。

郑重声明:以上学习路线和知识体系是本人的由实际学习开经验而来,不一定适合每个人,如果大佬觉得不合适的,请勿喷。本人只是想帮助更多想学习前端的小伙伴而已。更多的知识请参见下图:4edc953e2c684bbe819ffa954c899c08.png

如果图片不清楚,请私信我,我单独给您发一下

目录
打赏
0
0
0
0
1
分享
相关文章
前端 three学习路线
【8月更文挑战第21天】前端 three学习路线
89 2
前端node学习路线
【8月更文挑战第21天】前端node学习路线
97 8
大前端完整学习路线(详解)
大前端完整学习路线(详解)
173 0
重学前端 2 # 前端学习路线与方法
重学前端 2 # 前端学习路线与方法
75 0
一个大四学长分享自己的web前端学习路线--webpack篇(2/3)
webpack所谓的拆分的配置就是将webpack分为common(公共配置)、dev(开发环境下的配置)、prod(生产环境下);然后还需要的是在dev当中将它引入我们的common,再在prod当中引入common,这个时候我们要做的就是安装webpack-merge,比如通过这个方法module.export = smart将其导入common的时候对应的配置的命名。
一个大四学长分享自己的web前端学习路线--webpack篇(2/3)
一个大四学长分享自己的web前端学习路线--vue篇(1/3)
学会使用插值、什么是表达式、了解什么是指令、什么是动态属性已经v-html标签(注意:v-html这个标签会有XSS风险,它会将我们的子组件覆盖掉)
36695 1
一个大四学长分享自己的web前端学习路线--vue篇(1/3)
一个大四学长分享自己的web前端学习路线--小程序篇(3/3)
小程序文件类型分别有:样式(WSCC)、骨架(WXML)、业务(js)、配置(json)。但是注意的是:其实小程序开发虽然和web开发方式差不多,但是底层的原理根本不一样。
一个大四学长分享自己的web前端学习路线--小程序篇(3/3)
前端学习路线(四)
往期回顾↓↓↓ 前端学习路线(一) 前端学习路线(二) 前端学习路线(三) 本章是前端学习路线栏目的最后一章了,到本章为止,我们的学习路线已经有包括了如下的科目: HTML→CSS→JS→JS高级→JQ→ES6→ajax→webpack
138 0
前端学习路线(三)
往期回顾↓↓↓ 前端学习路线(一) 前端学习路线(二) 在前两章中,我们讲了如何去学习前端三剑客、js高级和bootstrap的重点,得到了很多前端初学者的好评,收藏量也是每天都在增加,所以今天博主想写一下第三章,主要想讲一下学习ajax和webpack的问题,ajax是前端学习的重点,如果不会ajax,写出再好的页面也只是一个空壳,而webpack则是一个打包工具,对于项目的上传具有重要的作用。
186 1
前端学习路线(三)

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
    90
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    14
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    2
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    44
  • 5
    详解智能编码在前端研发的创新应用
    16
  • 6
    巧用通义灵码,提升前端研发效率
    30
  • 7
    智能编码在前端研发的创新应用
    40
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    23
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    8
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
    6
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    50
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    139
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    119
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等