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

编辑推荐

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

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

[复制链接]
admin发表于 2020-1-27 18:55:20 | 显示全部楼层 |阅读模式
5cfdcd1e00015cf203600480.jpg 8 M: k" G3 `) W6 H* h) a2 A: b/ w
课程亮点
, Q# G% d1 y* H; _' q, t, B
  • 收获全部的 HTML、CSS 基础知识点
  • 掌握 UI 样式库的多种实战开发技巧
  • 以不同角色了解 UI 框架的设计思路
  • 规范开发,培养良好的前端编程习惯
  • 通过抽象需求、提炼代码,提升整合通用功能的能力
    5 M% ~  j# K6 s# u

; ^3 ?% [9 K( O- Z3 i  ^) z! ^5 v4 m课程介绍  v/ {' Q$ N% l" p! [

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


! s: Q5 U# h1 U3 t5 N
  • 源码可以改动
  • 可以完全满足产品的设计风格
  • 完成功能定制化
  • 利于风险控制. w. a3 s; h$ h9 j

% M% Z& _' q( W0 |0 M

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


$ S) H% ]5 m" k% v  ]5 |  l

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


, L: T) i9 d/ E" ]4 `! c( X

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


# q  q: r2 O4 s) V

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


5 h& {- a, A3 Q' p9 H6 h4 S9 t

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

& o) M0 r. a! \( n9 j, _. n9 B

专栏模块:
- B& K. C7 L) F$ |$ b8 `专栏布局基本按开发顺序进行,共分为七个模块:

: }7 W+ B% e# `
  • 开篇:本模块为项目开篇,主要为理论性内容,包括课程的基本情况、关于 UI 框架的理解和 UI 框架设计的内容。
  • 磨剑:本模块主要内容为归纳知识点,旨在帮助打好基础,了解必要的 CSS 基础知识与规范,以及 HTML 基础知识点。
  • 列阵:本模块进入专栏主题,主要内容为优化移动端样式的基础布局,包括 CSS 规范要求的基本内容、整体页面布局和一些公共样式等。
  • 操练:本模块主要内容为开发移动端内一些常用组件的样式,比如网格布局、列表、菜单、信息提示和文本处理等技巧类的应用。
  • 集结:本模块主要内容为如何整合分散 Demo 为可用 UI 框架,并介绍该 UI 框架如何与其它技术结合。
  • 实战:本模块主要内容为利用完备的 UI 框架进行页面开发实战。
  • 复盘:本模块为专栏收尾,对专栏内容进行总结。9 g% E" b" o$ ?' V

! Q6 ?& A$ ~: b5 H- K! u* i% o: o
8 C1 |  F, U( Z" R

0 e8 k( a7 d2 r9 r% J. {1 u3 r
+ M7 g) o1 {2 S! Z  x! R6 E
回复

使用道具 举报

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

本版积分规则