我的前端入门之路
更新日期:
曾经作为物理学院的一名理工女,如今成为一名热爱代码的前端工程师。其中的过程也是颇为丰富,作为记录也好,参考也好,我都想写下来呢。仅供参考哦。
入门基础学习
前端基础三剑客(瞎编的): HTML、CSS、javascript
充分利用网络资源
- 最基础的语法可参考W3C,这也是一本很好的词典哦
HTML + CSS
- Bootstrap,大家都在用的样式框架
- Font Awesome,图标字体库
- jQuery Mobile,移动web应用程序的框架
- jQuery UI,建立在jQuery库上的一组用户界面交互、特效、小部件及主题
- 大家不妨用的时候也阅读一下这些框架/库的源码,有助于理解CSS特性哦
HTML5
- 每一项都值得你去深入探究哦
- 用于绘画的canvas元素,可做图片裁剪、创作游戏等等
- 用于媒介回放的video和audio元素,可插入音乐和视频哦
- 对本地离线存储的更好的支持,离线你的API哈哈
- 新的特殊内容元素,比如article、footer、header、nav、section,让你的代码更好懂
- 新的表单控件,比如calendar、date、time、email、url、search,记得考虑兼容哦
- 实时通信的websocket,建议同时解一下socket.io
- 超实用的File API,可以做图片预览等等
- 当然少不了sessionStorage和localStorage,可以作为页面间的通讯哦
CSS3
- 可以实现超级酷炫的动画效果,还有漂酿的样式哦
- w3cPlus上的CSS3教程不错哦
- 背景和边框,好看的按钮和阴影
- 文本效果,可以使用自己设计的字体哦
- 2D/3D 转换,配合动画和过渡一起使用哦
- 动画和过渡效果,快使用酷炫的交互效果吧
javascript
- 原生javascript是基础中的基础,但也是能力最强大的主角呀
- 推荐的书《JavaScript高级程序设计》,《JavaScript 权威指南》,花点钱买本正版吧,收益终身呀
- 基础的ECMAScript,js的自由度很高的哦
- DOM,若说浏览器是画布,DOM是画布上的内容,javascript就是画笔吧(瞎编+1)
- BOM,包括常用的window对象、location对象、history对象等等
学会使用和了解框架和库
CSS框架
- 上面提到的Bootstrap,Font Awesome,jQuery Mobile,jQuery UI都可以去了解看看哦
LESS/SASS
jQuery库
- 不得不说这是很强大的js库,曾经在我刚开始工作时帮助我解决了很多问题呢
- 这里有份《jQuery API中文文档》,查询专用哦
- jQuery可以帮忙解决初期的很多问题哦,例如:
- 1.消除了JavaScript跨平台兼容问题
- 2.丰富的DOM选择器,超便利的$()选择器哦
- 3.可以很容易地浏览文档、选择元素、处理事件以及添加效果
- 4.ajax操作支持,后面版本的还支持Promise哦
- 5.允许开发者定制插件,jQuery form插件不错哦
zepto库
- 轻量级的jQuery库,适合移动端
- 个人觉得了解一下就够了。。除了touch事件有些参考价值,还是jQuery强大多了
MVC/MVVM框架
- 这是待开拓的一大片领土,每个框架都有自己的特色和优势,很有意思哦
- 虽然说纷繁琳目,但其实选一个喜欢的用起来就好啦,当然生产环境的话得考虑稳定性、社区、维护这些哦
- AngularJS,MVVM
- React,MVC的V
- Underscore,JavaScript工具库
- Backbone,MVC,基于underscore.js
- Vue,国人MVVM的VM
- Avalon,国人MVVM
前端开发工具
编辑器
- DW(Dreamweaver)挺老了,比较重量级
- Sublime Text,很多人在用的
- Hbuilder,本人在用,感觉还不错
- Vim,听说很好用
Chrome开发者工具/Firebug
- 浏览器调试工具,很强大哦,只需在浏览器右键-检查就能打开啦
Gulp/Grunt
- 基于任务的javascript命令行构建工具
- 用于任务自动化,创建工作区等
Mocha/Jasmine/Karma
- Mocha/Jasmine是常用的前端测试框架
- Karma是驱动测试的Runner
其它前端工具
成为一枚优质前端工程师
注意代码规范
- 良好的代码规范对团队合作很有帮助哦
- 本骚年在这方面有警觉,但还是欠缺实践呢…
针对性研究
- 《理解Promise》
- 《XMLHttpRequest Level 2使用指南》
- 《浏览器的渲染原理简介》
- 《Javascript装载和执行》
- 《一个对前端模板技术的全面总结》
- 《浅谈HTML5单页面架构》
深入理解库/框架原理
- 学习研究源代码是个很好的爱好哦,对个人提升也很有帮助呢
- 当然像Bootstrap这样的优秀样式框架很值得阅读,建议直接翻开源码,配合浏览器调试工具一起学习吧
- 《深入理解JavaScript系列》
- 《jQuery源码分析系列》
- 《触碰jQuery:AJAX异步详解》
- React精华之虚拟DOM:《如何实现一个Virtual DOM算法》
- 《Angular学习笔记》
- 《Angular源码分析系列》
了解后台工作
- 了解和你一起合作的小伙伴们也是很重要的哦
- PHP、JAVA、Nodejs等服务端语言
- MySQL、MongoDB等数据库
培养你的热情
你热爱前端吗?不清楚?
那你喜欢逻辑吗,喜欢设计吗,想要将自己大大的脑洞里面装的所有有趣的都分享出来吗?
我喜欢思考,喜欢想象,热爱学习,沉迷那种把想法写成成果的喜悦。
如果你的热情跟不上,可以尝试一下设计些小项目:
博客
这是最大众的选择,但即使是这样普通的网页,依然可以刷上你喜欢的颜色,添加有趣的装饰,贴一些你的想法,分享自己的喜怒哀乐。
还有什么比拥有一个专属自己的空间更值得开心呢?
- 搭建方式:
- 1.使用现有工具快速搭建。可选择使用wordpress(基于PHP),或者是hexo(基于nodejs)。网上google教程,一搜一大堆,度娘和谷哥无论生活还是学习都是一强力工具呢(很可惜我的认知能力就到这里了。。)
- 2.网上下载一些喜欢的博客资源,然后根据自己的爱好进行修改
- 3.从基础开始,自己搭建。可以从静态页面开始,用最基础的HTML+CSS+javascript(jQuery)来编写你的静态页面吧。一步步实现自己的设计还是个很有成就感的事情呢。看我用静态页面和PHP搭的很多bug的博客
游戏
当然首先你自己得是个爱玩游戏的骚年。相信你会对自己在游戏中加入的小想法和念头沾沾自喜的。
- 编写选择:
动态页面
一个简单但却动效十足的交互页面也是很有意思的哦。可参考《酷炫HTML5》
当然这跟HTML5没多大关系,主要用的CSS3,不得不说CSS3太好玩了。
静态网页
静态网页可能没有前面的有意思,但也不妨为一种练习设计和基础的方式。
当然酷酷的你肯定可以设计漂亮的静态页面,又或者你可以用多种库和框架练练手呢。
参考入门初期写的一些网页: 《被删动漫》和《Restaurant》
结束语
一年多来,我学到的也就这篇文章差不多的东西。
前端很繁荣呢,还有很多很多的领域等待开拓和研究,相信你和我一样都满怀着好奇心和期待呢。
每天期待去上班的,不能只是我一个呀。让你的工作成为你美好生活的一部分吧。
码生艰难,写文不易,给我家猪囤点猫粮了喵~
查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我,欢迎关注“牧羊的猪”公众号噢