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. 查看网卡信息 - ethtool

    查看网卡是千兆还是万兆网卡,使用ethtool 网络接口名 ethtool eth0

  2. 我去,你写的 switch 语句也太老土了吧

    昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意.但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:& ...

  3. 大马提权详细过程webshell到提权

    .在shell路径这一栏里输入服务器端cmd.exe对应的绝对路径,这里用我们刚刚上传上去的smallchao.exe 8.WINDOWS常见命令:net user 查看所有用户query user ...

  4. 从0开始搭建一个阿里云java部署环境

    一.购买服务器 https://www.aliyun.com/daily-act/ecs/activity_selection?spm=5176.8112568.738194.8.674c9ed53Y ...

  5. vue-cli2.0项目 添加骨架屏

    1.创建项目 npm init webpack project 3.下载   vue-skeleton-webpack-plugin 插件 npm install vue-skeleton-webpa ...

  6. python常用软件包

    redis数据库: 链接:https://pan.baidu.com/s/1X_ndCj0scF2WZd2FPLRKag 提取码:e3zm git安装包: 链接:https://pan.baidu.c ...

  7. css中:link和@import的区别

    两者都是外部引用css的方式.但是有一定的区别: 1. 从属关系:link是一个xhtml标签,除了加载css外,还可以定义 RSS.rel 连接属性等: @import属于css范畴,只能加载css ...

  8. c js 字符串反转

    1.例如:输入 i am     a student    输出 student a am i #include <stdio.h> #include <string.h> v ...

  9. SQL的模糊查询(转载)

    本文由转载而来: 原文地址链接:http://www.cnblogs.com/GT_Andy/archive/2009/12/25/1921914.html 在进行数据库查询时,有完整查询和模糊查询之 ...

  10. 有关EPX Studio使用DELPHI5作为基础环境版本的说明

    英巴卡迪诺北京科技有限公司,地址是北京市朝阳门外大街18号丰联广场B座813B,这家公司这家公司不拥有:delphi 1.0~delphi7.0 .delphi 2005版本的著作权,这些都还是属于B ...