怎么开展前端学习?

前端程序员最开始被称之为“切图仔”,现在呢它不再是掌握“HTML+CSS+JavaScript”三件套就能胜任的岗位了。但是JavaScript 学得好确实是必要的。

01 前端大佬成长记:刚毕业

怎么开展前端学习?_第1张图片

编辑切换为居中

添加图片注释,不超过 140 字(可选)

要达到熟练掌握HTML5、CSS3、JavaScript等Web开发技术,有良好的编程习惯;.熟悉业界主流前端框架 React、Vue优先;当然实习生可能要求没这么高,大致差不多,你会的越多选择的越多。做有准备的入职攻略机会更大

1.1 HTML5怎么学?

初识:网页组成和本质、浏览器、web标准、HTML骨架、vscode的简介和使用

认知:注释、标签组成和关系、标题和段落、换行和水平线标签、文本格式化标签、图片-基本使用

、绝对路径、相对路径、音频标签、视频标签、超链接

基础:列表、表格、表单-应用场景

除了多动手练习之外,学完后自己也要尝试做一个思维导图梳理一下知识点,你会对自己学习很有成就感的。 学会的合格标准:练习到闭着眼睛,脑海里有完整框架,直接上手就敲打的地步才算合格,然后进接着学。同时也别忘了多看一些精美的网页,查看代码思考它的框架布局,色彩搭配,功能体验。兴趣是最好的老师,把HTML5当做玩一样去学习,在学习中去体验玩的快乐。

怎么开展前端学习?_第2张图片

1.2 CSS3 怎么学?

主要学习CSS基础语法、选择器、文字样式、盒模型、CSS背景技巧、浏览器兼容、CSS hack、CSS高级技巧、BFC规范、网页开发规划及流程、CSS3编码规划、2D与3D变换、animation 动画、预处理器Less、Flex布局等内容。

怎么开展前端学习?_第3张图片

1.3 练习2个项目

第1个项目:HTML+CSS大项目1:品优购项目笔记+源码(万字收藏)

掌握目标

  • 能够遵循品优购代码规范

  • 能够在品优购首页中引入 favicon 图标

  • 能够说出三大标签 SEO 优化

  • 能够在品优购首页中使用字体图标

  • 能够说出 LOGO 需要哪些 SEO 优化

第2个项目:HTML+CSS大项目2:品优购项目笔记+源码(万字收藏)

掌握目标

  • 能够写出列表页

  • 能够写出注册页

  • 能够把品优购网站部署到本地服务器

  • 能够把品优购网站上传到远程服务器

1.4 JavaScript 怎么学?

在web开发应用层面JavaScript需要重点学习的内容并不是特别的多。但是需要一条清晰的学习路线了,基础部分(定义变量、函数、数组、字符串、内置函数、内置对象)——>面向过程的编程思想(在这里可以试着用自定义按钮、自定义播放器练习)——>面向过程编程思想(封装一些我们自己想的对象,提供有意义的接口) 主要需要大家掌握: 1、JavaScript的相关基础,即变量、数据类型、操作符、流程控制、函数、简单类型和复杂类型等内容, 2、jQuery的应用,jQuery是JS的一个框架,它提供了一种简便的JS设计模式,优化HTML文档操作、时间处理、动画设计和Ajax交互等内容。

3、JavaScript面向对象、函数进阶、递归及其应用、正则表达式、ES6等等JS的高级课程内容。高级课程内容相对难度会有所提升,但是只要能理解了相应的编程思维,整体掌握难度并不是很大。

怎么开展前端学习?_第4张图片

编辑切换为居中

图片来源网络,基础整理的很好,大家可以参考

如果作为一个城市的前端开发工程师,不仅需要掌握这些JS必备的技能,还需要掌握JS的主流框架Vue.js、React.js等等。需要拓展学习的内容比较多。所以在掌握了JavaScript开发技术之后,需要有更长的时间来进行拓展学习,才能在前端开发工作中更好地运用JS。

1.5 JS的主流框架Vue.js

Vue是一套用于构建用户界面的渐进式框架,与其他大型框架相比,Vue被设计为可以自底向上逐层应用。其他大型框架往往一开始就对项目的技术方案进行强制性的要求,而Vue更加灵活,开发者既可以选择使用Vue来开发一个全新项目,将Vue引入到一个现有的项目中。 学习的时候,要明白库和框架的区别、设计思想然后去掌握基础,随后做项目实操

