0基础学习前端开发的一些建议

以下纯属个人观点和建议,肯定是有局限性的,但是也希望能给你带来一些帮助。

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

接下来我会结合我的一点经验,给出前端系统学习路线的一些具体建议以及入门前端时的一些困境。

入门前端时的一些困境

1、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。比如 原型链,如果清楚 数据结构中链表结构,那么这个东西不难理解,再比如 哈希值,懂得数据结构中哈希表,哈希值也就迎刃而解。

2、计算机体系结构、操作系统理论、网络理论不扎实导致到后期一些东西难于理解。比如有同学从前端学习入手,后来学习node开发 ,在 I/O ,进程、线程、IPC 、线程锁方面有些概念就比较难于理解,而导致不能很好得使用node 的api 。

3、前端整体体系架构没有做过深入思考。

导致用会用,但不知道为什么用,用另外一个有什么区别。

4、学习环境中无高手。

没有高手能够指导自己进入下一个层次。

5、有意识但是没有行动我的网盘收集了一堆资料或者一堆视频,然后就没有然后了 。

目前企业招聘前端工程师的基本需求:

  • 1.精通DIV+CSS网页框架布局的HTML代码编写,熟悉W3C标准;
  • 2.使用HTML5/CSS3熟练地进行页面开发;
  • 3.具备良好的前端架构分析能力与设计能力,与开发团队保持良好沟通;
  • 4.精通各主流浏览器(IE6+、Firefox、Chrome、Safari)间的差异性,能快速定位和解决各种兼容难题;
  • 5.熟悉JavaScript、Ajax、Flash、JQuery、ExtJS等各种Web前端开发技术,具备一定的跨浏览器开发经验;
  • 6.熟悉Vue,react

学习路线,可以参考一下:

第一阶段:前端页面重构。主要内容包括PC端网站布局、HTML5+CSS3基础、WebApp页面布局。学完此阶段,学员可胜任Web前端开发工程师/前端页面布局与重构工程师,就业薪资为4K-6K;

第二阶段:JavaScript高级程序设计、PC端全栈开发。主要内容包括原生JavaScript交互功能开发、面向对象进阶与ES5/ES6/ES7应用、JavaScript工具库自主研发、jQuery经典交互特效开发、PHP+MySQL后端基础、前端工程化与模块化应用等。学完此阶段,学员可胜任HTML5大前端工程师、高级HTML5大前端工程师、网站开发工程师、移动前端开发工程师,就业薪资为6K-10K;

第三阶段:Node.js后端开发、Vue.js前端框架、React前端框架、混合开发(Hybrid,RN)、Angular前端框架、大数据可视化。学完此阶段,学员可胜任高级HTML5大前端工程师、全栈工程师、移动前端App开发工程师、微信开发工程师、小程序开发工程师、数据可视化开发工程师,就业薪资为10K-15K。

前端的学习差不多就是上面的三个阶段,如果没有什么基础的初学者,学完差不多也需要半年才能找工作。当然有一定基础的同学能够更快掌握前端技术。因此学习前端的小伙伴不用纠结学习时间要多久,更应该注意的是学习质量才对。毕竟只有学到了有用的技能,才能不愁找不到工作。

如何入门前端

1、前端市场分析

如今互联网的快速发展下,很多公司的前端人才缺口巨大。根据各大招聘网站的统计,其用人数量已经远远超过主流编程语言Java、ASP、和ios等开发人员的数量。一些人担心前端行业会饱和,其实这种担心完全是多余的。技术无论怎么发展,整体市场是不会饱和的,饱和的也只会是低端饱和,高端始终缺人。在未来,专业的前端开发工程师才是企业真正争夺的香饽饽。而被淘汰的不是前端开发,而是淘汰技术落后和技术不精的开发者。从薪资上来说,前端和后端的薪资基本是一样的,但前端的市场需求会比后端的更大。随着互联网的深入发展,用户体验则是企业的重中之重,而前端,作为公司的门面,需求会越来越大。从职业发展上来说,作为互联网时代直接触达用户的窗口,前端无处不在,应用的领域广阔,前景一片光明。

