Skip to content

Commit

Permalink
Merge pull request #2883 from zero-to-mastery/maintenance_clarify-con…
Browse files Browse the repository at this point in the history 
…tribution-objective

Maintenance: clarify the objective
  • Loading branch information
@MattCSmith
MattCSmith authored Nov 4, 2024
2 parents 112ae40 + 0a6c465 commit 89c3a45
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 49 deletions.
179 changes: 130 additions & 49 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,118 +8,199 @@

Welcome to **Animation Nation**, a fun and creative project by the [ZTM Community](https://github.com/zero-to-mastery) 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. **OPTIONAL** [Tweet about making your first Hacktoberfest pull request](https://ctt.ac/36L1C), 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!_

<br />
This repository is a space where developers of all levels, especially **beginners**,
can contribute, showcase their creativity.
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**
> [!IMPORTANT]
> no **JavaScript** or **images** or **SVG** allowed!
## 🌟 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.

<br />

## 📝 Contribution Guidelines

## 🎯 Objective Overview
Create an animation using CSS and HTML only (no JavaScript, no SVG).
A [CSS animation](https://developer.mozilla.org/fr/docs/Web/CSS/animation) refers to the css rule `animation`.

The purpose is to display a creative and looping animation
*( alike animation in GIFs )*

### Should
- the animation should be looping
- the animation should not require any user interaction ( click, hover, etc ... )
### Should not
An animation should not be:
- a form,
- a portfolio,
- a button to click on,
- a landing page, etc...
*( which are elements requiring user interaction )*

Here is an example of an expected animation:
<img src="./public/example-animation.gif" alt="triangle" />

### ☝️ Keep in mind
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.


## 🚀 How to contribute
> [!TIPS]
> 📌 Don't worry if it's your first time contributing—below,
we've got detailed steps and resources to help you get started!***

<details>
<summary>💡 Development Workflow</summary>

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
*Ensure to review yourself in Github during your PR submission
before definitely submitting your PR*
8. **OPTIONAL** [Tweet about making your first Hacktoberfest pull request](https://ctt.ac/36L1C), and you're done! 🎉
</details>

<br>

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.

<br />

## 🔥 Step-by-Step Contribution Guide
### 🔥 Contribution Guide: Step-by-Step

### 1. Fork This Repository
#### 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:
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:

- [Start Here Guidelines](https://github.com/zero-to-mastery/start-here-guidelines)
- [How to Fork a Repository](https://docs.github.com/en/get-started/quickstart/fork-a-repo)
- [Aldo's Contributing to Github video](https://www.youtube.com/watch?v=uQLNFRviB6Q)

### 2. Clone Your Fork
<br>

Once you've forked the repo, clone it to your local machine so you can work on it. Use this command:
#### 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:

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

### 3. Create A Branch
<br>

#### 3. Create A Branch
Create a new branch from `master` or `main`
*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.*

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.
<br>

### 4. Create Your Artwork

#### 4. Create Your Artwork

Now for the fun part! Inside the `Art/` folder:
> [!WARNING]
> It is important to name the directory and your files exactly as mentioned
> [!NOTE]
> Per contribution folder: it should have only 3 files [ `index.html`, `styles.css`, `meta.json` ]
- Create a new directory named: <github_username>-<art_name> eg. `mattcsmith-helloworld`.
- 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
- Inside **your** folder, create an `meta.json` file
to specify your art name, github author and github link
Note: copy the following snippet and replace only the values with your own details,
Do not change the JSON keys.
Note:
- copy the following snippet ( without the comment )
- and replace only the values with your own details.
- Do not change the JSON keys

```json
// Example
{
"artName": "hello world",
"artName": "triangle",
"githubHandle": "mattcsmith"
}
```

- Use these to create your **animated artwork** — let your creativity flow!
🎉 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 ⚠️
<br>

### 5. Submit a Pull Request (PR)
#### 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.
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.
- [Creating a Pull Request](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests)
- [Aldo's Contributing to Github video](https://www.youtube.com/watch?v=uQLNFRviB6Q)

### 6. [ OPTIONAL ] Tweet about your progress
<br>

#### 6. OPTIONAL - Tweet about your progress
Optionally you can [Tweet about making your first Hacktoberfest pull request](https://ctt.ac/36L1C) on X

Optinonally you can [Tweet about making your first Hacktoberfest pull request](https://ctt.ac/36L1C) on X
<br>

---

## ⚠️ Important Notes
## ⚠️ Important Notes Summary

- You can contribute multiple animations, Just create a new directory with your <github_username>-<art_name>
- You can contribute multiple animations, just create
a new directory with your `<github_username>-<art_name>`
- Ensure to have the **3 required files**
- 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.
- 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**.
Optimized images will be generate automatically
to keep the repository at a manageable size.

---

## 🙌 Let's Connect!
For maintenance reasons:
- Keep checking regularly your pull requests to address provided reviews
Reviewers will take time to check PRs, provide reviews and handle all
the repository PRs.

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! 🚀
- After a while of no activity after a reviewer gave you reviews:
- a label `stale` could be set
- and/or the PR could be closed

---

<img src="https://images.ctfassets.net/aq13lwl6616q/51gDR7DozuNea9fltdgHIc/0c8577f24eaa1b33c40656a522f2d1db/hacktoberfest_discord_banner.png?h=250" align="center" />
## 🙌 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! 🚀
Binary file added public/example-animation.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 89c3a45

Please sign in to comment.