小白该如何系统性的学好前端开发?2020前端学习路线图总结_千锋广州小蚊子的博客-程序员宅基地

Web前端开发由网页制作演变而来,随着Web2.0的发展,网页不再只是承载单一的文字和图片,各种丰富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

经过了市场的沉淀,很多前端们开始无所适从,以前简单的技能已经无法适用前端技术的发展,新技术新框架又不断涌现,前端开发市场仍然有着大量的需求。我们知道前端开发应用是很广泛的,这些公司都有前端开发岗位(当然这只是一部分):并且薪资也不低。除了互联网公司,传统公司想要连接互联网,同样离不开前端工程师。而随着H5、微信小程序、各类APP的发展,对于前端的需求将一直上涨。所以总的来说,前端开发行业仍然有羹可分。并且营养丰富。

任何行业都需要努力,前端开发也不例外,首先你必须真的想要学习,想要改变。你需要有一个清晰的学习路线和方向,最好是能跟着有经验的人学习,这样才能快速入门前端,不走弯路。那么小白该如何系统性的学好前端开发呢?下面和千锋广州小编一起来看看吧!

前端开发的基础语法,由HTML+CSS+JavaScript组成,这是前端开发最基本的3个语言。

网页布局基础:HTML+CSS

HTML就是超文本标记语言,组成网页内容的最基本语言。你可以直接说他是网页的骨架,网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。

光是HTML做网页,只是有了内容,当然是远远不够的。因为只是HTML的话,只能用Table做布局才能勉强做出个成型的网页来。但是从Web2.0时代开始,都是盒子模型布局法了,也就是用DIV+CSS来实现布局了。

CSS就是层叠样式表。通过样式属性来对标签进行布局规范,在不再使用table布局的时候,只要CSS样式对网页标签进行对应的布局实现才是正确的开发方式了。

HTML(div)+CSS布局,是基础入门的基本步骤,在这个阶段,你需要学习的内容,包括有:

1.标签语义化,SEO

2.页面加载的流程和原理

3.网页结构

4.盒子模型(W3C盒子模型和IE盒子模型)

5.CSS选择器

6.CSS布局浮动、定位

在刚刚开始的阶段,大家学习的布局方式基本都是以px为单位的静态布局方法。熟悉好布局方法,先给自己一个小目标,做一个简单的电商网页的基本结构出来,不用特效,不需要交互。

浏览器脚本语言:JavaScript

JavaScript是我们学习前端开发中非常重要的一个内容,也是一个大家经常掉坑里的难点。JavaScript现在可以说是互联网时代使用率最高的脚本语言了,在网页中,所有的数据渲染,特效的交互都需要利用JavaScript,来影响浏览器的显示。

JavaScript不只是开发网页特效和渲染数据的重要内容,在学习前端开发的后期,大量使用算法和框架的时候,对JavaScript基础的考验也是很多的。

在基础阶段,我们学习JavaScript需要注意:

1.基本关键字指令

2.基本数据类型、数组

3.函数

4.面向对象编程

5.原型链、闭包

6.JSON

7.Ajax

8.DOM(文档对象模型 原生DOM操作)

9.事件捕获、冒泡、代理

10.常用函数方法

11.ES5、6、7

在JavaScript部分学习,主要还是要去理解好交互的原理,把原理分析清楚,真的理解语法,那写出多复杂的逻辑也是手到擒来。

JavaScript经典类库jQuery

说到学习JavaScript,很多小白同学肯定会很头痛他的原生写法。每次逻辑业务都需要手动写,也就是用一次就造一次轮子。觉得很麻烦。如果能简单一点就好了。

因为JavaScript有可以封装的特性,所以在后面也出现了很多用JavaScript封装的类库、插件。比如说最经典的类库就是jQuery了。

jQuery类库就是在类库里面封装好了很多JavaScript的事件方法。jQuery通过封装,减轻了遍历、对象选择等等很多的问题。把网页特效的实现变得简单化,通过调用方法就可以了。

