适合初学者的 CSS 资源列表

2025-05-24

适合初学者的 CSS 资源列表

大约两个月前，我决定列一个清单，上面写着我需要做的事情，以及我认为自己需要完成的事情，才能成为一名自学成才的全栈开发者。于是我开始学习，快速地学习了HTML，觉得我对它了解得还算可以，不需要太多的学习内容。我自己建了几个网站，然后决定转向CSS。

我在免费代码训练营 (Free Code Camp) 完成了 CSS 课程，感觉自己像个全明星，于是直接开始学习 JavaScript。感觉棒极了，我编写了一些简单的控制台日志程序，感觉自己像个摇滚明星。一周后，我全都掌握了，觉得这应该很容易，为什么大家都在说这编程有多难？好吧，然后我开始学习 DOM 操作，需要为一个“石头、剪刀、布”项目设计样式，天哪，我学得真快，我根本不懂 CSS。

那时我决定制定一个计划，规划一条道路，并承诺在放弃学习之前，我会放慢脚步，打好基础。我开始了#100DaysOfCode挑战，很多人可能已经在Twitter上看到过这个挑战。这无疑是我做过的最好的决定。我遇到了一个很棒的社区，它让我保持正轨，并不断调整自己。

现在我终于相信自己已经具备了良好的 CSS 基础，并希望能够分享我学习过程中用到的资源，希望您读完后能够意识到，基础不仅重要，而且只要您知道去哪里找，就能找到高质量的资源。为了省去您的麻烦，我整理了一份我个人使用过的资源清单，希望对您有所帮助。

我今天在推特上发布了这个列表，并在朋友的建议下决定也在这里分享。

奥丁计划

首先是 Odin 项目，它彻底改变了我自学开发者的旅程。他们提供了多种学习路径，无论你选择 Ruby、JavaScript 还是只学习前端，你都可以从 Web 开发 101 开始。其中有一个很大的 CSS 章节非常有帮助，并且列出了我在这里列出的很多资源。Odin

项目

免费代码营

Free Code Camp 是我最喜爱的学习开发资源之一。如果你花时间学习一下他们的响应式网页设计，你会发现它是一款非常棒的工具，可以帮助你学习 CSS 的基础知识。如果你有能力并且喜欢他们的网站，我强烈建议你支持这个很棒的学习工具！

Free Code Camp

CSS-Tricks 盒子尺寸

接下来，我将介绍一些来自 CSS 领域最丰富、最实用的网站。CSS-Tricks 是一个非常棒的资源，这篇文章将帮助你了解所有关于盒子尺寸的知识，并帮助你理解它的工作原理和重要性！

CSS-Tricks：盒子尺寸

CSS技巧居中

如果说我在 WebDev Twitter 上经常看到一个笑话，那就是没人知道如何让 div 居中。大多数笑话都源于一些事实，而居中在 CSS 中是一个变幻莫测的怪兽。 希望你笑得开心，也真心希望这篇资源能帮助你掌握居中技巧。CSS技巧：居中



CSS 模因



CSS技巧 Flexbox

我们轻松讲解了 CSS 初学者最常讨论、也最容易混淆的一些主题。学习 Flexbox 的工作原理看似一项艰巨的任务，但一旦你开始理解如何使用它，你将再也无法在不使用 Flexbox 的情况下创建网站。我每次做项目时都会打开这个页面，希望你也能像我一样觉得它很有用。CSS
技巧：Flexbox

CSS技巧网格

如果弹性盒子在页面布局方面还不够惊艳，无法彻底改变网站设计风格，那么一位 CSS 大师又发明了GRID。它可以说是有史以来最好的布局工具之一。图片库将永远保持超酷的外观，无需费力地进行设置，就能在页面上保持美观。这本指南是另一个颠覆性工具，只要我使用网格布局，它就会一直打开。CSS
技巧：网格

弹性盒青蛙

如果有人和我一样老，你肯定还记得《青蛙过河》（Frogger）！对于那些不熟悉它的人来说，Frogger 是一款电子游戏，你需要控制一只小青蛙，跳过睡莲叶和交通堵塞，躲避车辆，并掉进水里。 在这个游戏中，你可以使用 Flexbox 中不同的位置设置来移动你的青蛙！这是一种有趣且轻松的方式来理解和学习 Flexbox。Flexbox Froggy

青蛙过河 Gif



网格花园

与上述游戏类似，Grid Garden 也是由CodePip开发的。其概念相同，你使用网格设置来实现游戏目标。这又是一个有趣的学习方式，让你告别繁琐的文档和教程。Grid
Garden

奖励：响应式应用程序

严格来说，它并非指南，而是学习开发响应式网站的绝佳资源。Responsively App绝对颠覆了游戏规则，它免费开源，可以说是我最喜欢的开发工具之一。您可以同时在多个不同尺寸的屏幕下查看您的网站，如果在 IDE 中使用，还可以实时刷新！ 它还为每个窗口提供了独立的开发者工具。下载Responsively，您绝对不会后悔！响应式应用程序




希望你和我一样觉得这些资源有用，并记住打好基础对任何事情都至关重要！继续保持优秀，实现你的目标！祝你一切顺利！如果你觉得我遗漏了什么资源，请在这里或推特上分享，以便其他人也能找到！

如果你正在寻找更多类似的技巧，我会尝试在任何时候通过我的 Twitter @DevinDFord发布我作为一名新开发者遇到的困难。

记住要始终激励和教育！


用户添加



上网很难
信用：

fannyvieira 个人资料图片 范妮 •

我想添加这个惊人的资源：internetingishard.com/

</div>
Enter fullscreen mode Exit fullscreen mode






CSS 参考资料

：



cheralathann 头像

切拉拉坦
• 


</div>
<div class="body">
  <p>I would like to add this. An extensive CSS reference with all the important properties and info to learn CSS by Sara Soueidan</p>
Enter fullscreen mode Exit fullscreen mode

tympanus.net/codrops/css_reference/

</div>
Enter fullscreen mode Exit fullscreen mode




文章来源：https://dev.to/devindford/a-list-of-css-resources-for-beginners-2ff5
Devto 翻译
PREV
20 个 Git 命令将使您成为版本控制专家。
NEXT
让我们使用 HTML 和 CSS 创建一个自定义切换开关。步骤 1 - HTML。步骤 2 - 基本样式。步骤 3 - 创建切换按钮滑块并隐藏复选框。步骤 4 - 添加功能。