学习前端,最不缺的就是学什么。
网上有一张流传甚广的前端学习路线,很多人看到了这张图,便纷纷从入门到放弃。
说好的前端是最容易入门的呢?这和传说中讲的不一样啊。
确实,前端涵盖面非常广,所包含的知识非常多,要想短时间内就学会所有内容成为大牛是比较困难的,建议还是循序渐进,找到适合自己的前端发展方向。
当然,无论如何,首先得打好的便是基础知识:
HTML+CSS+JavaScript
HTML是超文本标记语言,它是网页的骨架,网页的图片、文字、视频、音频、程序都需要他引入
到网页中体现。
重点学习内容:
1、学习基础知识及如何编写语义化的
2、HTML了解页面的各个部分,并且学会如何正确地构建 DOM
学习完 HTML 的基础知识后,可以动手编写 一个 HTML 页面,什么网站都可以,比如一个论坛的登录页面,而且要确保结构是正确的。虽然完成的页面看起来很丑,但是暂时还不用着急,现阶段的重点是学会编写正确的结构。
CSS是层叠样式表,通过样式属性来对标签进行布局规范,也就是用来美化网页的。
1、学习 CSS 的语法以及常见的属性
2、了解盒子模型以及如何使用 Grid 和 Flexbox
3、完成以上操作后,还需要学会如何使用媒体查询来编写响应式网页
这时候,你就可以给自己的网页增加样式了。
JavaScript 可以让你的 HTML 页面更具有交互性。如果我们不需要加载整个页面,而只加载部分内容,这时出现的滑块、弹窗等都是由 JavaScript 完成的。你需要学习:
1、JavaScript 语言的语法和基础结构学习
2、如何通过 JavaScript 来操作 DOM 对象。例如,通过 JavaScript 删除页面中的某些元素、添加一些元素、操作类名、应用 CSS 样式等等
3、学习并理解作用域、闭包、变量提升和事件冒泡等学习如何使用 XHR 或者 Ajax 发送 HTTP 请求。Ajax 可以让你在不重新加载页面的情况下执行某些页面操作。
4、完成上面的内容后,就可以去学习 ES6+ 中所有的新功能。
学习是一个艰苦的过程,当然如果能把技术学成,最后也一定可以获得高薪工作。掌握一个好的学习方法,跟对一个学习的人非常重要。今后要是大家有啥问题,可以随时来问我,能帮助别人学习解决问题,对于自己也是一个提升的过程。自己整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理这是我的前端技术交流Q un+++ 钱面是603---- 中间是985---- 后面是993–++++++ 有问题随时在里面问我,能给大家提出很多宝贵建议。
教程类推荐:
推荐一些适合这个阶段学习的资料:
W3school:HTML/JavaScript免费教程
前端工程师P5-P6:适合工作了1-2年前端新人。
有三个核心实战项目,可以快速掌握P5-P6前端知识体系,如果你觉得自己一直在重复基础工作内容,找不到方向,可以去学习一下。
1、freecodecamp 学习网站:免费学习网站,对新手非常友好
2、廖雪峰的Javascript教程
3、菜鸟教程
4、MDN 官方教程
5、W3C 官方文档
书籍推荐:
HTML与CSS:
1、《深入浅出HTML与CSS、XHTML》
2、《HTML & CSS设计与构建网站》
JavaScript:
1、《编写可维护的JavaScript》
2、《JavaScript设计模式》
3、《EffectiveJavaScript:编写高质量JavaScript代码的68个有效方法》
4、《JavaScript语言精粹》
其他素材/书籍
来源:github.com/justjavac/free-programming-books-zh_CN
CSS/HTML、
JavaScript
JavaScript 经典类库 jQuery
因为 JavaScript 有可以封装的特性,所以在后面也出现了很多用 JavaScript 封装的类库、插件。比如说最经典的类库就是 jQuery了。
jQuery 类库就是在类库里面封装好了很多 JavaScript 的事件方法。jQuery 通过封装,减轻了遍历、对象选择等等很多的问题。把网页特效的实现变得简单化,通过调用方法就可以了。你需要学习:
1、jQuery语法和JavaScript原生语法的差异
2、Dom对象和jQuery对象
3、jQuery的入口函数和JavaScript的入口函数的差异
4、jQuery事件的执行逻辑。
相关教程:
这时候,你就可以做一些响应式网站并使用 JavaScript 添加交互功能了。
包管理器
包管理器有 yarn 和 npm,两者几乎相同,都只有安装的功能。你可以选择其中的任何一个,一旦学会使用其中的一个,另一个也就会了。
这时候,可以在你的网页中引入一些外部库。比如安装一些 Toast 插件,当用户点击按钮的时候,用 Toast 插件向他们显示信息;或者你可以创建一个登录表单,利用一些表单验证库来进行表单验证。
接下来还可以学习一些CSS预处理,CSS文件管理,CSS的一些框架,各种构建工具等等。
前端框架
前端框架众多,React、Vue、Angular 三足鼎立,很多人都不知道应该学什么好。
一个很简单的方法是:先学工作实际需要的&自己更偏好的
1、React:Facebook 推出的一款声明式的,高效的,灵活的用于创建用户界面的JavaScript 库,现在越来越火了
2、Angular:比较容易学,因为它几乎支持所有常用的功能。例如支持懒加载的路由器、支持拦截器的 HTTP 客户端、依赖注入、CSS 封装组件等等。有了它,你可以不用再引入其他库了
3、Vue:现在找工作必须掌握的技术
框架学习可以分为这3个步骤:
第一步:基础学习。看官方的文档及教程(如果有的话)
第二步:项目驱动学习。通过项目的方式来写编写大量的代码,掌握该框架的用法及踩坑,快速积累经验
第三步:求知驱动学习。在求知驱动学习过程中,遇到任何产生困惑或者感兴趣的点,都要去深入学习。
相关教程:
React:入门实例教程
Vue:vue.js教程
Angular:菜鸟教程
当然,前端要学的内容远不止这些,路漫漫其修远兮,加油吧~