html5-02.jpg

在学习jQuery的时候,需要重点认识的有:

1.jQuery语法和JavaScript原生语法的差异

2.Dom对象和jQuery对象

3.jQuery的入口函数和JavaScript的入口函数的差异

4.jQuery事件的执行逻辑。

学习jQuery,最需要达到的效果就是能快速的完成网页的特效,比如说轮播图、手风琴菜单、旋转木马、放大镜等等这些特效。能完成一个电商网站的布局+特效开发是最基本的要求了。

这些就是零基础学习必备的一些基本内容,在入门前端开发最基本需要掌握的东西,把基础理解好,才能为后面的学习做更多的准备。

多终端进阶学习

除了基础的PC端,目前移动端可以说是非常火的了。

比PC端单一的网页不同,在移动端的技术可以应用到Web-APP,小程序,Hybrid-App等等。

也就是我们常见的浏览器(以及内置浏览器,比如微信)打开的大型移动端网页。比如我们常见的电商网站,功能性网站,管理网站,在布局和功能上都有APP的效果。

做好Web-App开发,最基本的很多人肯定会说响应式布局,但是前端开发是又5种布局法的,除了出名的响应式,还有在移动端最重要的弹性布局法,也就是很多人头疼的rem布局。

除了布局方法之外,在H5新特性和触屏事件和设备兼容性问题也是需要信手拈来。

小程序

这个也不用多说,现在可以说是非常火的,各大平台都有在做自己的小程序,各种砍价,抢票,电商,游戏都有运用。这个以微信小程序为例,主要是微信团队基于前端基础来做的封装语法,主要的还是ES语法。小程序目前很多公司都是招聘前端开发,目前还没有独立的小程序开发工程师,所以小程序可以说是前端工程师高薪就业的加分技能,换句话说就是成熟开发必备了。

又称混合式APP,可能听说的人很少,但是18年是越来越多人去开发了,这种是能直接产出下载到终端的APP的,在体验感上可以说已经具备传统APP的大部分功能了。这种开发门槛较低,也就是前端开发就可以完成。多数都是大包平台就能做,这个你可以后面了解一下。

前端主流技术框架

前面的都是基础东西,现在去就业前端开发,不是只靠个基础东西,搞个移动端页面就可以算成熟了。前端3大框架,VUE、Angular、React这3个可以说是现在非常火热的了。

基础语法都可以写的前端,为什么还要框架?

很多小白朋友是不懂什么是框架的,只听过jQuery这些东西,以为就是框架。或者认为框架就是加速开发,觉得这些库、插件就能完成框架的工作了。

其实框架的出现,是改变前端地位的重要标志。最重要的表现,就是前后端分离,在前后端分离之前,很多后端开发都是又当爹又当妈的,效果不好效率也不高,我就是在后端出身,深知痛苦。

现在的前端项目,比以前是更加复杂化、多样化了。项目复杂了,问题也多了。

Web前端开发入门低的另一个重要表现就是符合8/2定律,也就是20%的东西使用率占到80%。所以很适合囫囵吞枣,因此我们的重点就是把这20%学起来,而首先要做的就是把这20%的东西找出来。前端这20%的东西大概就是常用的HTML标签,css的盒子模型,基本的原生js,以及熟练使用jquery,ajax,常见浏览器的兼容。拿下这些东西意义非凡,一方面证明你适合做前端这份工作,另一方面这些技能能让你找到一份工作。

让你能够从容地去学习剩下的80%。总之就是专心对付重要的东西,那些什么less、sass、angular这类的东西,当你把我之前说的基础打好之后,学习起来畅通无阻,随学随用。较难的就是实践,只有实践才能学到真正的技术,新人很难参与一些有价值有意义的项目,没有这些项目又很难成长,所以自己有项目可参与应该珍惜。

小白学习Web前端最常见的几个问题和误区:

