视频 / 设计+编程

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

课程说明

Idea → Design → Code: 从 0 开始设计一个简洁的网站,并写代码将网站的 Web UI 设计稿转成 HTML + CSS + JS 格式。同时学习「设计」与「前端开发」基本技能

购买本课程¥199.00

课程目录

第 01 节:课程介绍 免费观看 时长:05:49 第 02 节:什么是设计 免费观看 时长:02:39 第 03 节:如何选择设计工具 免费观看 时长:04:45 第 04 节:Adobe XD 初探 时长:05:25 第 05 节:如何选择设计稿的画布大小 时长:05:00 第 06 节:开启画布的网格辅助线 时长:15:51 第 07 节:如何确定导航栏高度 时长:19:46 第 08 节:如何选择字体 时长:07:21 第 09 节:字体大小、字重、行高 时长:12:56 第 10 节:间距 时长:11:35 第 11 节:颜色基础知识 时长:08:14 第 12 节:调整设计稿的颜色 时长:10:58 第 13 节:首页 - 主副标题 时长:07:27 第 14 节:首页 - 文章列表 时长:21:42 第 15 节:首页 - pagination、footer、sidebar 时长:39:37 第 16 节:详情页面 时长:20:49 第 17 节:标签页面 时长:09:41 第 18 节:组件复用、避免多处修改 时长:06:30 第 19 节:关于页面 时长:22:14 第 20 节:设计阶段小结 免费观看 时长:07:18 第 21 节:现代前端开发方式及 webpack 简介 免费观看 时长:07:14 第 22 节:hello webpack 时长:09:48 第 23 节:增加 webpack 配置文件及清理 dist 目录 时长:08:07 第 24 节:增加 html-webpack-plugin 及 webpack-dev-server 功能 时长:08:48 第 25 节:增加 sass-loader 让 webpack 处理 scss 样式文件 时长:05:23 第 26 节:webpack 提取 css 文件 时长:04:06 第 27 节:配置 webpack 的开发模式及生产模式 时长:06:30 第 28 节:webpack 生产模式下压缩 css 文件 时长:03:52 第 29 节:使用 file-loader 及 html-loader 处理图片 时长:17:37 第 30 节:增加 babel-loader 时长:05:04 第 31 节:增加 webpack 多入口配置 时长:05:46 第 32 节:通过 postcss-loader 及 autoprefixer 自动增加 css 浏览器前缀 时长:03:50 第 33 节:引入 bootstrap 免费观看 时长:06:48 第 34 节:导航栏 时长:13:15 第 35 节:bootstrap 默认字体、导航颜色、断点介绍 时长:25:46 第 36 节:主副标题 时长:09:42 第 37 节:文章列表 时长:28:50 第 38 节:分页 时长:12:09 第 39 节:底部 时长:06:11 第 40 节:侧边栏 时长:18:56 第 41 节:标签页面 时长:07:51 第 42 节:scss 文件结构微调,抽取 header、footer 时长:04:14 第 43 节:文章详情 - 正文 时长:19:05 第 44 节:文章详情 - 目录 时长:23:12 第 45 节:关于页面 时长:22:25 第 46 节:课程回顾 时长:03:30