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

课程说明

程序员/工程师 + 设计能力 = 无限可能

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

适宜人群

  • 对设计感兴趣的工程师
  • 对编程感兴趣的设计师

课程大纲

1. 设计

  • 课程介绍
  • 什么是设计
  • 如何选择设计工具
  • Adobe XD 初探
  • 如何选择设计稿的画布大小
  • 开启画布的网格辅助线
  • 如何确定导航栏高度
  • 如何选择字体
  • 字体大小、字重、行高
  • 间距
  • 颜色基础知识
  • 调整设计稿的颜色
  • 首页 - 主副标题
  • 首页 - 文章列表
  • 首页 - pagination、footer、sidebar
  • 详情页面
  • 标签页面
  • 组件复用、避免多处修改
  • 关于页面
  • 设计阶段小结

2. 搭建前端开发环境

  • 现代前端开发方式及 webpack 简介
  • hello 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 及 autoprefixer 自动增加 css 浏览器前缀

3. 前端开发

  • 引入 bootstrap
  • 导航栏
  • bootstrap 默认字体、导航颜色、断点介绍
  • 主副标题
  • 文章列表
  • 分页
  • 底部
  • 侧边栏
  • 标签页面
  • scss 文件结构微调,抽取 header、footer
  • 文章详情 - 正文
  • 文章详情 - 目录
  • 关于页面
  • 课程回顾

购买须知:
1、本课程为虚拟产品,一经购买,概不退款(讲师特别声明除外)
2、在使用过程中,遇到任何问题,请邮件联系:pr@sifou.com
3、划线价说明:商品展示的划横线价格为参考价,并非原价。该价格仅供您参考。

版权声明:讲者在本产品上发表的全部原创内容(包括但不限于文字、视频、图片等)著作权均归讲师本人所有。未经讲师授权许可,观众用户不得以任何载体或形式使用讲师的内容。

5.0 1条评价

忘了时间的钟 · 2019-11-16

34节少了一节导航栏,麻烦补下