综合 PC 端企业项目开发视频合集

TIP

当我们深入系统的学习了 HTML/HTML5、CSS/CSS3 相关知识和针对性的案例训练之后，恭喜你 ！已经具备了完成 PC 端项目开发基础前提 ^_^

接下来我们先进入第一个企业项目开发的综合应用和实践。重构所有基础知识和最新的大厂开发标准来一次完整的最佳实践和系统训练。

第一个综合 PC 端项目开发学习流程：

• 掌握企业项目开发规范和最佳实践，Git 项目管理；
• 1:1 还原 UI 设计必备的前置技能 + 开发工具
• 熟练掌握企业项目开发流程
  • UI 设计稿 -> PS 中标记为切图 -> 导出至蓝湖或墨刀（国内企业用的多）这类团队协作平台 -> 下载网页开发所需素材 -> 在蓝湖或墨刀中量取尺寸 -> 完成项目开发 -> 兼容性测试 -> ....

UI 设计稿，在钉钉裙文件中或联系助理老师获取即可 ...

1、Web 前端项目开发规范和最佳实践

本节课包含的知识内容概述：

• 从 HTML/CSS 的诞生，CSS 的版本迭代，到 CSS 的研究方向了解本质，看清方向，明确出处，方便遇到问题随时可查阅。
  • HTML 的诞生，CSS 的诞生，CSS 的版本，CSS 的研究方向
• CSS 文件划分及功能分类
  • CSS 文件划分，CSS 功能分类，重置样式，网站通用布局
  • 通用模块，通用原件，通用响应式系统
• 标签默认样式及清除
  • 标签默认样式，清除默认样式 - YUI Reset CSS，清除默认样式 - CSS Tools: Reset CSS
  • 清除默认样式 - Normalize CSS，CSS 重置样式最佳实践
• CSS 方法论及样式规范
  • 常见的 CSS 方法论：OOCSS，BEM，SMACSS，Atomic CSS
• CSS 样式规范，CSS 命名规范
• Git 项目管理
  • Git 的基础配置，创建 Git 本地版本库，获取 Git 仓库，初始化项目基础配置
  • 新建远程仓库、使用 Gitee，添加远程仓库提交地址，Git 提交、创建分支等
• CSS 还原 UI 设计前置知识和前端项目开发的必备工具
• 长度单位与颜色分类
  • 长度，绝对长度单位，相对长度单位，颜色，颜色关键词，RGB 颜色，RGBA 值，HEX 颜色，HSL 颜色
• UI 设计图的源文件种类
  • 布局与 UI 设计图，什么是设计图源文件，常见的源文件有哪些
• Photoshop 还原 UI 设计
  • PS 软件下载安装，尺寸、文字、颜色等信息的获取，切图操作：启动生成器，勾选图像资源
• 蓝湖 App 快速标注信息
  • 蓝湖是什么 ？蓝湖的下载安装，蓝湖的基础使用
• PxCook 自动标注工具
• imgcook 设计稿智能平台

Web 前端项目开发规范和最佳实践 (opens new window)

CSS 还原 UI 设计，前端项目开发的必备工具 (opens new window)

点击查看完整版视频讲解

2、项目开发前的准备工作，问题答疑

本节课包含的知识内容概述：

• 如何获取 UI 设计稿，并同步到蓝湖
• 墨刀平台的介绍
• 阿里巴巴 iconfont 图标库项目管理，实现在线管理
• 项目结构的搭建，Git 项目版本管理，常见问题答疑

点击查看完整版视频讲解

3、PC 端项目开发（一）

本节课包含的知识内容概述：

• 通过蓝湖设计稿分析项目结构
• 创建项目文件，Reset CSS 的最佳实践，base.css ，global.css ，index.css
• 导入所需 iconfont 图标库文件企业项目用法
• 使用 HTML5 语义化标签搭建网页的代码结构，完成网页头部结构、topbar 结构
• 自定义网页字体实践，对于不同选择器的应用，空心三角形，实心三角形布局，旋转，箭头动画
• 块级元素水平垂直居中对齐在项目中的实践，CSS 样式实现下拉菜单+动画，清除浮动的实践
• 实现完整网页头部的布局开发

点击查看完整版视频讲解

4、PC 端项目开发（二）

本节课包含的知识内容概述：

• 实现 “完整网站头部，侧边栏导航” 模块的开发
• 重构上节课网页头部的源代码，实践企业项目的开发标准；
• 侧边栏滑动导航布局，轮播图布局

点击查看完整版视频讲解

5、PC 端项目开发（三）

本节课包含的知识内容概述：

• 实现 “轮播图、歌单推荐” 模块的开发
• Swiper 官方插件的学习和应用，Swiper 自定义样式和动画
• 歌单推荐，选项卡切换，原生 JS 实现

点击查看完整版视频讲解

6、PC 端项目开发（四）

本节课包含的知识内容概述：

• 实现 “自在游乐 健康成长” 模块开发
  • 浮动布局，定位布局，会呼吸的动画效果
• 在线视频弹框模块开发
  • video 的应用，视频弹框布局，原生 JS 实现视频弹窗效果

点击查看完整版视频讲解

7、PC 端项目开发（五）

本节课包含的知识内容概述：

• 实现 “推荐信息 ，手风琴图片动画展示、网页的底部” 模块开发
• 伪元素下划线实践，滑动动画开发
• 原生 JS 操作 CSS 动画，iconfont 实践，定义列表标签的实践
• Git 项目提交

点击查看完整版视频讲解

8、移动 WebApp、多端响应式开发视频教程

移动端、多端响应式项目训练

点击学习，综合移动 WebApp、多端响应式企业项目开发视频合集 (opens new window) 👆