1.无脑盲目的刷视频去看,但是很少去练习。正常的状态应该是在整个学习的过程中,四分之三的时间都是在练习。视频只是让你了解学习什么内容,看一遍就行了。有很多人都是无脑的刷视频看,最后浪费几个月的时间,也找不到工作。

2.小白开始学习的时候,看书是一种非常严重的误区。所以新手禁忌看书学习编程。至于原因是什么,在这里我不做太多解释。

3.很多人都是遇到一个问题,就是能看懂代码,但是不会写,这是比较常见的问题。

4.还有一个最现实的问题,就是学了后面的忘了前面,这是由于学习方法和方式存在这很大的错误。

5.整个学习流程混乱,没有系统的安排,学的不系统不专业,技术掌握的不好,浪费几个月甚至半年的时间。

6.缺乏和专业人士交流的过程,作为一个小白,在初期学习的时候,所学的最多的东西一定是从别人那里学到的,闭门造车。

不管是Web前端技术还是其他IT技术也好,其实都是从零基础开始的,你可以直接学习或者是通过相近经历转行。所以新人不需要因零基础而担心自己学不会。

想要成为合格的Web前端工程师,千锋广州小编认为其实也不是很难的事情,主要是要选择科学的学习方式,希望大家都能找到适合自己的学习方式吗,早日走上人生巅峰。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43703144/article/details/106763533

智能推荐

