Tiny CSS Projects, Video Edition

Tiny CSS Projects, Video Edition

by Martine Dowden, Michael Gearon
Released August 2023
Publisher(s): Manning Publications
ISBN: None

Watch it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

In Video Editions the narrator reads the book while the content, figures, code listings, diagrams, and text appear on the screen. Like an audiobook that you can also watch as a video.

CSS is a must-know language for all web developers. In this practical book, you’ll explore numerous techniques to improve the way you write CSS as you build 12 tiny projects.

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 multiple 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 guiding 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.

About the Technology
Don’t settle for boring web pages! With Cascading Style Sheets you can control color, layout, and typography to make your sites both functional and beautiful. CSS is an essential skill for web developers and designers. This book will help you get started the right way.

About the Book
Tiny CSS Projects builds your CSS skills by guiding you through 12 creative mini-projects. Each interesting challenge starts with a downloadable HTML skeleton. As you flesh it out with your own design ideas, you’ll master CSS concepts like transitions, layout, and styling forms, and explore powerful features including Flexbox and Grid. All the skills you’ll learn are easy to transfer to full-size applications. When you finish, you’ll have an exciting portfolio of designs ready to go for your next project.

What's Inside
  • Transitions and animations using keyframes
  • Layout techniques including Grid and Flexbox
  • Styling form elements including radio buttons
  • Embedding fonts and typography-related styles
  • Conditional styling using pseudo-elements and media queries


About the Reader
For readers who know the basics of HTML and frontend development. No previous experience with CSS is required.

About the Authors
Martine Dowden is an author, speaker, and award-winning CTO. Michael Gearon is a user experience designer and frontend developer who has worked with many well-known brands.

Quotes
A great project-based approach to learning CSS with something for all skill levels.
- Joe Attardi, author of Modern CSS

An excellent resource! Written in simple language with plenty of applicable examples. This book proves that it is never too late to learn, even after decades of experience. I highly recommend it!
- Joseph Del Vecchio, Heritage Environmental Services

Clear and concise so it’s easy to understand…makes learning engaging and fun. The instructions and code are well-organized and easy to follow.
- Md. Zahid Hossain, Webapp Solutions

Table of contents

  1. Chapter 1. CSS introduction
  2. Chapter 1. Getting started with CSS by creating an article layout
  3. Chapter 1. Adding CSS to our HTML
  4. Chapter 1. The cascade of CSS
  5. Chapter 1. Specificity in CSS
  6. Chapter 1. CSS selectors
  7. Chapter 1. Different ways to write CSS
  8. Chapter 1. Summary
  9. Chapter 2. Designing a layout using CSS Grid
  10. Chapter 2. Display grid
  11. Chapter 2. Grid tracks and lines
  12. Chapter 2. Grid template areas
  13. Chapter 2. Media queries
  14. Chapter 2. Accessibility considerations
  15. Chapter 2. Summary
  16. Chapter 3. Creating a responsive animated loading screen
  17. Chapter 3. SVG basics
  18. Chapter 3. Applying styles to SVGs
  19. Chapter 3. Animating elements in CSS
  20. Chapter 3. Accessibility and the prefers-reduced-motion media query
  21. Chapter 3. Styling an HTML progress bar
  22. Chapter 3. Summary
  23. Chapter 4. Creating a responsive web newspaper layout
  24. Chapter 4. Using CSS counters
  25. Chapter 4. Styling images
  26. Chapter 4. Using the CSS Multi-column Layout Module
  27. Chapter 4. Adding the finishing touches
  28. Chapter 4. Summary
  29. Chapter 5. Summary cards with hover interactions
  30. Chapter 5. Laying out the page using grid
  31. Chapter 5. Styling the header using the background-clip property
  32. Chapter 5. Styling the cards
  33. Chapter 5. Using transitions to animate content on hover and focus-within
  34. Chapter 5. Summary
  35. Chapter 6. Creating a profile card
  36. Chapter 6. Setting CSS custom properties
  37. Chapter 6. Creating full-height backgrounds
  38. Chapter 6. Styling and centering the card using Flexbox
  39. Chapter 6. Styling and positioning the profile picture
  40. Chapter 6. Setting the background size and position
  41. Chapter 6. Styling the content
  42. Chapter 6. Styling the actions
  43. Chapter 6. Summary
  44. Chapter 7. Harnessing the full power of float
  45. Chapter 7. Styling the quote
  46. Chapter 7. Curving text around the compass
  47. Chapter 7. Wrapping text around the dog
  48. Chapter 7. Summary
  49. Chapter 8. Designing a checkout cart
  50. Chapter 8. Theming
  51. Chapter 8. Mobile layout
  52. Chapter 8. Medium screen layout
  53. Chapter 8. Wide screens
  54. Chapter 8. Summary
  55. Chapter 9. Creating a virtual credit card
  56. Chapter 9. Creating the layout
  57. Chapter 9. Working with background images
  58. Chapter 9. Typography
  59. Chapter 9. Creating the flipping-over effect
  60. Chapter 9. Border radius
  61. Chapter 9. Box and text shadows
  62. Chapter 9. Wrapping up
  63. Chapter 9. Summary
  64. Chapter 10. Styling forms
  65. Chapter 10. Resetting fieldset styles
  66. Chapter 10. Styling input fields
  67. Chapter 10. Styling drop-down menus
  68. Chapter 10. Styling labels and legends
  69. Chapter 10. Styling the placeholder text
  70. Chapter 10. Styling the Send button
  71. Chapter 10. Error handling
  72. Chapter 10. Adding hover and focus styles to form elements
  73. Chapter 10. Handling forced-colors mode
  74. Chapter 10. Summary
  75. Chapter 11. Animated social media share links
  76. Chapter 11. Setting up
  77. Chapter 11. Sourcing icons
  78. Chapter 11. Styling the block
  79. Chapter 11. Styling the elements
  80. Chapter 11. Animating the component
  81. Chapter 11. Summary
  82. Chapter 12. Using preprocessors
  83. Chapter 12. Sass variables
  84. Chapter 12. @mixin and @includ
  85. Chapter 12. Nesting
  86. Chapter 12. @each
  87. Chapter 12. Color functions
  88. Chapter 12. @if and @else
  89. Chapter 12. Final thoughts
  90. Chapter 12. Summary
  91. Appendix. Working with vendor prefixes and feature flags

Product information

  • Title: Tiny CSS Projects, Video Edition
  • Author(s): Martine Dowden, Michael Gearon
  • Release date: August 2023
  • Publisher(s): Manning Publications
  • ISBN: None