Tiny CSS Projects

Tiny CSS Projects by Martine Dowden and Michael Gearon

In Tiny CSS Projects you’ll build twelve exciting and useful web projects including:

  • A loading screen created by styling SVG graphics
  • A responsive newspaper layout with multi-columns
  • Animating social media buttons with pseudo-elements
  • Designing layouts using CSS grids
  • Summary cards that utilize hover interactions
  • Styling forms to make them more appealing to your users

The projects may be tiny, but the CSS skills you’ll learn are huge! Tiny CSS Projects teaches you how to make beautiful websites and applications by gilding you through a dozen fun coding challenges. You’ll learn important skills through hands-on practice as you tinker with your own code and make real creative decisions about the projects you’re building. You’ll rapidly master the basics and then press on into CSS’s exciting layout features including grid and flexbox, animations, transitions, and media queries.

Get a Copy Tiny CSS Projects

About the technology

Cascading Style Sheets (CSS) make the web beautiful. Where HTML structures a page and JavaScript gives it additional functionality, CSS handles colors, layouts, and typography—everything that your users love about your site. While CSS is an established tool used in almost all production websites, it’s also evolving to include new features.

About the book

Tiny CSS Projects develops your CSS skills through 12 delightfully creative mini-projects. Each project sets you up with a premade HTML skeleton for you to use as a foundation for your work. You’ll build up your portfolio of common and useful web designs, including a loading screen, an eCommerce checkout, and animated social media buttons. As you tackle each tiny project, you’ll learn about animation, transitions, layout, styling forms, and even typography. All the skills you master are easy to transfer to full-size applications!

Table of Contents

  1. CSS Introduction
  2. Designing a layout using CSS grids
  3. Creating a responsive animated loading screen
  4. Creating a responsive web newspaper layout
  5. Summary cards with hover interactions
  6. Creating a profile card
  7. Harnessing the full power of float
  8. Designing a checkout cart
  9. Creating a virtual checkout cart
  10. Styling forms
  11. Animated social media share links
  12. Using preprocessors

Want me to speak at your event? Drop me a line!

Contact Me