去年年底左右，我开始在Twitter上关注CSS / webtech人士。 目前尚不清楚这是好事还是坏事，但是我意识到了这一点：1）我的前端知识已经过时了，2）我有太多的东西要追赶， 3）每天都有新的狗屎弹出。 并不是说我以前没有完全忘记这些事实，但是当我的Twitter时间轴甚至没有碰到flexbox时，我的Twitter时间轴就不会关闭有关网格布局时，它变得如此真实（是的，是的，我知道）。
我之所以推迟学习新的Web技术，主要是因为我被吓倒了，不知所措。 正如在各种文章中所指出的那样，当今的网络是如此复杂，而我这里是一个仍然在每个项目中都使用float的网络恐龙。 除非我自己尝试一些事情，否则了解一些新技术并不会真正帮到我，但我永远不知道该从哪里开始，甚至尝试从哪里开始。
也就是说，直到现在（Eye of the Tiger.mp3）。
在过去的几个月中，我每周都花一些时间去使用CodePen并制作一些东西。 在每支笔中，我都尝试使用以前从未使用过的东西或尚未掌握的东西。 结果从无聊到无灵感到令人惊讶地被社区所接受。 这是一个关于我所做的和所学到的小故事。
（对于那些没有注意到的人，在我继续之前，快速免责声明：对不起，这篇文章与卡戴珊家族无关。对我来说，我对卡戴珊家族一无所知，只不过那个家庭中的某人被称为东南西南之类。）
几个月前，我看到了Sara Soueidan关于duotones.co的推文。 我很好奇他们是如何做到的，所以自然而然地我做了一些“检查元素”。 我了解到它是通过SVG完成的。 公平地说，我不了解SVG，但可以将其用作彩色滤光片的事实对我来说完全是个难题。
那是一个周末； 我原本应该出去享受阳光，但是相反，我开始阅读Una Kravet的有关feColorMatrix的文章和Lentie Ward的有关SVG的双色调效果的文章。 到一天结束时，我在CodePen上安装了双色调SVG过滤器，拥有极大的自豪感，并且比我选择外出时获得的乐趣更多（毕竟，我讨厌周末交通）。
我为此感到骄傲。 太骄傲了 在CodePen上查看。
我以为我退出了前端，因为我讨厌编码。 那不是我从事此工作的感觉。 实际上，我无法停止调整代码。 我真的很开心 。 也许我讨厌一遍又一遍地编码相同的东西，但从来没有离开过可爱的jQuery ft。Bootstrap（ver。3，请注意）组合。
另外，我还意识到CodePen很令人愉快。 人们为了娱乐而创造出惊人的事物，这很美丽。 完全公开：我并没有学到关于SVG滤镜效果的所有知识，但是我确实了解到它们的存在，并且尝试了一下，并且感到很开心。 也许那才是重要的？ 在这一点上，我决定我应该更经常地这样做。 现在，我应该怎么做？
事实证明，我是一个非常简单的人，有简单的问题。 因此，我的问题已经有了解决方案：CodePen挑战赛。 每周提示您构建前端？ 注册我。
可能挑战— HTML好友
五月份，主题是HTML好友。 这确实帮助了我每周学习新知识的案例，因为我什至不知道他们要求我们使用LOL的标签。 我发誓我曾经做前端。
我输入的第一个挑战是使用 。 这些标签（据我了解）用于删除和插入标记中的内容。 太语义了，哇。 默认情况下，它们的样式为删除线和下划线，因此我决定只使用样式。
第二周，我忠实于冠军，我将笔迟发了。 提示是
。 我了解到，显然您可以使用它们制作手风琴，遗憾的是有一小段遗憾，过去我制作手风琴需要使用大量的JavaScript。 为了弥补这一点，为了弥补我的迟到，我不仅了解了标签，而且还了解到了更多信息：我使用了CSS变量，网格布局和@keyframes （是的，大声笑，我之前从未使用过keyframes @ @）。
在第三周，动力很低，但我是Try.mp3。 提示是和 ，为此我一生无法提出一些有趣的东西。 因此，我列出了一个“化学家购物清单”，试图用CSS创建一个小笔记本。
五月的第四周也是最后一周，提示是
。 我从未听说过描述清单。 我不知道HTML是那么具体。
标记用于在
#semanticisbeautiful #writesemanticcode中指定的描述字词的描述细节。
我可以看到它与详细信息和摘要有何不同，但我不知道两者是否可以互换。 我确实了解到
具有更多的约束。 例如，他们不使用![]()
六月挑战赛-博客
6月的主题是博客，因此更加熟悉。 在第一周，提示是卡片。 在我的前端职业生涯中，我制作了太多方法的卡片，所以我试图寻找新的东西来学习和适应。 首先是从外部来源（在本例中为Soompi）抓取内容。 我最初在任何地方都使用CORS，但很快就达到了极限，因为我是一个虚拟人，并且自动更新处于启用状态，并且每次页面刷新时我都希望进行20多个API调用。 因此，在永远有用的Muhammad Hasby的帮助下，我们（他）建立了自己的（部署现有代码）跨源API。
我很快就完成了。 我最初是为此使用网格布局的，但是结果并不是很“令人鼓舞”，因此我浏览了其他内容。 最终的布局是一叠文章卡片，灵感来自于有关鼓膜的这篇文章。 我还添加了键盘导航支持，因为＃a11y。
自从上周末完成《综合报道》以来，这部影片立即让我成名。 标签验证。
第二周不那么令人兴奋，鼓舞人心或成名。 主题是排版，到目前为止，我仍然不确定我是否正确理解它。 最后一支笔包含了太多我喜欢的绝对定位，但至少它具有响应能力，所以我对此表示满意。
对于第三周，提示是
这可能是我的最爱，因为它使我学习了Vue.js，这是我想学习最长的时间。 为此，我准备了一个包含所有专辑信息的JSON对象。 通常，我将必须创建脚本模板和一些文本替换功能，然后迭代该对象并最终得到一些冗长的丑陋代码，以将其呈现到页面上。 借助Vue，我使用了v-for指令并制作了Vue组件，然后突然完成了？ 你一直都在哪里我的生活.mp3开始在远处播放。 也！ 我没有为此使用jQuery。 这是一项成就。
6月的最后一个挑战是设计菜单样式。 像卡片一样，我做了很多菜单样式设计。 因此，对于这一目标，我的目标是至少实现三件事：没有JS，可靠地响应以及完全的键盘可访问性。 我可能没有真正获得第三名，因为我没有在其中包括任何ARIA，哦。 我再次使用CSS变量作为颜色，这确实是对否则会发生的所有凌乱CSS的答案。
另外，我最初使用纯色，但是后来我想到，什么是漂亮又容易做的？ 渐变，大家。
往下
本周的挑战已经结束，我们必须对SVG有所作为。 我很兴奋，因为我上周尝试学习有关SVG的知识，但感到困惑。 希望面对这个挑战，并看到每个人在CodePen上所做的事情，我会受到启发，并最终学习如何使用SVG。
这篇文章的重点不是我对BTS知道或考虑太多，尽管这可能表明。 关键是，我可能一直在学习错误。 当然，一次尝试学习所有内容将是令人生畏的。 但是，如果我慢慢一点一点，至少我将有足够的钱继续学习。 也许重要的是继续学习，因为总有一些东西要学习。 小进步还是进步！ 没有人要求您在明天之前掌握有关网络的一切。
（或者也许有人，无论如何。我只是想用Motivation来解决这个问题。）
–
克里斯·科耶尔 （ Chris Coyier） 特别要 大喊大叫， 因为他教了我很多CSS技巧（已经明白了吗？），并以某种方式将我介绍给了 CodePen.IO 。
