刚转行做前端
写给: 刚转行、第一次接手真实项目的人
从「这个图标是干嘛的」一路看到「这个页面是怎么搭起来的」
走完之后: 你能看懂设计稿、能跟开发对上话、知道第一次改动该动哪一行
这条线写给刚转行、第一次接手真实项目的人。你可能看得懂教程,但一打开公司的项目就懵:满屏的框和字,不知道哪个是哪个,也不知道该从哪儿下手改。
顺序是从界面看得见的东西往底层的概念走。先认清按钮、提示、卡片这些每天都会碰到的小零件,再去看响应式和断点,弄明白同一套页面为什么能在手机和电脑上换一套排法,接着用弹性布局和网格布局把整页是怎么搭起来的串起来,收尾认识接口,知道页面上的数据是从哪儿来的。
走完这条线,你再看设计稿就不会只剩「好看」两个字,能指着某个区块说出它大概由什么组成。让你改一个按钮或者调一处间距,你知道该动哪一行、动完会影响哪儿,跟开发沟通也有了共同的词。
按这个顺序走
- 按钮 /button 入门 先搞懂界面上最小的可点单位,后面所有交互都是围着它转,这是入门的原点 页面上点一下就会触发某个操作的小方块
- 文字提示 /tooltip 入门 那些悬停才冒出来的小字,看懂它你就知道界面藏了多少没写出来的规则 鼠标放上去才冒出来的那行小字补充说明
- 卡片 /card 入门 把一条内容装进一个方框,学会它你就能一眼拆出页面上重复出现的结构 把一条内容装进一个独立的小方框里展示
- 模态框 /modal 进阶 盖住整页逼你先处理完的那个窗口,认清它你才不会被弹窗打断手头的节奏 盖住页面逼你先把这件事处理完的小窗口
- 响应式 /responsive 入门 同一套页面在手机上换了排法,看懂它你就明白前端不只为一块屏幕写代码 一套页面自动适配手机、平板和电脑,不跑版
- 断点 /breakpoint 进阶 屏幕宽到某个数就换排版,掌握它你就能预判页面什么时候会变脸 屏幕宽度到了某个数,页面就换一套排版
- 弹性布局 /flexbox 进阶 一排元素怎么自动排开对齐,学完它再看导航栏和按钮组就不再是黑盒 让一排元素自动伸缩、对齐方便的排版方式
- 网格布局 /grid-layout 进阶 把页面切成格子再往里放东西,这一步让你彻底看懂整页是怎么搭起来的 把页面切成格子,想放哪格放哪格的布局
- 接口 /api 进阶 最后认识程序和程序怎么要数据,知道它你就明白页面上的内容从哪儿来 两个程序之间约定好怎么互相要数据的接口