设为首页 收藏本站
开启辅助访问 切换到宽版 快捷导航
菜单

编辑推荐

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

手把手带你打造自己的UI样式库

[复制链接]
admin发表于 2020-1-27 18:55:20 | 显示全部楼层 |阅读模式
5cfdcd1e00015cf203600480.jpg
. T& ^/ J$ O, |! N课程亮点+ \1 c* e! ^0 {. ]
  • 收获全部的 HTML、CSS 基础知识点
  • 掌握 UI 样式库的多种实战开发技巧
  • 以不同角色了解 UI 框架的设计思路
  • 规范开发,培养良好的前端编程习惯
  • 通过抽象需求、提炼代码,提升整合通用功能的能力/ ^- p7 n, h9 v1 k& l2 N
- U" D. }. h0 T4 F
课程介绍0 F1 h- |- q. q8 Y  q% |5 Q

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


8 u$ I0 s* s; a( j( U! v7 l: K# A
  • 源码可以改动
  • 可以完全满足产品的设计风格
  • 完成功能定制化
  • 利于风险控制
    " h" g3 _8 \/ X6 d0 c

; R5 j2 I- H6 t9 d" S

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


# `, k4 Q; R5 m4 A) x& C6 B/ s

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


6 e/ Y1 T) |' i1 Z6 o

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

( |8 I- {* ]; E: e6 u8 l

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


- D- o+ \  A6 e4 X

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

( @- v) x" Z- w

专栏模块:
- H5 F- m; D) }! P" w专栏布局基本按开发顺序进行,共分为七个模块:

) o; `! j) `5 n  V
  • 开篇:本模块为项目开篇,主要为理论性内容,包括课程的基本情况、关于 UI 框架的理解和 UI 框架设计的内容。
  • 磨剑:本模块主要内容为归纳知识点,旨在帮助打好基础,了解必要的 CSS 基础知识与规范,以及 HTML 基础知识点。
  • 列阵:本模块进入专栏主题,主要内容为优化移动端样式的基础布局,包括 CSS 规范要求的基本内容、整体页面布局和一些公共样式等。
  • 操练:本模块主要内容为开发移动端内一些常用组件的样式,比如网格布局、列表、菜单、信息提示和文本处理等技巧类的应用。
  • 集结:本模块主要内容为如何整合分散 Demo 为可用 UI 框架,并介绍该 UI 框架如何与其它技术结合。
  • 实战:本模块主要内容为利用完备的 UI 框架进行页面开发实战。
  • 复盘:本模块为专栏收尾,对专栏内容进行总结。7 ]  ?0 x  {4 e7 [6 l
$ ~$ e& j2 Z+ D9 u! i* n- d. v, Y
/ x$ c8 Y; ~) d. N, G

6 C+ x9 Q4 a, J2 n( O( y

2 l' |1 x4 N0 n: M" q( Y' {, _1 t( [5 A0 O+ a' {3 m
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则