Submission Guidelines

We welcome new submissions to the CSS Zen Garden! If you've created a design that follows our guidelines, we'd love to see it.

Requirements

  • Do not modify the HTML - The HTML structure must remain exactly as provided
  • Use valid CSS - Test your code with the W3C CSS Validator
  • Test in browsers - Ensure your design works in modern browsers
  • Be original - Create something unique and inspiring
  • Use semantic naming - Name your CSS file as ###.css where ### is your design number

Getting Started

  1. Download the example HTML file and CSS file
  2. Create your design by modifying only the CSS
  3. Test thoroughly in multiple browsers
  4. Submit via GitHub (see below)

How to Submit

We now accept submissions through GitHub. This makes it easier for us to manage contributions and for the community to get involved.

Steps to submit:

  1. Visit our GitHub repository: github.com/mezzoblue/csszengarden.com
  2. Fork the repository
  3. Create your design directory (e.g., 222/)
  4. Add your CSS file as 222/222.css
  5. Add a preview image as /content/previews/222.png (recommended size: 400x300)
  6. Update the design list in server/data/masterlist.js
  7. Submit a pull request

Tips for a Great Submission

  • Study existing designs for inspiration
  • Push the boundaries of CSS creativity
  • Consider accessibility (color contrast, text size, etc.)
  • Make sure your design works on mobile devices
  • Include comments in your CSS to explain your techniques

Questions?

If you have questions about the submission process, please open an issue on our GitHub Issues page.

Submit on GitHub →