我们的第2个原创项目上线啦
我们的 第 1 个原创项目 是练习 HTML，也是唯一一个专门练习 HTML 的项目。
如约而至，我们的第 2 个原创项目(戳此查看项目介绍)主要是练习 CSS。
CSS 的内容比 HTML 要多很多，因此我们会有几个原创项目专门练习 CSS，帮助你提升 CSS 技巧，并熟练编写 CSS 代码。
作为第一个 CSS 的练习项目，我们的选题定在了 PC Web 页面。
为什么是 PC Web？主要有以下原因：
- 传统的 PC web 会更加基础，没有移动端的响应式那么复杂
- PC web 比较适合练习基础布局技巧
虽然现在的主流是移动端，但我们仍然认为练习 PC Web 页面有利于提升你的 CSS 基础技能。
在具体站点选择上，我们还是随大流，选择了电商平台 PC 首页 —— 天猫首页。
因为电商平台首页足够复杂，包含很多常见的模块，比如顶部栏，横纵导航栏，轮播滚动 banner、商品卡片、商品列表等等。
如果你可以实现电商平台首页的话，PC Web 的大部分样式问题都不成问题。
我们的项目分为 2 个阶段。
第 1 个阶段是实现淘宝登录页。
作为 CSS 的第一个项目，如果一上来就让你实现首页，那难度有点拉得太高了，
所以，我们先实现一个登录页，简单一点，就当做开胃菜。
第 2 个阶段就是正餐，实现天猫首页。
在经过阶段1的登录页练习之后，你已经可以接受电商类 PC 首页的挑战了。
练习本项目你会收获什么？
- 学会正确使用 HTML 实现复杂的 PC web 页面
- 学会正确使用 CSS 实现复杂的 PC web 页面
- 【进阶】学会如何应用 HTML 语义化合理架构复杂页面
- 【进阶】深刻理解 CSS 三大特性
- 【进阶】深刻理解 HTML 和 CSS 的边界，以及它们两者如何配合
- 【进阶】学会如何编写更有语义的 HTML & CSS 代码
- 【进阶】逐渐形成自己的代码风格
如果只实践一次，那就只会有基础收获
只有不断练习、思考、优化，才会有进阶收获
本项目适合的同学
- 处于 L0&L1 水平的同学
- 对 HTML & CSS 还不熟练的同学
- 还没深刻理解 HTML & CSS （语义化、边界、配合）的同学
- 还没形成自己的 HTML & CSS 编码风格的同学
- 没怎么写过 C 端页面，大部分时间在做 admin 系统的同学
CSS 项目怎能没有设计稿
作为 CSS 原创项目，设计稿是非常关键的一环。
有些项目直接没有设计稿，让你参考 xxx 网站实现。
有些专业机构的原创项目会提供 ps 版设计稿，非常专业。
我们的设计稿跟其他项目不一样，是带标注的图片。具体的设计稿可以到我们的原创项目题目 Github 中查看。
为什么是这样设计，主要原因是：
- 形式简单。不用安装其他软件，打开就能看。
- 不希望你看答案。如果让你参考真实网站，你就会查看该网站的 CSS 代码，这样你就不会练习，也不会自己思考了，所以我们还是要提供设计稿，希望你按照设计稿来实现，这样也更贴合现实工作，在真实工作中，我们前端只有需求单和设计稿。
- 尽量 100% 还原。如果没有设计稿，可能你会开发得比较随意，所以我们提供设计稿，让你有个锚点，可以做到尽量 100% 还原。在真实工作中，是一定要 100% 还原设计稿的，否则免不了跟设计师一顿争吵。
好了，这就是之道前端的第 2 个原创项目，正式开启你的 CSS 提升之旅吧！
只要你跟着之道前端的学习路线来学习和练习项目，一定能比别人学得更快，知识学得更加牢固！
----------------【END】----------------
如果你是真心喜欢前端，并相信成长，想要提升自己的话，欢迎加入之道前端学习圈子。
戳这里 免费获取 之道前端的学习资料和专属服务。