我如何提高我的 CSS 技能

本文最初发表在我的个人博客上。

两年前，我刚开始工作，正处于项目和人脉资源匮乏的阶段。作为一名开发人员，我感觉很无聊。

我不想浪费时间，所以决定提升我的 CSS 技能。那时候，对我来说，CSS 是 Bootstrap 做不到的。我只能自己添加一些简单的属性。所以，我决定在网上寻找挑战来提升自己的水平。

Codepen 挑战

我第一个去挑战的地方是Codepen。Codepen每个月都会有一个新的挑战主题，并且每个月的每个星期都会围绕这个主题进行一个挑战。

我参加的第一个挑战是鬼魂挑战（当时是十月，主题是万圣节）。

说实话，这挺蹩脚的。不过，随着时间的推移，我开始尝试类似这样的做法：

还有这个

回想起来，我发现这两个功能真的很难实现。我的技术水平太差了，设计一个带悬停效果的表格都感觉太难了。

但 Codepen 还不够，因为挑战每周只有一次，而我需要做更多。所以，我不得不在网上寻找其他挑战。

Daily CSS Images以一种更有趣的方式学习 CSS。基本上，你每天都会用 CSS 创建一个特定的对象或动物。当时我心想：“学习如何制作一只熊有什么用？” 但随着时间的推移，我意识到重要的不是你制作了什么，而是你如何制作，以及你在制作过程中学到了什么。

所以，我用 CSS 制作了一只熊。

rotate我通过这个学会了如何使用transform。我记得当时做耳朵的时候特别困惑。不过做完之后，我感到非常自豪。

我做的另一个作品是时钟。现在我需要一个教程来帮助我，因为我不知道如何在不使用 Javascript 的情况下让时钟指针移动。在做这个作品之前，我认为仅用 CSS 根本做不到。

通过制作这个作品，我第一次听说 transform-origin。我还通过运用 transform 和动画扩展了我的知识。这对我来说是一次巨大的进步。

我还画了大象、海狸、水母和玫瑰。每日 CSS 图片挑战帮助我更好地理解了 CSS 中的动画、变换和透视。

每日 CSS 图像挑战也帮助我提升了 CodePen 挑战游戏！

虽然这些挑战很有帮助，但我需要转向更现实的事情。这些挑战需要我真正在实际项目中做出来的东西。

100天CSS挑战赛是我最喜欢的挑战。首先，他们的网站展示了参与CodePen的开发者的作品，这对我来说是一个很大的激励。而且，他们的挑战赛看起来非常精美，很多时候，我都想在下一个项目中尝试一下。

我做的第一个挑战是这样的：

一个简单的图片网格，悬停时会显示一颗心。是的，它很简单，但因为我技能不足，所以它还是很有帮助。

我也做了这个搜索栏：

还有这个计数器：

再说一遍，这些都是简单的概念，但仍然很有帮助。我学会了如何制作更漂亮的设计。CSS 不仅仅是知道如何做或记住属性，它还关乎如何运用你所知道的知识来制作出视觉上赏心悦目的设计。

这些挑战中也涉及 Javascript，因此练习 Javascript 也很有帮助。

我接受的另一个挑战是Codevember。Codevember从 2016 年一直持续到 2019 年，它会列出 11 月份每天的挑战列表。

Codevember 的挑战很简单。每天都会有一个关键词，你需要创作一些与之相关的内容。这有助于你从单纯使用 CSS 编码转变为运用想象力寻找创意，然后思考如何用 CSS 将创意变为现实。

所以，当概念是无限时，我采取了一种非常简单的方法：

但是当概念是 Web 时，我制作了一只坐在网上的蜘蛛（借助 SVG）：

它帮助我更有创造性地思考，然后尝试找到一种用 CSS 来实现它的方法，同时保持我从 100 天 CSS 挑战中学到的知识，使其在视觉上令人愉悦。

众所周知，要提高任何编程语言的技能，都需要练习。即使一开始看起来很难，但随着时间的推移，你会进步，并学习新的概念和思维方式。无论是 CSS 还是其他编程语言，都可以在网上寻找激励你的挑战，让你不断练习，成为更优秀的开发者。