从 0 开始学设计、并将设计稿转成 HTML + CSS + JS

我的课程

什么是设计

如何选择设计工具

Adobe XD 初探

如何选择设计稿的画布大小

开启画布的网格辅助线

如何确定导航栏高度

如何选择字体

字体大小、字重、行高

颜色基础知识

调整设计稿的颜色

首页 - 主副标题

首页 - 文章列表

首页 - pagination、footer、sidebar

组件复用、避免多处修改

设计阶段小结

现代前端开发方式及 webpack 简介

增加 webpack 配置文件及清理 dist 目录

html-webpack-plugin、webpack-dev-server

增加 sass-loader 让 webpack 处理 scss 样式文件

webpack 提取 css 文件

配置 webpack 的开发模式及生产模式

webpack 生产模式下压缩 css 文件

使用 file-loader 及 html-loader 处理图片

增加 babel-loader

增加 webpack 多入口配置

通过 postcss-loader 自动增加 css 浏览器前缀

引入 bootstrap

bootstrap 默认字体、导航颜色、断点介绍

scss 文件结构微调，抽取 header、footer

文章详情 - 正文

文章详情 - 目录

本视频由保利威提供技术支持

设计阶段小结

上一节
下一节

反馈意见给小姐姐

本节笔记

本节笔记