2、前端应用场景

前端交互是要直接呈现给用户的界面,每个按钮每一次跳转,都需要前端开发。因此我们可以看到前端开发存在的方方面面,比如网站设计优化、各色各样H5、app/小程序开发等等。随着互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。如今手机更是成为人们生活中不可或缺的一部分,人们迎来了体验为王的时代。移动端的前端技术开发前景宽阔。此外,前端技术还能应用于智能电视、智能手表,甚至人工智能领域也出现了前端的应用场景。

3、发展路线

刚入门的零基础小白,应该把重点放在 CSS和HTML基础知识的学习上。比如web标准、HTML相关概念、HTML标签、路径相关概念、锚点及其他、表格标签、表单标签、综合案例,注册页面、CSS选择、CSS字体样、CSS外观属性、调式、CSS复合选择器、标签显示模式、CSS背景、CSS三大特性等等。

JavaScript一直都是前端工程师进步的基石, JavaScript 的理解深度决定了前端开发者的职业发展。关于JavaScript的学习内容包括了浏览器执行JS过程、JS变量、数据类型、运算符等。只有在熟悉了JavaScript基础语法的基础上,我们才能继续深入学习前端开发技术。

我们常用的库工具有JQuery、underScore、zepto、Moment 等。这些库给我们提供了很大的便利,省去了我们编写相关方法的时间,同时也是我们的程序更加稳健。当然对于这些库我们不仅仅只是去了解 API,我们需要去学习它的源码。看看如果自己写相关方法的话是不是也想到了这种方式,这些库工具是也是一个很好的学习工具,我们不应该忽略。

接下来学习的内容包括了node环境安装、node模块化、gulp使用、服务器和http协议、Ajax函数封装、同源策略、JSONP、 CORS、jQuery中Aajx方法的使用、Ajax补充内容。完成这部分学习路线的内容可以基本掌握前后端数据交互、基于前后端分离模式、传统模式的开发的工作。因此可以具备企业基础用人标准,实现零基础小白到初级前端开发工程师的华丽转身。

然后我们要学习Vue指令、修饰符、样式绑定、v-model底层原理、计算属性、过滤器、侦听器、vue组件、Promise、Fetch、axios、vue路由、前端工程化和模块化等等。学完以上内容,大家能够实现基于Vue技术栈项目的开发能力,基本能够达到中级前端开发工程师水平。

4、前端入门建议

在大家作为一名零基础小白入门前端之前,首先要问自己一个问题:你为什么要学习前端?如果只是为了混一个高薪的工作,不愿意持续的学习成长,对前端也不感兴趣,那还是建议你再慎重考虑要不要学习前端。毕竟前端这个行业如果你在入门前没有做好从初级跨入高级的准备,后期的职业发展将会遭受巨大的职业瓶颈,甚至在学习前期就会轻易放弃。

另外,建议零基础的初学者正确认识自己的学习能力。如果入门自学都比较困难,不妨报个靠谱一点的培训班。毕竟培训班只需要交学费,就可以为大家提供更好的学习氛围,还可以让大家少走一些弯路。而且IT技术是更新换代非常快的,如果自学效率差,学到的东西很快就没有用了。

关于前端的长期职业规划,大家要明白的是前端已不是从前的前端,不仅仅是切页面做特效,如今的前端项目越来越庞大,需要重视项目组织和管理,需要工程化,需要前端架构。而且学习一门后端语言更有利于在前端的路上走得更远。

以上就是0基础学习前端开发的一些建议的详细内容,更多关于学习前端开发的资料请关注我们其它相关文章!

(0)

