TODO本学期学习结束补充完整安卓端的前端开发
TODO后期补充完整vue.js,react分相关框架说明
TODO后期补充原型图和标记软件等使用
今天整理一下前端工程师的学习之路。做一件事,首先我们得理解他的定义,然后顺着那条路,一直走到黑。
前端工程师的工作我们首先得和视觉设计师的工作区分开来。
在这一篇文章里面我们介绍过几种职业的区别:工程师具体职责。那么前端工程师的工作就是将视觉设计师的设计稿以具体代码的形式去实现出来,生成静态文件交给后端人员。
实际开发中常见的有两大类,一类是pc端或者移动端的前端设计,代码就是最基础的HTML+CSS+JavaScript,另一类是以移动应用如安卓系统,iOS系统为主的应用,这一类因为目前本人还没太多接触,暂不过多描述,本学期学完之后进行补充。
那么下面开始进行学习之路!
零、写在开发之前
工欲善其事,必先利其器
1.编辑器(必选择)
推荐使用Sublime Text3作为编辑器,内含丰富的插件和整体风格,让编程成为一种美的享受。
当然你也可以直接使用电脑默认的记事本编辑。
2.ps(可选择)
ps在前端工作中有着很多功能,切图等等。
破解版ps下载地址
3.仿站工具
如果在网上看到了一款很棒的前端界面,可以使用这款工具将其整个扒下来,自行查找相关教程,使用方法很简单。
仿站小工具下载(链接:https://pan.baidu.com/s/1c3MO4nA密码:b93m)
4.其他诸如原型图,标记软件虽也和前端有关,不过在正式开发中都是分离的,后期继续补充。
一、基础学习
我们已经说过HTML+CSS+JavaScript是网页开发的最基本,首先需要对这三者有一个完整的了解。
这三者是网页开发的基础,所以需要不断的进行迭代学习,所谓迭代学习就是先快速的了解如何基础的使用他们,这是迭代学习第一轮,预计时间一到两周。
之后的迭代学习第二轮就是通过一个具体的实战对三者有一个新的完整认识,一定要通过实战,自己模仿一个案例,最基础的就是博客界面。正所谓前端仿博客,php做留言板。
迭代学习第三轮就是完整的对每一个标签或者样式进行深入学习,主要通过查看相关手册之类。
在线手册教程:可以前往菜鸟教程或者w3cschool。
视频教程:网上有很多相关的视频,极客学院,慕课网或者其他的,都很不错,当初我自己学习的时候使用的是一家课外辅导班自学it网里面十八哥的视频。提供链接如下:HTML+CSS+JavaScript链接:https://pan.baidu.com/s/1o9UBAdW密码:94s6
二、框架学习
不重复造轮子
学习完基础的之后,我们会发现需要实现很多功能利用这三个,比如轮播图,比如精美的按钮或者页面滑动之类。
你可能需要花很多的时间才能将一个“轮子”造好,所幸这是一个开源的好时代,我们不需要重复造轮子,网络上有许多现成的框架我们可以利用。
BootStrap,JQuery等等这些样式框架你可能并不陌生,只需要简单上其官网,就大致了解他的用法之类,菜鸟教程等上面也有其相关教程。
另外的一些ui也有很多,这里只简单列几个实用的,我们在后期开发中需要的几个。比如we-ui,和微信里面的界面非常好的对接,由微信团队开发,还有一款beyondadmin,一款后台管理的ui,我们在后期cms系统的开发中将会使用到,务必重视。
三、深入学习
更多的前端设计有时候甚至需要你自己完全的开发一套组件去适应项目的需求,所谓迭代学习法就是在不断学习当中充分理解,更加深入的理解。
最好的学习方法就是实战!以战促练!!
这里提供一些相关拓展的视频教程,部分项目比较完整,也比较有代表性,我也只看过部分的视频,总体质量还不错。
1.HTML5+Vue.js+Koa+zepto框架综合实战移动webAPP项目完整成型过程实录
链接:https://pan.baidu.com/s/1i63b27N密码:0v2t
2.其他教程,请自行复制链接下载
1.ps 链接: https://pan.baidu.com/s/1mjYbcJA(pqdt)
2.HTML5+CSS3从入门到精通.iso 链接: https://pan.baidu.com/s/1cUHz3o(gdyw)
3.Javascript视频教程 链接: https://pan.baidu.com/s/1i6eC5YP(ku5k)
4.Jquery视频教程 链接: https://pan.baidu.com/s/1pM4iJ2b(pk6v)
5.Bootstrap视频教程 链接: https://pan.baidu.com/s/1jKb2UDS(wr8c)
6.Vue.js 链接: https://pan.baidu.com/s/1slYqBa1(75xd)
7.Smarty模板引擎视频教程 链接: https://pan.baidu.com/s/1smewom5(v8vp)
8.Nodejs 链接: https://pan.baidu.com/s/1sm509GD(fux1)
9.Mysql视频教程 链接: https://pan.baidu.com/s/1kVTdjcr(e37d)
10.PHP视频教程 链接: https://pan.baidu.com/s/1kWE0qZP(xc4q)
11.oracle视频教程 链接: https://pan.baidu.com/s/1i6jwpal(hk6p)
12.nginx视频教程 链接: https://pan.baidu.com/s/1nxccLg1(x2q8)
13.ajax 链接: https://pan.baidu.com/s/1dHctdXv(jfwf)
14.mongodb视频教程 链接: https://pan.baidu.com/s/1c3EE7U4(7v8b)
15.Angular.js链接: https://pan.baidu.com/s/1jJhYrEu(ddci)
16.React链接: https://pan.baidu.com/s/1nwnrQxb(942g)
17.dedeCMS织梦视频 链接: https://pan.baidu.com/s/1bpQBCbP(ikns)
18.ThinkPHP视频教程 链接: https://pan.baidu.com/s/1ggiKvYV(7p5h)
19.案例和总结 链接: https://pan.baidu.com/s/1eTSNB5C(5rx7)
20.天猫商城购物车实战 链接: https://pan.baidu.com/s/1smVjb7v(cu4c)
最后,欢迎大家关注我的微信公众号:安卓源码案例资源
