/Animation-Nation

A ZTM Challenge for Hacktoberfest

Primary LanguageCSS

✨ Animation Nation ✨


Welcome to Animation Nation, a fun and creative project by the ZTM Community as part of Hacktoberfest! 🎉

This repository is a space where developers of all levels, especially beginners, can contribute, showcase their creativity, and participate in Hacktoberfest 2024. Whether you're a seasoned developer or writing your first line of code, we'd love to see your animated artwork using only HTML and CSS—no JavaScript or images allowed!

🚀 Quick Start

  1. Fork the repo to your GitHub account.
  2. Clone your fork to your local machine.
  3. Create a branch, you should not be working in the main/master branch
  4. Create a new directory in the Art directory. Naming it <your_github_username>-<your_arts_name>
  5. Create your animated HTML and CSS artwork.
  6. Pull down recent changes
  7. Submit a pull request (PR) with your animated artwork
  8. Tweet about making your first Hacktoberfest pull request, and you're done! 🎉

📌 Don't worry if it's your first time contributing—below, we've got detailed steps and resources to help you get started!


🌟 Why Contribute?

  • Gain GitHub experience by contributing to open-source repositories.
  • Join a supportive community where you can share your creativity and get feedback in our Discord.
  • Enhance your skills in HTML and CSS while learning GitHub workflows.

📝 Contribution Guidelines

We keep things simple! Here are the rules for contributing:

  • Use HTML and CSS only. No JavaScript. No Images/SVGs.
  • Your project must include at least one animation.
  • Don't copy work from others. Make sure your code is original so you can showcase your own skills.

🔥 Step-by-Step Contribution Guide

1. Fork This Repository

If you're new to GitHub, no worries! Forking a repository means creating a copy of this project under your GitHub account. Check out these beginner-friendly resources for more help:

2. Clone Your Fork

Once you've forked the repo, clone it to your local machine so you can work on it. Use this command:

git clone https://github.com/<your-github-username>/Animation-Nation.git

3. Create A Branch

Working in the master or main branch is often frowned upon and are usually expected to branch off. Branching also helps to reduce the chance of a merge conflict.

4. Create Your Artwork

Now for the fun part! Inside the Art/ folder:

  • Create a new directory named: <github_username>-<art_name> eg. mattcsmith-helloworld.
  • Inside your folder, create an index.html file
  • Inside your folder, create an styles.css file
  • Use these to create your animated artwork — let your creativity flow!

⚠️ It is important to name the directory and your files exactly as mentioned above ⚠️

5. Submit a Pull Request (PR)

After completing your artwork, you are now ready to create a pull request and have it added to the collection. Remembering to first pull down the recent changes from to the upstream, commit your changes, push them to your forked repo, and submit a PR. If you're unfamiliar with pull requests, check out the following resources or drop a message in the Hacktoberfest channel on Discord.

⚠️ Important Notes

  • You can contribute multiple animations, Just create a new directory with your <github_username>-<art_name>
  • Ensure that you have not modified any other file outside of your own directory
  • Ensure that your directory includes an index.html and styles.css, these exact names are important.
  • Do NOT include any images, svg's or other files. Optimised images will be generate automatically to keep the repository at a managable size.

🙌 Let's Connect!

We encourage everyone to share their progress, ask for help, or discuss ideas in the ZTM Discord community. We're here to support you!

Ready? Let’s make some amazing CSS animations together! 🚀