应该怎么学习前端呢

对于刚开始学习前端的小伙伴们说,问得最多的问题就是 ——前端技术现在如此繁杂,我到底应该如何学习。这个话题太大了,几句话回答不好;也由于这个问题确实困扰了很多前端开发人员,所以我就根据多年经验输出这篇回答。

虽然这篇回答花了很长时间,肯定也有其局限性;希望各位不吝指出。

正步入题:

我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一,所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是CSS、HTML、JavaScript(简称JS)了。但这三大件一直都是前端的根本,这一点从未改变。而这三大件中JavaScript又是重中之重。

接下来我会结合我的一点经验,给出前端学习路线的一些具体建议。

1、目录:

三大件学习、库工具、前端框架( MVVM )的学习、浏览器 & 计算机基础、前端工程化、性能优、Nodejs、数据结构和算法

依葫芦画瓢

三大件学习

现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。

刚入门的朋友,我觉得不应该一开始就学习像Vue、TypeScript、Webpack等知识。应该把重点放在CSS、HTML、JavaScript基础知识的学习上。

CSS & HTML

对于刚入门的朋友我依旧建议先将CSS(3)、HTML(5)的知识点认真学习一遍。学习的途中最好是学习完一部分就自己在敲一遍代码,加深自己的记忆。

当然如果你愿意,建议你可以先仿一个网站的静态页面(掘金、知乎等都可以),有一些属性就可以了解他实际的实现场景。

当然刚开始敲代码的时候还是不要过分依赖自动补全功能,一开始就使用自动补全对你记忆一些属性时没有帮助的;踏实点学习,日后会有回报的。
关于 CSS(3) 你需要了解的一些知识点

盒模型(标准 、 IE )

flex、float、Normal Flow 等的理解

CSS 常用选择器

行内、内部、外部样式的区别

CSS 层叠规则

BFC 与 IFC 的了解

CSS3 的 transform、transition、animation 等属性的运用了解

响应式布局的理解

……

CSS 说容易也容易,说复杂也复杂;因为 CSS 总是能给你意外的惊喜。
HTML(5) 你需要了解的一些知识点

说到 HTML 我想有很多人是div一把梭。因为div用的爽,不用担心默认样式。

有人说 HTML 语义化的优点很多,比如清晰的页面结构、有利于 SEO、便于团队开发和维护;这些我都承认,不过我还是喜欢div一把梭。
HTML 语义化( 不是很理解为什么面试总会问 )

canvas

本地存储( localStorage、sessionStorage、cookie 的理解 )

video 和 audio 的使用

应用缓存( cache manifest )

……

JavaScript

JavaScript一直都是我们前端的基石,一定程度上JavaScript的理解深度决定了你的发展。所以一定要用心学习。

现在很多人一看到闭包、原型链、作用域链、继承之类的文章都是直接跳过,你现在可以自问一下你的确理解这些基础的知识点吗
JavaScript的基础知识点确实很多,所以《JavaScript 高级程序设计》 写了 700 多页;不过当你 JS 基础扎实后,你会发现你在学习框架、亦或是学习框架源码的时候会轻松许多。

JavaScript(ES6+) 你需要了解的一些知识点

类型转换

this

作用域(作用域链)

原型链以及继承

闭包的理解

动态作用域和词法作用域

JavaScript 执行机制

promise 、 async

……

上面说的CSS&HTML&JavaScript的基础知识点并不需要你一入门就全部都理解透彻;有些虽然是基础,但却也有它的难度。就算是高级也不敢说自己全都掌握了,有句话说的挺好 —— 书读百遍、其义自见。

我们第一遍学习不可能尽懂,到最少可以给我留下一个印象。过一段时间再学习这块知识点的时候,你肯定会有一个全新的理解。学习只一个需要一直在线的任务,重复的学习可以帮助你保持持续的竞争力。

我先声明一点,我并没有说其他技术不需要去学习,只不过初入门最好重点是先将基础夯实。
其实三大件的学习不需要花费多少时间,有基础的大概 3 个月就可以大致的看一遍。是否真的理解这是后话,不过已经算是入门了。

在前端领域混了这几年,总结了一套前端学习的精讲视频和学习路线,如果有对前端开发感兴趣的伙伴,不管你是想转行,或是大学生,还有工作中想提升自己能力的web前端党,欢迎大家的加入我的前端开发交流群:603985993希望大家诚心交流!,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号:【前端留学生】
每天更新最新技术文章干货。

2、入门就可以学习前端特别流行的三大框架

Vue.js-国人开发,文档非常友好

React.js-facebook开发

Angular.js-Google开发

以上三个框架,如果真的想做前端的话,三个框架是必须学一个的,一个都没学,说实话,是不好意思说自己是前端的,可能说的有点过了,哈哈!

还有想成为全栈的话,还要学node,大家有机会可以了解下!!!

3、总结

