专栏
下载APP
手把手带你打造自己的UI样式库
前端开发进阶必学
Rosen · 一线互联网架构设计师

共计45节 · 已更新45节

2544人已订阅

课程亮点

  • 收获全部的 HTML、CSS 基础知识点
  • 掌握 UI 样式库的多种实战开发技巧
  • 以不同角色了解 UI 框架的设计思路
  • 规范开发,培养良好的前端编程习惯
  • 通过抽象需求、提炼代码,提升整合通用功能的能力

课程介绍

市面上开源的 UI 框架有很多,但一般规模比较大的公司都会选择自建一套 UI 框架。自建框架的好处有:

  • 源码可以改动
  • 可以完全满足产品的设计风格
  • 完成功能定制化
  • 利于风险控制

自建框架的优势如此突出,作为一个前端开发人员,尤其是想从初级前端开发向中级前端开发进阶,学会自己制作 UI 框架是一项必备技能。能够成为一个大公司的前端 UI 库开发参与者,甚至是发起人、主导者,对于个人的职场提升,有着举足轻重的作用。

讲师 Rosen,热爱前端技术的研究与分享,拥有多年一线架构设计和开发经验。曾任职 360 云事业部高级前端开发工程师、去哪儿国际酒店前端负责人,在此期间积累了大量的 UI 框架开发经验。现在作为一名创业者,在过程中感受到自建 UI 框架对前端技能提升的重要性,便以公司内部使用的 UI 框架设计和开发过程作为案例来分享如何实现属于自己的移动端 UI 样式库。

本期专栏学习方法分为 “夯实基础 —— 实战 —— 理解设计思路 —— 项目拓展” 四个层次。从熟悉基础的 HTML、CSS 知识点开始,实战整合每一个 UIDEMO 组件,理解 UI 框架的设计思路到学会开发方法进行项目扩展、开发自己需要的组件。循序渐进让同学们了解一个 UI 框架的整体开发过程。

案例主要实现的是一个移动端网站的样式框架。为了让同学们把注意力集中在样式开发,核心项目只使用 HTML 和 CSS 技术进行实战。在专栏的最后部分,对部分周边技术栈(Nodejs、打包工具、JS 等)进行参考应用,让同学们了解此 UI 框架如何与其它技术对接。

因为希望同学们可以利用碎片化时间灵活学习,本专栏尽量减弱上下文的内容依赖,从而实现让大家可以在工作之余进行充分学习与实战,理解开发一个定制化 UI 框架的思路和方法,并同时掌握里面涉及的 CSS 相关知识,相信一定会对大家的前端技能进阶大有帮助。

专栏模块
专栏布局基本按开发顺序进行,共分为七个模块

  • 开篇:本模块为项目开篇,主要为理论性内容,包括课程的基本情况、关于 UI 框架的理解和 UI 框架设计的内容。
  • 磨剑:本模块主要内容为归纳知识点,旨在帮助打好基础,了解必要的 CSS 基础知识与规范,以及 HTML 基础知识点。
  • 列阵:本模块进入专栏主题,主要内容为优化移动端样式的基础布局,包括 CSS 规范要求的基本内容、整体页面布局和一些公共样式等。
  • 操练:本模块主要内容为开发移动端内一些常用组件的样式,比如网格布局、列表、菜单、信息提示和文本处理等技巧类的应用。
  • 集结:本模块主要内容为如何整合分散 Demo 为可用 UI 框架,并介绍该 UI 框架如何与其它技术结合。
  • 实战:本模块主要内容为利用完备的 UI 框架进行页面开发实战。
  • 复盘:本模块为专栏收尾,对专栏内容进行总结。
查看全部
专栏目录
目录
适合人群
  • 计算机及软件方向的在校生
  • 1-4 年初中级前端开发工程师
  • 对样式开发有兴趣的后端开发工程师
  • 对样式开发有兴趣的 UI 设计师
购买须知
  1. 本专栏为图文形式内容服务,共计 45 小节,上线时间为 2019 年 6 月 11 日,预计 2019 年 8 月更新完成;
  2. 本专栏更新时间为每周一,三,五更新 1 篇,形式为图文;
  3. 订阅成功后,用户即可通过慕课网 PC 端、App 端、WAP 端享有永久阅读的权限;
  4. 慕课专栏为虚拟内容服务,订阅成功后概不退款;
  5. 在专栏阅读过程中,如有任何问题,请邮件联系 kf@imooc.com;
  6. 慕课专栏版权归本平台所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布 / 发表,违者将依法追究责任。
