前端从业者如何做一个职业规划? 骑猪看日落 2022-11-19 09:42 176阅读 0赞 ![887c423d7734354d320c3b0e9493f845.png][] # 前言 # 如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者~ 笔芯❤️~ 我曾经即当过学霸也当过学渣,从小不爱学习的我,每一科成绩都不及格,成天和朋友们出去玩耍,然而是什么时候开始转变成为学霸的呢?那就是我的父亲教我数学的那一刻起,我的学习突飞猛进,在班里每次考试不是第一就是第二,再也不用老师教我数学了,哈哈哈!!! 我当时坐在倒数第二排的边边角角的位置,那绝对是“爱玩耍,爱讲话”的风水宝地,天天拉着前面的女同学愉快的交流起来,当时的成绩可想而知,这样的小子一定是成绩很差的(但是当时成绩也不算低啦,考低了还是怕被父母凑的),从父亲教我学习开始,第一次的第一也许会让老师感到这小子有点6哦,不过接二连三的数学成绩第一名让老师对我充满信心,上课每次的最后一道大题都是叫我上去做,然后我分分钟做完的那种。 你们知道是什么改变我的学习成绩吗?你们可以猜猜~ 是的,因为我父亲手把手教我学习,做练习题,教我解题思路。当时只是一本数学练习题,做完后,我的数学都会了。我相信每一个人都是一样的,大家的头脑其实都是一样的,只要努力你也能成为你想要的人。 目前,我是一位编程开发人员,专注于Web前端开发,每天大量的时间投入到学习中去,请大家记住一句话:**永远不要拿年龄与时间来当借口,当你想成长的时候,当下就是最好的年龄,时间永远都能抽出来。** 接下来,我将展开对**前端从业者如何做一个职业规划**讲解。文末有重磅资料!!!! # 前端开发职业简介 # 首先说说web开发前景怎样?据我所知,目前web前端工程师的年薪待遇平均在10万以上,高级HTML前端工程师年薪达30—50万,很多企业对于与web前端相关的技术职位更是求贤若渴。 Web前端开发工程师,是从事Web前端开发工作的工程师。主要进行网站的开发、优化、完善的工作。不得不说,web前端开发工程师的“黄金时代”正在走来。Web前端开发技术包括三个要素:HTML, CSS, JavaScript,随着RIA的流行和普及,XML、Flash/Flex、Silverlight和服务器端语言也是前端开发人员应该掌握的。 下面我将从第一部分入手,说说:web前端开发简介,web开发过程,web前端开发职业技能。 ## web前端开发简介 ## ![b56631ef36042841f4110baecb74c76d.png][] 那么什么是web呢?Web是万维网(World Wide Web)亦作“Web”“WWW”“‘W3’,是一个由许多互相链接的超文本组成的系统,通过互联网访问。 而web开发目前主要分为前端和后端两部分,后端指的是程序、数据库和服务器层面的开发,而前端指的是直接与用户接触的网页,网页上通常有HTML、CSS、JavaScript等内容。 ![358a84f3de0b3d1544063ae5ad8e9365.png][] 我们常常用到的浏览器,你们知道作用是什么吗?是的,它是用于显示网页内容,并让用户与这些文件交互的一种软件。而我们常用到的浏览器有如下:IE、谷歌浏览器(Chrome)、火狐(Firefox),一般人很难理解什么是Web服务器?但是它其实就是一部提供Web服务的计算机。 当我们在浏览器输入的地址,其实是叫URL,如下即是它的格式: URL的一般格式如下: 协议://主机地址(IP地址)+目录路径+参数 复制代码 通过地址输入到浏览器地址栏中, 我们就能上网,查找我们想要的学习内容,这部分看到的大都是来源于我们前端开发程序员。 ![54f4c5a5c512f02c9500c3691208fe03.png][] 接下来我们了解一些网络应用程序架构:分 B/S架构(Browser/Server) 和 C/S架构(Client/Server) B/S架构(Browser/Server)的特点有: 无需安装特定客户端程序,通过URL访问;跨平台能力(Windows、Linux、Android、IOS…);无缝升级,客户端免维护;不能直接使用客户端硬件资源,用户体验单一。 而 C/S架构(Client/Server) 的特点有:需要安装特定客户端程序;针对不同平台开发不同版本;升级应用须重新安装;充分应用客户端硬件资源,构建大型3D效果应用。 ## web开发过程 ## 如图,我们可以清晰了解web开发过程: ![3a51332fe42c0ce47de9cbf8a1bfd35f.png][] 了解其开发过程中,所需的内容人员团队: ![df4f0c4c6ecfeff4ab4f20e9e25c889d.png][] ## web前端开发职业技能 ## ![3639644c13e0a2dbf97afcea19c8b5de.png][] 由图要知道第一,职业技能定义是:利用HTML、CSS、JavaScript、网页开发框架等专业知识、方法和工具将产品UI设计稿实现成网站的技能。 第二,职业技能特征是:具有较强的逻辑思维能力,拥有良好的编写代码习惯,沟通能力强,具有运用色彩搭配、点线面布局来设计较好用户体验网站页面的能力。 需要充分考虑到了 Web 前端开发从业人员的职业发展路径与成长路径,以职业素养、职业技能、知识水平为主要框架结构,设计了 HTML 基础及 HTML5 标签、CSS 及 CSS3 应用、JavaScript基本语法与高级编程、ES6 标准、数据库应用、项目模块化开发、各种复杂的交互与优化等知识和能力等模块。面向的主要岗位包括网页设计、网页制作、响应式页面搭建、移动网页制作与设计、网站搭建(门户(行业)网站、交易类网站、企事业网站、娱乐性质网站)、网站规划与设计等。 # 前端开发规划 # 其发展路线为:Web 初级前端开发工程师 ,Web 中级前端开发工程师 ,Web 高级前端开发工程师,这三部分。 ## Web 初级前端开发工程师 ## 那么说说Web页面制作基础需要掌握内容: 第一,(了解)Web简介 第二,掌握HTML语法基础 第三,HTML文本图像元素(掌握、应用) 第四,HTML表单表格元素(掌握、应用) 第五,HTML超链接元素(掌握、应用) 第六,CSS基础(了解) 第七,CSS样式修饰(掌握、应用) 第八,CSS盒子模型(掌握) 第九,CSS布局(掌握、应用) 对于要掌握的JavaScript程序设计: 1.JavaScript语法基础(掌握) 2.分支、循环语句(掌握) 3.函数(掌握、应用) 4.数组、字符串(掌握) 5.正则表达式(掌握) 6.对象(掌握、应用) 7.BOM对象(掌握) 8.DOM对象(掌握、应用) 9.JavaScript事件处理(掌握、应用) 对于HTML5和CSS3开发基础与应用的掌握: 1.HTML5简介(了解) 2.HTML5新增元素(掌握、应用) 3.表单控件新增属性(掌握、应用) 4.CSS3新增选择器(掌握、应用) 5.CSS3新增属性(掌握、应用) 对于轻量级框架开发应用的掌握: 1.JQuery框架概述(了解) 2.JQuery选择器(掌握、应用) 3.JQuery中的DOM操作(掌握、应用) 4.JQuery事件(掌握、应用) 5.JQurey效果(掌握、应用) 6.JQuery Ajax(掌握、应用) 下面给出案例,可以学习做做试试: ![af8809d2d8ba215f37c54f14de888759.png][] ![ad76e217b0df9b5f9e778d8ce6bb6d1c.png][] ![bdec37a775aa0ad41fe0a69651866901.png][] ![df8baacb50c9bd7d6fb7b4e7bcd3ea6d.png][] 案例重点要求: 100%实现UI效果图。HTML结构清晰,标签使用尽量做到语义话。根据功能划分功能模块,便于日后调整页面内容。按照标准网站构建目录,做到CSS、HTML、图片分离。 ## Web 中级前端开发工程师 ## 当我们来到中级时,所需掌握: 1.深入浅出MySQL数据库:MySQL概念(了解),MySQL安装(掌握),MySQL范式(掌握),MySQL表结构管理(掌握、应用),MySQL用户管理(掌握、应用),MySQL基本语法(掌握、应用),MySQL事务管理(掌握),MySQL视图(掌握),MySQL索引(掌握),MySQL分区(掌握),MySQL触发器(掌握、应用),MySQL存储过程(掌握、应用),MySQL数据备份与恢复(掌握) 2.PHP技术与应用:PHP概述与工作原理(了解),PHP环境搭建与安装(掌握),PHP语言基础(掌握),PHP操作函数(掌握、应用),PHP图形图像处理(掌握),PHP文件系统处理(掌握),PHP面向对象程序设计(掌握),PHP操作数据库(掌握、应用),PHP Web开发框架-Laravel(掌握) 3.Web前后端交互技术:WEB概述(了解),HTTP协议(掌握),Ajax(掌握、应用),Iframe(掌握、应用)等 4.响应式开发技术:Bootstrap等。 可以做一做案例: ![cf144ccc4dc772d031ba76ffe247099a.png][] ![a905f22cbbb1e2b379ff69b99c09f2c8.png][] ![9dab17db9181493b912538ed8cdf3816.png][] ## Web 高级前端开发工程师 ## 来到了高级,这就是最重要的了。 如图要掌握内容: 1.WEB前端框架简介及VUE简介(了解) 2.VUE基础知识(掌握、应用) 3.VUE组件(掌握、应用) 4.VUE工程化工具(掌握) 5.VUE路由(掌握、应用) 6.VUE状态管理(掌握、应用) 7.UI库(掌握、应用)等 我们也可以做做案例: ![aa9c452c57038904aaf006aa52ea0173.png][] ![063f43e1a5fd4fbe111ce35392e0c965.png][] ![20277acc7cd7fb7fe311a8e7d4b9b95f.png][] 要注意的是,如果你已经有工作的话,你的职业规划绝对不能脱离你现在的工作。实践出真知,工作带给你的实践环境,才是你成长的营养来源。 前端不管演变成什么,它所关注的永远是 用户体验,这其实也只是互联网的本质只不过端增加了,开发的方式也增多了而已。 人生是没有局限的,只要你想努力,什么时候开始都不算晚。 # 最后 # 作为一个初入前端圈的新人,你或许对上面描述的东西并不完全理解,这没有任何问题。做一个适合自己的职业规划,并不急于一时,其实最好是在工作一段时间后,才能真正确定自己的真正感兴趣的东西。 另外,我在工作之余对前端面试题做了一系列的整理,有需要的朋友可以点击下方蓝字阅读: * **[2020大厂JavaScript面试题汇总,持续更新中~][2020_JavaScript]** * **[2020大厂Vue面试题汇总,持续更新中~][2020_Vue]** * **[【建议收藏】2020最新cookie面试题汇总,持续更新中~][2020_cookie]** * **[657页前端面试题+答案,分类学习整理,良心制作,持续更新中~][657]** * **[前端面试官:请你说一说函数节流和防抖][Link 1]** [887c423d7734354d320c3b0e9493f845.png]: /images/20221119/b1c56ae2379b432b87b061838cdc12fc.png [b56631ef36042841f4110baecb74c76d.png]: /images/20221119/2bf8b2e3c73d43b4a08f640d9f88d252.png [358a84f3de0b3d1544063ae5ad8e9365.png]: /images/20221119/4aa2eaacf2bc420fa6d12635b511acbe.png [54f4c5a5c512f02c9500c3691208fe03.png]: /images/20221119/865eae4a4dae433c87638321443a8c6d.png [3a51332fe42c0ce47de9cbf8a1bfd35f.png]: /images/20221119/477d647668b142d4a0929ee46397ff4a.png [df4f0c4c6ecfeff4ab4f20e9e25c889d.png]: /images/20221119/7edf97b371564179892405d6cd1f7b10.png [3639644c13e0a2dbf97afcea19c8b5de.png]: /images/20221119/c4fec9c11a344c89b7419c69aee761d4.png [af8809d2d8ba215f37c54f14de888759.png]: /images/20221119/3d5b037afc724c338f5555a40a286af3.png [ad76e217b0df9b5f9e778d8ce6bb6d1c.png]: /images/20221119/eb8fde16008047efaece9e4d04439b97.png [bdec37a775aa0ad41fe0a69651866901.png]: /images/20221119/56982b0ad9e5468ca587ba78f0561385.png [df8baacb50c9bd7d6fb7b4e7bcd3ea6d.png]: /images/20221119/d4d312dbf9824e288348a26e90e381a1.png [cf144ccc4dc772d031ba76ffe247099a.png]: /images/20221119/639abcee8a0a427c8b4198619fa94471.png [a905f22cbbb1e2b379ff69b99c09f2c8.png]: /images/20221119/cb5a4540686043eabc5d8275410bcd17.png [9dab17db9181493b912538ed8cdf3816.png]: /images/20221119/6b1d48c88f0744698753dabde596453a.png [aa9c452c57038904aaf006aa52ea0173.png]: /images/20221119/6927c635618a46cca1d9d46eeb796226.png [063f43e1a5fd4fbe111ce35392e0c965.png]: /images/20221119/04e2dea9ddfe438fb52e1417e8d4837a.png [20277acc7cd7fb7fe311a8e7d4b9b95f.png]: /images/20221119/6aef11532f8849a0ac6fec8d24103f7e.png [2020_JavaScript]: https://www.jianshu.com/p/b8ffcb663e1f [2020_Vue]: https://www.jianshu.com/p/f51f3597f99c [2020_cookie]: https://www.jianshu.com/p/716e16913f24 [657]: https://www.jianshu.com/p/31d95314ecde [Link 1]: https://www.jianshu.com/p/55d283835eab
还没有评论,来说两句吧...