学习任何知识最重要的都是兴趣,如果经过一段时间的学习感觉不喜欢,那可能强迫自己学习是很痛苦的,效果也不会好,毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展,前端必然是Web开发人员需要学习的知识,有时候是没有专业前端工程师一起合作的,所以即使不做专门的前端工程师,掌握基本的前端技能为工作带来方便。

现在转行前端,该怎么学习呢?怎么学好基础html、css、js相关推荐

  1. 大鱼海棠国漫主题HTML前端网页设计成品预览与讲解DIV CSS JS

    国漫大鱼海棠主题,本套大作业共计10个页面,页面美观度较高,网页在细节设计上花了很大功夫,如边框.阴影,鼠标滑过效果等,运用的知识点有:Div+CSS.JS轮播图.Table.下拉菜单栏.视频.表单. ...

  2. Web前端---响应式室内家具网页设计(HTML+CSS+JS)

    临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...

  3. 前端开发基础 HTML+CSS+JS

    文章目录 HTML介绍 CSS介绍 JavaScript介绍 HTML.CSS和JavaScript之间的关系 HTML使用 基本结构 常用标签 CSS使用 使用方法 常用属性 盒子模型 选择器 默认 ...

  4. web前端基础html,css,js,jquery

    目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...

  5. Web端英语短语学习网页1.1(HTML,CSS,JS综合运用)

    本次更新内容: 1.购买腾讯云服务器,把本地文件网页上传到线上------- 点击查看 2.增加注册页(其实只是输入一个名字) 3.运用了一下翻转效果,具体运用在注册页面的"进入学习&quo ...

  6. 网页学习笔记(全)Html+Css+Js+JQuery

    前段笔记 (一)安装vscode 安装:插件 chinese 汉化 open-in-browser ---> 启用 设置自动保存:文件 -> 自动保存 (二)认识页面结构: Emmet:? ...

  7. nodejs学习巩固笔记-nodejs基础,Node.js 高级编程(核心模块、模块加载机制)

    目录 Nodejs 基础 大前端开发过程中的必备技能 nodejs 的架构 为什么是 Nodejs Nodejs 异步 IO Nodejs 事件驱动架构 全局对象 全局变量之 process 核心模块 ...

  8. 公司产品移动端网页-前端网页设计技术精美网站源码HTML+CSS+JS

    微信公众号:创享日记 发送:产品网页 获取完整源码(打开即可用) 效果①主页首页 /*========================================================= ...

  9. 前端小项目-Thunder Raid(全民飞机大战)-html+css+js 含视频课程+全套代码

    项目完成后效果: 项目视频+ 源码链接(2022.6.27更新):链接: https://pan.baidu.com/s/110wfK4xqbv4eDsxtm9zicg 提取码: ib0q 自己修改调 ...

  10. 表严肃:前端语言基础HTML+CSS+JS,JQuery

    课程链接HTML 课程链接CSS 课程链接JS 课程链接JQuery font-awesome使用 图标使用与效果: HTML HTML教程文档 一张网页一个html:内部是页面 body:放可见的显 ...

最新文章

  1. linux下的qt缺少iostream,c – iostream:没有这样的文件或目录
  2. PCL深度图像(2)
  3. MYSQL数据库——mysql的数据类型和运算符
  4. python 用twisted 问题 zope.interface
  5. 如何为ORACLE表空间创建大容量数据文件
  6. 团队管理新思考_需要一个新的空间来思考讨论和行动
  7. RSA私钥文件(PEM-PKCS#1)解析
  8. HDU 1867 KMP
  9. halcon获取图像中心点_关于Halcon的复杂图形中心点查找
  10. Speaker Recognition: Gaussian probabilistic LDA (PLDA)理解
  11. 中国计算机学会推荐国际学术会议和期刊目录
  12. (XWZ)的python学习笔记Ⅰ
  13. 关于git push报hook declined
  14. 手机点击android出现N,“安卓N”登场,会给手机带来哪些新功能
  15. BIOS视频中断 10号中断详解
  16. NaN表示什么?typeof NaN结果是什么?
  17. Android热修复(1):热修复的介绍和原理解析
  18. 系统级程序设计第二次作业
  19. python裁剪图片边缘模糊_Python OpenCV 图片高斯模糊
  20. HMI人机交互硬件设计参考

热门文章

  1. MyBatis学习总结(15)——定制Mybatis自动代码生成的maven插件
  2. c++用什么软件_html用什么软件编写
  3. pycharm关闭科学模式_[效率] 高手常用的 PyCharm 使用技巧(二)
  4. dubbo 使用学习五(dubbo开发中使用到的一些服务配置方式)
  5. Ecshop最新版v.272本地包含漏洞Oday
  6. 两大微服务框架dubbo和spring cloud对比
  7. Laravel-数据库队列
  8. 【Spring】21、用spring目标对象处理Transaction rolled back because it has been marked as rollback-only...
  9. jQuery中绑定事件的几种方法
  10. Android中Menu的基本用法