相关推荐

  • 前端框架学习总结之Angular、React与Vue的比较详解

    近几年前端的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React,Vue.js,Angular2等: 3.开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术: 4.前端开发范围的扩展,如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,Reac

  • asp.net基础学习之前端页面布局

    前端就是给人看的界面,后台人员不仅要知道后台代码的编写,更要知道前端的布局.有时候要比前端人员知道的还要多,因为有可能前端人员是个21天精通ps的大师级人物.这时候你可以自己写前端. 1.CSS  •CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.就语法而言,  •CSS是一种容易学习的语言.它的"语法"仅由几个概念组成,使得它相当容易入门.CSS的难点在于所有主流浏览器呈现页面的方式.尽管实际

  • webpack学习教程之前端性能优化总结

    前言 曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了.近年来Web前端开发领域朝着规范开发的方向演进.体现在以下两点: 1.MVC研发构架.多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题...) 2.构建工具层出不穷.多多益处(提升团队协作,以及工程运维,避免人工处理琐碎而重复的工作) 模块化开发 将前端性能优化理论落地,代码压缩,合并,缓存控制,提取公共代码等 其他的还包括比如你可以用ES 6 或CoffeeScript写源码,然后构建出浏览器支持的E

  • 前端主流框架vue学习笔记第一篇

    vue应该是前端主流框架中的集大成者,它吸取了knockout,angular,react设置avalon的经验,支持各种模式写法,入门很简单,从本章开始,会记录学习vue中的点点滴滴,以笔记的形式形成博文. 1.Hello World 和任何框架一样,使用前必先引入,我们这里直接使用cdn资源,创建index.html,编写如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  • 新手学习前端之js模仿淘宝主页网站

    先给大家展示下效果图: 图片资源链接:http://pan.baidu.com/s/1jHAdLNg 密码:5uo1 html 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href=&quo

  • 前端主流框架vue学习笔记第二篇

    接上篇,在本篇中,我们将要实现如下,功能,编辑和查询,我们当前的todolist程序,和线上其它的demo程序不同,我们会对其进行增删改查的基本操作,之后进行进一步的完善,按照常规的系统使用经验,一般我们新增和编辑都是在模态框中处理,这里我们不会去构建复杂的模态框,只用一个简单的div层来代替,后期接下来的文章中我们会重复造轮子,构建我们自己的轻量级框架(UI库). 首先,我们对我们的页面结构进行一下简单的调整,加入bootstrap只是为了让页面不那么赤裸裸,对其它不会有任何影响 <!DOCT

  • 前端学习笔记style,currentStyle,getComputedStyle的用法与区别

    style.currentStyle.getComputedStyle区别介绍 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styl

  • 聊聊那些使用前端Javascript实现的机器学习类库

    机器学习(Machine Learning)在最近几年绝对称的上是大火,越来越多的公司和资本投入了巨大资源和金钱到这个新上位的技术"新宠"中,尤其是随着更多的各种机器学习相关类库的出现和发展,更多新的技术已经被应用到了机器学习中, 现在大家可以看到, Python不再是唯一个老牌机器学习的必用语言, 对于现代神经网络(neural networks)语言不再是一个问题, 你基本可以使用任何的编程语言, 包括今天我们介绍的标准前端开发语言 - Javascript Web的整个体系已经在

  • 0基础学习前端开发的一些建议

    以下纯属个人观点和建议,肯定是有局限性的,但是也希望能给你带来一些帮助. 我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一,所以多我们提出的要求也就越来越高了.所以我们需要的也就不仅仅只是掌握css.html.JavaScript了,但是这三大件一直都是前端的根本,这一点从未改变,而这三大件中JavaScript又是重中之重. 接下来我会结合我的一点经验,给出前端系统学习路线的一些具体建议以及入门前端时的一些困境. 入门前端时的一些困境 1.因一些基础算法.数据结构理论不扎实导致一些

  • Java web基础学习之开发环境篇(详解)

    Tomcat + Eclipse添加Java EE插件 因为之前进行Java SE学习已经配置了JDK,安装了Eclipse for Java SE,所以选择了在Eclipse上添加插件的方式来配置Web开发环境 Tomcat是免安装版,直接解压即可: Eclipse中"帮助-安装新软件",work with处选择Mars - http://download.eclipse.org/releases/mars(注意对应自己版本): 选择Web.Java EE那个选项进行安装即可,如果报

  • Swift 3.0基础学习之扩展

    介绍 扩展可以为类,结构体,枚举和协议添加新的功能.包括可以对没有源码访问权限的类型进行扩展.扩展和 Objective-C 分类 的概念类似.(和 Objective-C 的分类不一样的是,Swift 扩展没有名称). 在 Swift 中,扩展可以做到: 添加计算的实例属性和计算的类型属性 定义实例方法和类型方法 提供新的初始化器 定义下标 定义并使用新的嵌套类型 使现有类型符合协议 值得注意的是:扩展可以为类型添加功能,但是不可以重写现有的功能. 扩展语法 使用关键字 extension 定

  • Swift 3.0基础学习之枚举类型

    枚举语法 使用关键字 enum 定义一个枚举 enum SomeEnumeration { // enumeration definition goes here } 例如,指南针有四个方向: enum CompassPoint { case north case south case east case west } 这里跟 c 和 objective-c 不一样的是,Swift 的枚举成员在创建的时候没有给予默认的整型值.所以上面代码中的东南西北并不是0到3,相反,不同的枚举类型本身就是完全

  • Swift 3.0基础学习之下标

    前言 类,结构体和枚举都可以定义下标,使用下标可以快速访问集合,列表或者序列的数据成员元素.可以使用someArray[index]来访问Array, 使用someDictionary[key]来访问Dictionary. 一个类型可以定义多个下标. 定义一个get set的下标: subscript(index: Int) -> Int { get { // return an appropriate subscript value here } set(newValue) { // perf

  • Swift 3.0基础学习之类与结构体

    前言 和其他语言不同的是,Swift不需要为自定义的类和结构体创建接口和实现文件.只需要创建单一文件用来创建类和结构体,其他的外部接口的代码系统会自动生成.下面这篇文章主要介绍了关于Swift 3.0类与结构体的内容,感兴趣的朋友一起来看看吧. 类和结构体区别 Swift的类和结构体具有以下相同的特点: 可以定义属性来保存值 可以定义方法来提供功能 可以定义下标来使用他们的值 可以定义初始化器来配置他们的初始化状态 可以在默认的实现上扩展他们的功能 遵从协议来提供标准的功能 类具有结构体没有的额

  • Swift 3.0基础学习之闭包

    前言 闭包是功能性自包含模块,可以在代码中被传递和使用. Swift 中的闭包与 C 和 Objective-C中的 blocks 以及其他一些编程语言中的 lambdas 比较相似.下面这篇文章就来详细介绍了关于Swift 3.0中的闭包,感兴趣的一起来看看吧. 开始 闭包的书写格式如下: { (parameters) -> return type in statements } 如 reversedNames = names.sorted(by: { (s1: String, s2: Str

  • 前端开发工具nvim来代替VSCode安装配置

    目录 1. Neovim是什么 2. 我们为什么需要Neovim 3. 如何配置Neovim 3.1 安装第三方终端 3.2 安装neoviem 3.3 快速启动neovim 3.4 创建neovim配置文件 3.5 配置字体 4. 终端模拟器之选 4.1 iterm2 4.2 alacrittty 4.3 kitty 4.4 Neovide 1. Neovim是什么 在此之前,我一直都是使用VSCODE或者WEB STORM编辑器的. 他们确实好用方便. 直到我得了腱鞘炎之后. 不得不寻求减少

  • 前端开发基础javaScript的六大作用

    javaScript基础详解 首先讲javaScript的摆放位置:<script>与 </script>可以放在head和body之间,也可以body中或者head中 JavaScript的六大作用: 1直接在script输出 document.write("<h1>This is a heading</h1>");//document.write表输出,括号中h1标签同样有效 2对事件作出反应 <button type=&quo

  • 前端开发TypeScript入门基础教程

    TYPESCRIPT 官网 github TypeScript是一种由微软开发的开源.跨平台的编程语言.它是JavaScript的超集,最终会被编译为JavaScript代码. 可以看看官网的5分钟 TypeScript Tooling in 5 minutes 安装 TypeScript 命令行运行如下命令,全局安装 TypeScript: npm install -g typescript 安装完成后,在控制台运行如下命令,检查安装是否成功: tsc -V 第一个ts程序 新建文件 test

随机推荐