Uploaded April 2023 | Updated September 2026, 1 hour ago

---

Expand your creative CSS proficiency by replicating creative CSS Art in CSSBattle #24. You’ll learn how to create clever design patterns using CSS Grid, Flexbox, repeating-linear-gradient, and more.

🔗 Links
CSS Battle: cssw.io/css-battle
In-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0
Guide to grid-template-areas: youtu.be/sAsX9e2NzZ4
Guide to individual transform properties: youtu.be/ZAXSbjrOZwg

📖 Chapters
00:00 What is CSS Battle
01:07 CSS Battle #143. Simply Circle
02:16 CSS Battle #144. Long Heart — CSS Grid solution
10:32 CSS Battle #145. Spotlight — CSS Flexbox solution
14:05 CSS Battle #146. Streaks — repeating-linear-gradient solution
18:23 Conclusion

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Support CSS Weekly by buying my course:
🔥 Mastering Prettier & Stylelint: masteringlinting.com

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css #cssbattle