By 被删

更新日期:

文章目录
  1. 1. 入门基础学习
    1. 1.1. 充分利用网络资源
    2. 1.2. HTML + CSS
    3. 1.3. HTML5
    4. 1.4. CSS3
    5. 1.5. javascript
  2. 2. 学会使用和了解框架和库
    1. 2.1. CSS框架
    2. 2.2. LESS/SASS
    3. 2.3. jQuery库
    4. 2.4. zepto库
    5. 2.5. MVC/MVVM框架
  3. 3. 前端开发工具
    1. 3.1. 编辑器
    2. 3.2. Chrome开发者工具/Firebug
    3. 3.3. Gulp/Grunt
    4. 3.4. Mocha/Jasmine/Karma
    5. 3.5. 其它前端工具
  4. 4. 成为一枚优质前端工程师
    1. 4.1. 注意代码规范
    2. 4.2. 针对性研究
    3. 4.3. 深入理解库/框架原理
    4. 4.4. 了解后台工作
  5. 5. 培养你的热情
    1. 5.1. 博客
    2. 5.2. 游戏
    3. 5.3. 动态页面
    4. 5.4. 静态网页
  6. 6. 结束语

曾经作为物理学院的一名理工女，如今成为一名热爱代码的前端工程师。其中的过程也是颇为丰富，作为记录也好，参考也好，我都想写下来呢。仅供参考哦。

入门基础学习

前端基础三剑客（瞎编的）： 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框架

LESS/SASS

  • LESS将CSS赋予了动态语言的特性，如变量，继承，运算，函数等
  • SASS让CSS语言更强大、优雅。它允许你使用变量、嵌套规则、mixins、导入等众多功能，并且完全兼容CSS语法

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

其它前端工具

成为一枚优质前端工程师

注意代码规范

  • 良好的代码规范对团队合作很有帮助哦
  • 本骚年在这方面有警觉，但还是欠缺实践呢…

针对性研究

深入理解库/框架原理

了解后台工作

  • 了解和你一起合作的小伙伴们也是很重要的哦
  • PHP、JAVA、Nodejs等服务端语言
  • MySQL、MongoDB等数据库

培养你的热情

你热爱前端吗？不清楚？
那你喜欢逻辑吗，喜欢设计吗，想要将自己大大的脑洞里面装的所有有趣的都分享出来吗？
我喜欢思考，喜欢想象，热爱学习，沉迷那种把想法写成成果的喜悦。
如果你的热情跟不上，可以尝试一下设计些小项目：

博客

这是最大众的选择，但即使是这样普通的网页，依然可以刷上你喜欢的颜色，添加有趣的装饰，贴一些你的想法，分享自己的喜怒哀乐。
还有什么比拥有一个专属自己的空间更值得开心呢？

  • 搭建方式：
    • 1.使用现有工具快速搭建。可选择使用wordpress（基于PHP），或者是hexo(基于nodejs)。网上google教程，一搜一大堆，度娘和谷哥无论生活还是学习都是一强力工具呢（很可惜我的认知能力就到这里了。。）
    • 2.网上下载一些喜欢的博客资源，然后根据自己的爱好进行修改
    • 3.从基础开始，自己搭建。可以从静态页面开始，用最基础的HTML+CSS+javascript(jQuery)来编写你的静态页面吧。一步步实现自己的设计还是个很有成就感的事情呢。看我用静态页面和PHP搭的很多bug的博客

游戏

当然首先你自己得是个爱玩游戏的骚年。相信你会对自己在游戏中加入的小想法和念头沾沾自喜的。

  • 编写选择：
    • 1.idea不足的时候，可以选择自己喜欢的一款游戏，使用前端去编写。
    • 2.又或者可以下载已有的游戏，改成成自己喜欢的样子。
    • 3.脑洞够大的你，当然要写一份自己设计的游戏啦。
      看我的《打嗝的巴士》和《弹珠》

动态页面

一个简单但却动效十足的交互页面也是很有意思的哦。可参考《酷炫HTML5》
当然这跟HTML5没多大关系，主要用的CSS3，不得不说CSS3太好玩了。

静态网页

静态网页可能没有前面的有意思，但也不妨为一种练习设计和基础的方式。
当然酷酷的你肯定可以设计漂亮的静态页面，又或者你可以用多种库和框架练练手呢。
参考入门初期写的一些网页： 《被删动漫》和《Restaurant》

结束语

一年多来，我学到的也就这篇文章差不多的东西。
前端很繁荣呢，还有很多很多的领域等待开拓和研究，相信你和我一样都满怀着好奇心和期待呢。
每天期待去上班的，不能只是我一个呀。让你的工作成为你美好生活的一部分吧。

码生艰难，写文不易，给我家猪囤点猫粮了喵~

B站: 被删

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢

作者：被删

出处：https://godbasin.github.io

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

文章目录
  1. 1. 入门基础学习
    1. 1.1. 充分利用网络资源
    2. 1.2. HTML + CSS
    3. 1.3. HTML5
    4. 1.4. CSS3
    5. 1.5. javascript
  2. 2. 学会使用和了解框架和库
    1. 2.1. CSS框架
    2. 2.2. LESS/SASS
    3. 2.3. jQuery库
    4. 2.4. zepto库
    5. 2.5. MVC/MVVM框架
  3. 3. 前端开发工具
    1. 3.1. 编辑器
    2. 3.2. Chrome开发者工具/Firebug
    3. 3.3. Gulp/Grunt
    4. 3.4. Mocha/Jasmine/Karma
    5. 3.5. 其它前端工具
  4. 4. 成为一枚优质前端工程师
    1. 4.1. 注意代码规范
    2. 4.2. 针对性研究
    3. 4.3. 深入理解库/框架原理
    4. 4.4. 了解后台工作
  5. 5. 培养你的热情
    1. 5.1. 博客
    2. 5.2. 游戏
    3. 5.3. 动态页面
    4. 5.4. 静态网页
  6. 6. 结束语