Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业有什么帮助呢? 我学到什么程度可以胜任工作? ...

这里,pink老师给你们最全的解答。

 1. HTML5 + CSS3 

根据web前端发展史,建议大家先学习pc端页面开发。 包含: HTML5、CSS3、浮动、定位、盒子模型、高级技巧等等。 不用说,这是我们前端入门的最基本要求,目的是能完成页面的布局开发,这部分必须精通。  这部分知识比较简单,不要去买书看了(太浪费时间),直接看pink老师视频就够了哈。 https://www.bilibili.com/video/av80149248

学完之后,只要网上看到喜欢的页面,就可以模仿下来,意味着你掌握成功。

2. 移动端页面开发

我们先学习了pc端页面开发,但是现在移动端太常见了,所以我们也需要做移动端页面开发。  主要学习移动端常见布局:流失布局、flex布局、rem布局、响应式布局等。其中市场rem布局用的最多了,重点掌握。 网上相应的布局视频很多,可以重点学习。 最终起码把几个大厂的移动端首页写出来才可以。比如淘宝、京东、小米等。

3. JavaScript 系列

JavaScript是我们前端的核心,需要精通掌握,可以直接学习ES5,ES6就可以了。这样就可以让我们页面交互效果动态展示起来了。 包含:  JavaScript 基础语法及 Web API 开发动态交互(⽹⻚特效)的⽹⻚、JavaScript ⾼级特性,如⾯向对象、闭包、事件循环等技术、 jQuery也要了解一些,现在市场很多老项目还是大量有jQuery的,你说不会jQuery,人家不相信你前端工作过。。。

学习渠道:

1. 最权威的JavaScript网站 MDN:  https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics 当然还可以去菜鸟教程等。

2. 各种视频网站, 首推B站, 还有 慕课,腾讯课堂等。搜索相关关键字即可。

3. JavaScript 相关面试题可以去 掘金、牛客网、github 等网站。

4. 相信我,最好的还是百度。 学到js ,你应该要有自己的 github 或者码云的账号了,里面有大量资源可以让你去查阅学习。

推荐的书籍:  《JavaScript DOM 编程艺术 》、     《JavaScript高级程序设计》、   《你不知道的JavaScript 》、    《锋利的jQuery  》等, 建议直接网上搜电子书即可。

4. Ajax 和 git

前面我们写的所有页面都是静态的,也就是所有的数据都是假数据,实际开发的时候,数据都是从后台获取过来的,那么如何获取后台的相关数据呢? 答案就是 ajax。

前端必备哦 通过 Ajax 实现与服务器的通信,获取服务器提供的数 据,然后动态渲染输出,实现动态⽹⻚的开发。

学习 git 版本管理⼯具,实现企业级多⼈协同开。 学到这里,最好有个项目练习,  这样可以更好的明白动态网站是如何开发的。 现在网站都是流行前后端分离,这个阶段我们能知道如何调用后端接口。

5. Node.js

相信学ajax 的时候,很多教程搭配php或者其他后台语言来学习,但是我更推荐ajax和node来学习,毕竟都属于我们前端内容,省去在学习另外一门语言的痛苦。

目的: 通过学习 Nodejs 和 MySQL 深⼊理解⽹站的本质,以及前端在整个⽹站开发中的⻆ ⾊,为在企业中前后端协同开发提供帮助。体会 Nodejs 在前端⼯程化开发中的重要作⽤。

学习推荐地址:  推荐一个博客: https://cnodejs.org/getstart

6. VUE  

前端三大框架 你肯定听过  vue 、react 、 angular。 国内最火的框架是 vue,而且vue3.0 马上也要发布了,肯定还会火一把。 有了这些框架,我们开发页面更加快速和高效,性能维护有了极大提高。 目的是:掌握 MVVM、模块化、组件化、状态管理、路由等技术在实战项⽬的应⽤,丰富开发经 验、提升实战能⼒,为⾼薪就业提供保障。

Vue官网就非常全面: https://cn.vuejs.org/ 而且b站上面也非常多的视频教程。 学完开发一个pc端和移动端的网站练手。

7. React

如果说vue国内最火,那么国外react是最火的,而且 现在react在国内大厂使用非常普遍,也有越来越多人选择react。

8. 微信小程序

