CSS 资源

CSS 资源编译

CSS 资源编译

这是我在GitHub上发布的 CSS 资源库。欢迎查看并贡献代码。

目录

• CSS 基础
• CSS 弹性框
• CSS网格
• CSS动画
• 媒体查询
• 引导
• 萨斯

CSS 基础

💻在线课程

• 基本 HTML 和 CSS - freeCodeCamp

• 学习 CSS - Codecademy

• 人人皆可学的网页设计：网页开发基础与编码专项课程 - Coursera

📺 YouTube

• 面向初学者的 CSS 速成课程 - Traversy Media

• HTML 和 CSS 速成教程 - 网络忍者

• 初学者速成课程 HTML5 和 CSS3 - Dev Ed

• CSS 教程-从零到精通（完整课程）- freeCodeCamp

🎮 互动程序

• CSS 餐厅

📃 博客

• 学习 HTML 和 CSS 编码 - Shay Howe

• HTML 和 CSS - 上网很难

• HTML 和 CSS - 奥丁计划

• 学习 CSS 布局 - 学习布局

• 弹性网页设计 - Jeremy Keith

📖 书籍

• HTML 和 CSS：设计和构建网站 作者：Jon Duckett

• 《Head First HTML 和 CSS：创建基于标准的网页的学习指南》（作者：Elisabeth Robson）

• 学习网页设计：HTML、CSS、JavaScript 和 Web 图形初学者指南（作者：Jennifer Robbins）

• Andy Harris 撰写的《HTML5 和 CSS3 傻瓜指南》

• CSS：David Sawyer McFarland 撰写的《缺失的手册》

• CSS：权威指南：Web 视觉呈现（作者：Eric A. Meyer）

• Murach 的 HTML5 和 CSS3（作者：Anne Boehm）

📄 文档

• HTML-MDN

• CSS-MDN

• HTML - w3schools

• CSS - w3schools

• CSS - 开发文档

• CSS - CSS 参考

• CSS - CSS 值

CSS 弹性框

💻在线课程

• CSS Flexbox - freeCodeCamp

• Flexbox 是什么？！——Wes Bos

📺 YouTube

• 20 分钟学会 Flexbox CSS - Travesy Media

• CSS Flexbox 教程 - The Net Ninja

• CSS Flexbox 课程 - freeCodeCamp

• 20 分钟学会 Flexbox - Dev Ed

• 15 分钟学会 Flexbox - Web 开发简化

🎮 互动程序

• 弹性盒青蛙

• 弹性框防御

• 弹性盒游戏

• Gabi 的 CSS Flexbox Playground

📃 博客

• Flexbox 完整指南 - CSS 技巧

• CSS3 Flexbox 属性的可视化指南 - Scotch

• Flexbox CSS 参考概念 - Codrops

📖 书籍

• CSS 中的 Flexbox，作者：Estelle Weyl

• Flexbox 解析：Flexbox 循序渐进指南（解析系列）作者：Jorge Montoya

📄 文档

• CSS 弹性框 - MDN

• CSS 弹性框 - w3schools

• CSS 弹性框布局模块级别 1 - W3C

CSS网格

💻在线课程

• CSS 网格 - freeCodeCamp

• CSS 网格 - Wes Bos

📺 YouTube

• CSS 网格布局速成课程 - Travesy Media

• CSS 网格教程 - 网络忍者

• CSS 网格课程 - freeCodeCamp

• CSS 网格教程 | CSS 网格速成课程 - Dev Ed

• 20 分钟学会 CSS 网格布局 - Web 开发简化

• 20 分钟学会 CSS 网格 - codeSTACKr

• CSS 网格视频 - Layout Land

🎮 互动程序

• 网格花园

📃 博客

• 网格完整指南

• 网格 CSS 参考概念 - Codrops

• CSS 网格布局的最佳实践 - Smashing Magazine

📖 书籍

• CSS 中的网格布局：Eric A. Meyer 的 Web 界面布局

• CSS 网格详解：CSS 网格分步指南（详解系列）作者：Jorge Montoya

📄 文档

• CSS 网格布局 - MDN

• CSS 网格布局模块 - w3schools

• CSS 网格布局模块级别 1 - W3C

CSS动画

💻在线课程

• CSS 动画 - freeCodeCamp

📺 YouTube

• CSS3 动画和过渡速成课程 - Travesy Media

• CSS动画教程 - 网络忍者

• 15分钟学会CSS动画 - Web开发简化

📃 博客

• 动画 - CSS 技巧

• CSS 动画库 - CSS 技巧

📖 书籍

• CSS 中的过渡和动画：使用 CSS 添加动效（作者：Estelle Weyl）

• 创建 Web 动画：让你的 UI 栩栩如生，作者：Kirupa Chinnathambi

• SVG 动画：从常见的 UX 实现到复杂的响应式动画，作者：Sarah Drasner

📄 文档

• CSS 动画 - MDN

• CSS 动画 - w3schools

媒体查询

💻在线课程

• 媒体查询 - freeCodeCamp

📺 YouTube

• 7分钟学会CSS媒体查询 - Web开发简化

• 响应式网页设计教程 #5-媒体查询 - The Net Ninja

• 教程：在 5 分钟内学会如何使用 CSS 媒体查询 - Kevin Powell

• 30 分钟内完成响应式设计和媒体查询 - Colt Steele

• 响应式设计的 CSS 媒体查询 - Adrian Twarog

📃 博客

• 媒体查询图库

• 标准设备的媒体查询 - CSS 技巧

• CSS 媒体查询和使用可用空间 - CSS 技巧

• 如何在响应式网页设计中使用媒体查询 - UXPin

📖 书籍

• 学习响应式网页设计：初学者指南（作者：Clarissa Peterson）

• 使用 HTML5 和 CSS 进行响应式网页设计：使用 Ben Frain 的最新 HTML5 和 CSS 技术开发面向未来的响应式网站

• 响应式设计：模式与原则 作者：Ethan Marcotte

📄 文档

• 使用媒体查询 - MDN

• 响应式网页设计媒体查询 - w3schools

• 媒体查询 - W3C

引导

💻在线课程

• Bootstrap - freeCodeCamp

📺 YouTube

• Bootstrap 初学者速成课程 - Travesy Media

• Bootstrap 4 教程 - 网络忍者

• 响应式 Bootstrap 网站从开始到结束，使用 Bootstrap 4、HTML5 和 CSS3 - Drew Ryan

📃 博客

• Bootstrap 博客

📖 书籍

• Bootstrap 4 简介：使用 Bootstrap 创建强大的 Web 应用程序（作者：Jorg Krause）

• Bootstrap：Jake Spurlock 的响应式 Web 开发

• 掌握 Bootstrap 4 - 第二版：掌握最新版本的 Bootstrap 4，构建高度定制的响应式 Web 应用程序，作者：Benjamin Jakobus

📄 文档

• 获取 Bootstrap

• Bootstrap 4 教程 - w3schools

萨斯

💻在线课程

• Sass - freeCodeCamp

📺 YouTube

• Sass 速成课程 - Travesy Media

• Sass 教程 - 网络忍者

• Sass 初学者教程 - 超强 CSS - freeCodeCamp

• 20 分钟学会 Sass - Dev Ed

🎮 互动程序

• Sass 游乐场

📃 博客

• Sass 博客

📖 书籍

• 掌握 Sass，作者 Luke Watts

📄 文档

• Sass 文档

• Sass 教程 - w3schools