0 / 2
登录后可任选 2 个小节免费阅读
weixin_夏君_0

觉得老师这个实现真的牛,一个input实现了滑块的开关切换,css入门容易,但是深入的确是需要沉淀的,好的css,能减少很多麻烦事情

讲师回复:代码这东西越熟练,就会觉得需要写的代码越少
2019-09-05
1
weixin_宗校_0

看完了 今天是教师节 。谢谢老师

讲师回复:够快的!多写写!--回复内容不能少于10个字
2019-09-10
0
我是这海底的咸鱼

看完之后,等于对之前的知识点进行了回顾和总结,举的例子都很好,更新快点就好了

讲师回复:稍安勿躁,正在全马力的往下进行呢
2019-06-12
1
weixin_丽华_0

又get 到新技能了,感谢老师!

讲师回复:收到!--回复内容不能少于10个字!
2019-08-23
0
东篱散散

很清晰

讲师回复:感谢支持!也欢迎随时提意见。
2019-06-13
3
聂成阳

写的不错啊,快点更新啊

讲师回复:来了老弟,后面的正按着节奏往出放呢
2019-06-18
1
手机丢了

例子很棒😎ི一看就懂

2019-06-17
0
催晚

一口气看到最新了,感觉内容十分有用,期待更新

讲师回复:感谢支持,后面的章节正踩着节奏往出放呢
2019-06-13
0
安安之夜

我是做后端的,css很差劲,这门课程适合吗

讲师回复:你好,这门课程在设计时尽量降低了入门门槛,了解一些基本的CSS基础就可以学习。
2019-06-22
0
王军校0207

写的非常好,对于我这新手来说,真的是醍醐灌顶啊

2019-06-22
3
前端小师弟

太有帮助了,最近正在想优化页面加载,多谢了老师

2019-06-21
2
手机丢了

代码规范很有用了!别的地方学不到呀~

2019-06-26
0
兮漫天

很明确 赞一个

2019-07-05
1
qq_慕斯卡722970

简直化腐朽为神奇

2019-07-25
0
qq_技术王晓磊_0

谢谢老师,您的讲解让我豁然开朗

讲师回复:有用就好!--回复内容不能少于10个字!
2019-07-26
0
c最喜欢吃苦瓜

收获很多,谢谢老师!

讲师回复:收到!--回复内容不能少于10个字!
2019-08-07
0
如果你Y能重来

写了很久样式基本都是在用class,其他的虽然知道,但真的很不熟,特别现在写小程序,好像属性、伪类、伪元素选择器都是不支持的。经过老师这么言简意赅的系统讲解,收益很多。

讲师回复:除了个别伪类选择器,都是能用其他方法解决的
2019-08-21
0
慕丝3009349

我是在一家大公司做前端很多年了,因为公司有自己的UI组件,平时开发工作基本不需要或很少写CSS,只是公司业务复杂度比较高,基本就是写写JS逻辑,CSS一直处于菜鸟级别水平。虽然自己一直有想法提高CSS,但是东平西凑的零散学习和缺乏练习基本没有什么效果,一直找不到进步门道。买了这门课程后学习了10几章了,说实话,讲得非常好,课程结构安排合理,知识点总结归纳到位,逻辑清晰有条理,表述透彻。相信大家都听说过二八定律,精力集中在最重要的20%上才能保证学习效果,老师每次都是把核心关键知识点全部讲到位了,(当然课程本身肯定远不止20%,但是也不可能全部涵盖,这没有意义),学习的关键是抓住关键和本质,然后自己再慢慢去扩展和延伸。这篇专栏在总结知识点的底层规律,关键本质上真的做得很好。看得出来这些东西都是平时老师用心整理归纳过的,感谢老师付出,在这里分享一下学习心得,好东西值得帮忙宣传!

讲师回复:收到!这个专栏体量不小,接着干吧。有问题也随时提。
2019-08-03
0
慕数据7345090

越看到后面越精彩,还是非常有料的~

讲师回复:足够丰满吧--回复内容不能少于10个字!
2019-08-14
1
_凹凸曼_4

讲的很详细 如果能结合js 实现事件就更完美了

讲师回复:一步步来,先把样式写明白了,结合js的话就要选择具体的技术栈了
2019-07-16
0
— 造烛求明,读书求理 —
¥78.00
立即购买