小程序也能增加我们就业方向,也需要我们学习。 学习并掌握⼩程序开发的相关知识,能够独⽴完成⼩程序的开发。通过学习跨平台⼩程 序技术⽅案,实现⼩程序的跨平台⽀持。 首推 uni-app 和  taro  来学。也是火的一塌糊涂。

最后一句话, 一个人自学很难,要么参加培训,要么拉个志同道合的人一起监督学习, 要是能找个师傅最美了。。。 加油吧,各位前端大神们~~~~

2020年最新版Web前端学习路线图-前端小白入门必读-pink老师推荐的更多相关文章

  1. 2019前端学习路线心得-黑马程序员pink老师

    在规划之前先给大家分享几点心得哈: 1. 学习,特别是在线学习,是非常辛苦的事情,为了少走弯路, 所以一定要系统学习,多借鉴与前辈们总结出来的经验. 2. 不要相信任何说 一周掌握 css, 一周学完 ...

  2. 2015 WEB前端学习路线图

    2015 WEB前端学习路线图,欢迎小伙伴补充 @落雨

  3. Web 开发者学习路线图

      2017 Web 开发者学习路线图(头图源自谷歌) 本文是源自 Github 上 Kamran Ahmed 建立的一个仓库.在文中,作者为他的老教授分享了一组成为前端与后端开发者以及 Devops ...

  4. 2020年全新web前端学习路线图,学完就业20K!

    第一阶段:HTML5+css 配套学习视频: 前端小白零基础入门HTML5+CSS3 第二阶段:移动web网页开发 移动web进阶教程 第三阶段:JavaScript网页编程 前端与移动开发基础入门到 ...

  5. 2019 Web开发学习路线图

    以下 Web 开发人员学习路线图是来自 Github developer-roadmap 项目,目前已经有繁体版翻译 developer-roadmap-chinese. 主要有三个方向,分别为前端开 ...

  6. 2018年web前端学习路线图

    前端的的技术一直在变化,更新和变革,现在基本是三驾马车(vue,angualr,react)主导整个前端框架,但是无论对于新人或者有经验的程序员,这些知识在必须掌握 前端必会技能 上图罗列了整个前端的 ...

  7. 个人前端学习路线图与github优秀前端开发者的路线图推荐

    1.个人目前学习的路线图 2.github优秀前端开发者的路线图推荐 打开github首页,在搜索框输入developer-roadmap,搜索github前端路线图 选择kamranahmedse/ ...

  8. web前端开发学习路线图

    Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...

  9. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

随机推荐

  1. async/await实现图片的串行、并行加载

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js操作复选框

    js操作复选框 JavaScript 代码: //复选框全选 $(function () { $("#select_all").click(function () { $(&quo ...

  3. 第六周学习笔记,vc各类控件的输入输出

    6w学习笔记 vc控件的输入输出 单选按钮 当单击 RadioButton 控件时,其 Checked 属性设置为 true,并且调用 Click 事件处理程序.当 Checked 属性的值更改时,将 ...

  4. jmap的使用以及内存溢出分析

    一.jmap的使用以及内存溢出分析 前面通过jstat可以对jvm堆的内存进行统计分析,而jmap可以获取到更加详细的内容,如:内存使用情况的汇总.对内存溢出的定位与分析 1.查看内存使用情况 jma ...

  5. Docker: Error response from daemon: Get.........unauthorized: incorrect username or password

    今天在Centos中使用docker拉取redis镜像时报Error response from daemon: Get https://registry-1.docker.io/v2/library ...

  6. node--fs

    1.fs模块内置方法 1)stat 检测是文件还是目录 fs.stat(fileAddress,(err,stats)=>{ //err 出错信息 //stats.isFile() 该东西是文件 ...

  7. 前端每日实战:132# 视频演示如何用纯 CSS 创作一只思考的手

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WgdVyx/ 可交互视频 此视频是 ...

  8. 纯CSS实现带返回顶部右侧悬浮菜单

    这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...

  9. 判断某个点是否在某个view上

    -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObjec ...

  10. 单列集合List

    1.Vector和ArrayList以及LinkedList区别和联系.应用场景 线程安全: Vector:如果创建Vector时没有指定容量,则默认容量为10,底层基于数组实现,线程是安全的,底层采 ...