Spring-MVC-核心调用流程_普通网友的博客-程序员宅基地

}进入processRequest方法所在类:org.springframework.web.servlet.FrameworkServletprotected final void processRequest(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {long startTime = System.currentTimeMillis();Th

理解Latency和Throughput: 吞吐量和延迟_weixin_30631587的博客-程序员宅基地

Latency,中文译作延迟。Throughput,中文译作吞吐量。它们是衡量软件系统的最常见的两个指标。 延迟一般包括单向延迟(One-way Latency)和往返延迟(Round Trip Latency),实际测量时一般取往返延迟。它的单位一般是ms、s、min、h等。 而吞吐量一般指相当一段时间内测量出来的系统单位时间处理的任务数或事务数(TPS)。注意...

ToC和ToB有啥区别_山顶夕景的博客-程序员宅基地_tob和toc的区别

一、ToB和ToC的区别ToC(Consumer)面向普通用户服务,ToB(business)是面向企业用户服务。对公司的营销体系和商业模式而言,定位客户群体,决定产品设计、运营管理、市场营销等系列操作。1.1 业务形态不同ToC的需求更多是围绕衣食住行,可以参考马斯洛需求层次理论;ToB的需求更多是围绕机构所处的某个行业或者领域来展开,场景更复杂多样。ToC是“生活”,是“因点生点”;ToB是“生产”,是“因面生点”。1.2 产品需求不同ToC对产品需求更多是功能外部化,要“有趣”;ToB考虑的

项目中openlayer中使用,完整解决方案(数据库矢量数据,动态更新,分层,编辑)_weixin_34224941的博客-程序员宅基地

<http://www.cnblogs.com/SuperXJ/articles/1562144.html!--数据库中保存了点线面3个表。分别保存了点线面的信息和所在图层号。然后采用jsp读取mysql数据,然后组装成GML格式数据,然后用刀下面这段html代码来解析并显示GML中的数据。showmap.jsp文件内容为(由于是自己看,就不对代码做进一步说明):String hea...

Windows系统ADO访问access数据库,报无效指针错误_Mr_John_Liang的博客-程序员宅基地

开发环境 VS2008 ,开发语言 C++  MFC  如果使用的是OFFICE 2010 ,在本地测试没有问题,release版本,放到其他系统运行出现,访问数据库异常,”无效指针“,解决方法如下:WIN 7 系统 打入 SP1 补丁,然后在 安装 Windows6.1-KB2640696-v3-x64.msu补丁,即可。

whmcs不依赖index.php的方法,WHMCS版本自动升级方法_weixin_39895096的博客-程序员宅基地

WHMCS是一套专为主机业务开发集客户管理、财务和帮助系统于一身的在线交易软件。从注册开通到终止的整个过程,WHMCS都提供了强大的交易自动化模块,帮助主机商全权管理交易。WHMCS平台为了安全不断升级新版本,如你使用的是经WHM授权的正版程序,可以通过WHM网站下载最新安装程序进行升级,是免费的。小编之前在网上找了很多关于WHMCS升级的方法,有些写的很复杂,有些操作起来行不通,根本不是正确的。...

随便推点

php创建env文件,PHP框架laravel的.env文件配置详细流程_weixin_39609407的博客-程序员宅基地

PHP对.env文件的配置详解前言大家应该都知道使用laravel框架开发PHP程序的时候,配置框架的.env文件是至关重要的,这个文件上需要配置数据库、数据库用户以及缓存等,下面来一起看看详细的配置教程。一、配置APP_KEYlaravel框架默认在.env配置文件中硬编码了对称加密密钥,开发环境和生产环境不必且应严格禁止使用相同的APP_KEY在项目中运行php artisan key:gen...

linux 音频文件切割_适用于 Linux 系统的 6 款最佳音频编辑软件_weixin_39687359的博客-程序员宅基地

适用于 Linux 系统的 6 款最佳音频编辑软件无论你是专业的音乐制作人,还是只拿来剪辑剪辑音频,搞个手机铃声啥的,音频编辑软件总会派上用场。对于 Linux 系统而言,好用的音频编辑器就有很多款选择。在专业级用途,我们建议使用 DAW(数字音频工作站)。但是,并非所有用户的音频编辑需求都会用到那些强大而专业的功能,所以您应该了解一些简单适用的音频编辑软件。有介于此,系统极客在推荐了 5 款好用...

twitter爬虫小计_叶风飞扬的博客-程序员宅基地

以后技术类的尽量都发到csdn上来。安装ubuntu过程:http://blog.csdn.net/tangyajun_168/article/details/7063448安装Ubuntu在 virtualbox 时候遇到问题,在最后一步 重启时 报错,内存异常。网友提示:,安装完不要重启,把对话框关掉,然后正常关闭ubuntu。在Virtualbox中把安装盘卸载。

学计算机硬件有前途吗,现在学修电脑有前途吗?_weixin_39683858的博客-程序员宅基地

不知道你所谓的修电脑是修硬件还是只是软件或者系统维护。如果是修硬件,意义也不是特别大,现在电脑都成为了快销品,坏了就还,而且根据科技行业的摩尔定律,硬件除了自身老化等等问题,新出的软件、游戏对硬件的要求在一定的时间内就会要求更高,翻逼着硬件升级、淘汰,所以就算是修硬件也意义不是特别大。我自己用过很多电脑,绝对最好用的还是苹果的笔记本电脑,但是如果硬件坏了,我也会保修或者找厂家修,这样才放心。如果是...

刘汝佳 统计字符串中字符1的个数的错误_码尔泰的博客-程序员宅基地

课本上说有三个错误,一个导致无法运行,另一个导致结果不准确还有一个导致效率低下第一个:我觉得因为使用了strlen()函数,所以必须包含头文件<string.h>第二个:s[i]1应该是s[i]‘1’第三个:maxn太大,数组越界大神博客我和这位大神的想法一致...

python血压测量程序代码_利用TensorFlow2.0为胆固醇、血脂、血压数据构建时序深度学习模型(python源代码)..._weixin_39834205的博客-程序员宅基地

背景数据描述胆固醇、高血脂、高血压是压在广大中年男性头上的三座大山,如何有效的监控他们,做到早发现、早预防、早治疗尤为关键,趁着这个假期我就利用TF2.0构建了一套时序预测模型,一来是可以帮我预发疾病,二来也可以体验下TF2.0的特性先来看下数据结构:date表示的是测量日期cholesterol代表胆固醇数值blood_fat代表血脂blood_pressure代表血压整个的建模思路就是将这三个...

推荐文章

热门文章

相关标签