怎么开展前端学习?_第5张图片

编辑切换为居中

Vue的数据驱动是通过MVVM(Model-View-ViewModel)模式来实现,VUE的工作原理:

1.6 React.js怎么学?

虽然React框架本身比较容易理解,结构很清晰,就是由十几个API组成,然后异步渲染。但是很多人反映上手还是有一定的的难度的。React是单向数据流,代码写起来会较双向数据流的多一些,但是同样的排查问题时思路清晰很多。

怎么开展前端学习?_第6张图片

编辑切换为居中

图片来源网络,整理的很好,大家可以参考

框架还有很多,可以工作慢慢学,用到什么学什么

1.7开始做项目吧大兄弟们,给自己简历贴金的时候

别想着投机取巧,基础不扎实,框架底层都没搞懂,工作难找的,扎实了就好好练习项目 项目查找网址:

  • https://www.leapcloud.cn/website/case#

  • apicloud.com/cases

  • 历趣应用商店 - 手机APP下载&手游排行榜

  • 小程序|小程序社区|小程序开发社区-极乐小程序社区-www.wxapp-union.com

  • http://app.weijuju.com/all_tpl.html?list=03_0_0

  • https://adhub.com.cn/#!/case

  • http://www.pc6.com/pc/shoujikanche/10/

  • 解放号数智版-伴行数字化转型的软件产业互联网

  • IT项目在线交易平台--米鼠网

另外大家在JavaScript的学习上,多多看一些经典书籍。少看一些速成的书籍!

  • 《JavaScript DOM编程艺术》

  • 《JavaScript权威指南》

  • 《javaScript DOM高级程序设计》

  • 《JavaScript设计模式》

02 前端大佬是怎么样的存在,一张图足够证明了,保存了开卷

怎么开展前端学习?_第7张图片

​get 性能优化

  • 1.了解前端性能衡量指标、性能监控要点,掌握一种前端性能监控方案

  • 2.了解常见的Web、App性能优化方案

  • 3.SEO排名规则、SEO优化方案、前后端分离的SEO

  • 4.SSR实现方案、优缺点、及其性能优化

  • 5.Webpack的性能优化方案

  • 6.Canvas性能优化方案

  • 7.React、Vue等框架使用性能优化方案

get 前端安全

  • 1.XSS攻击的原理、分类、具体案例,前端如何防御

  • 2.CSRF攻击的原理、具体案例,前端如何防御

  • 3.HTTP劫持、页面劫持的原理、防御措施

精进自己业务相关的内容

  • 1.能理解所开发项目的整体业务形态、业务目标、业务架构,可以快速定位线上业务问题

  • 2.能理解所开发项目整体的技术架构、能快读的根据新需求进行开发规划、能快速根据业务报警、线上日志等定位并解决线上技术问题

  • 3.可以将自己的想法或新技术在业务中落地实践,尽量在团队中拥有一定的不可替代性

后端技能

  • 1.了解后端的开发方式,在应用程序中的作用,至少会使用一种后端语言

  • 2.掌握数据最终在数据库中是如何落地存储的,能看懂表结构设计、表之间的关联,至少会使用一种数据库

怎么开展前端学习?_第8张图片

最后再给大家分享一些平时学习前端时,经常用到的一些辅助工具类网站。

网址

描述

unbug.github.io/codelf

变量命名智能推荐(支持中文)

www.docschina.org

Web 前端开发人员提供优质中文文档

regexr.com

正则表达式验证匹配

any-rule

正则表达式库,非常全,使用起来很方便

www.toptal.com/developers

多张图片合成雪碧图,并生成对应 css

tool.lu

众多工具集合,包括时间戳转换,进制转换等

www.bootcdn.cn 或 cdn.baomitu.com

国内的CDN库,速度快

www.jsdelivr.com

国外的 cdn 库,支持 github,npm,WordPress

www.gitignore.io

根据选择会去生成 .gitignore 文件

codesandbox.io

在线编辑代码

www.typora.io

实用的 Markdown 写作工具,所见即所得

mdnice.com

使 markdown 语法更加美观,如果你有写博客,那这个非常合适你(强烈推荐)

谢谢你在千万个回答中点开了小扎,希望对你有帮助~点赞收藏我会开心一整天~

你可能感兴趣的:(前端,前端,javascript,css)