Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mewmewdevart/42CSSTober

42CSSTober, a CSS illustration for each day in October, because creating only web pages is insufficient.
https://github.com/mewmewdevart/42CSSTober

42 42csstober challenge css csstober events

Last synced: about 2 months ago
JSON representation

42CSSTober, a CSS illustration for each day in October, because creating only web pages is insufficient.

Host: GitHub
URL: https://github.com/mewmewdevart/42CSSTober
Owner: mewmewdevart
License: mit
Created: 2023-09-21T20:49:22.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2023-10-05T11:14:55.000Z (12 months ago)
Last Synced: 2024-02-13T01:47:54.765Z (7 months ago)
Topics: 42, 42csstober, challenge, css, csstober, events
Language: HTML
Homepage: https://mewmewdevart.github.io/42CSSTober/
Size: 25.4 KB
Stars: 37
Watchers: 1
Forks: 7
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome-css-only - 42CSSTober - 42CSSTober, a CSS illustration for each day in October, because creating only web pages is insufficient. (Uncategorized / Uncategorized)

README

        


 // Select your language preference: 

	🇧🇷 |

	🇺🇸

 




42CSSTober





	A CSS illustration for each day in October because creating only web pages is not enough.






  See the showcase of this challenge





	

	

	





 📌 Please, read the entire readme before starting the challenge.



## Challenge 🚀💫

Inspired by [Inktober](https://inktober.com/rules), 42CSSTober is a challenge created by @larcrist for the 42 Ecole Community (Unofficial event) to improve your coding skills by creating daily mini-illustrations primarily using HTML5 and CSS3.

The challenge involves creating a mini-illustration each day based on the designated theme for that day and your interpretation of it over the course of 31 days in October, +11 Bonus Days, for a total of 42 illustrations crafted with CSS.

## 🎨 List

**Mandatory List**: 


A CSS drawing per day, based on the theme of the list.

| Day  | Theme      | Day  | Theme      | Day  | Theme      |

| ---- | ---------- | ---- | ---------- | ---- | ---------- |

| 01   | Emoji      | 11   | Creature   | 21   | Folklore   |

| 02   | Parasite   | 12   | Planet     | 22   | Energy     |

| 03   | Geek       | 13   | Amethyst   | 23   | DNA        |

| 04   | Rainbow    | 14   | Halloween  | 24   | Adventure  |

| 05   | Poisonous  | 15   | Hot        | 25   | Ruby       |

| 06   | Gold       | 16   | Hypnotic   | 26   | Fear       |

| 07   | Virus      | 17   | Silicon    | 27   | Big        |

| 08   | Universe   | 18   | Ghost      | 28   | Music      |

| 09   | Cosmos     | 19   | Star       | 29   | Mythical   |

| 10   | Dream      | 20   | Carbon     | 30   | Trap       |

|      |            |      |            | 31  | Robot      |

**+Bonus List** ⭐ : 


Reference to some 42 school things. In this list, you will have to create the illustration using just one `
`. Utilizing the properties ::before, ::after, and clip-path can help you.

| Day  | ⭐ Theme                                       | Day  | ⭐ Theme                |

| ---- | --------------------------------------------- | ---- | ----------------------- |

| 01   | The meaning of life, the universe, and everything | 07   | Norminette             |

| 02   | Algorithm                                    | 08   | Artificial Intelligence |

| 03   | The Hitchhiker's Guide to the Galaxy         | 09   | Bocal                  |

| 04   | Towel                                        | 10   | Community              |

| 05   | Dolphins                                     | 11   | ft_transcendence       |

| 06   | Open Source                                  |      |                        |

### 📝 Rules

- Don't be a jerk. Be respectful. Don't draw offensive things!

- Use only CSS, HTML, and maybe JS to create your artwork; no external files like SVG, PNG, or JPG are allowed. Do everything manually, without external imports or shortcuts.

- Ensure your art is responsive.

- You don't need to be a student of the school to be able to participate.

- Keep your project organized with a GitHub repository, with a cool readme, and host the challenges using GitHub Pages to add in the showcase part 👇.

- Share your results on social media with #42CSSTober hashtag (If you are going to post on [LinkedIn](https://www.linkedin.com/in/mewmewdevart/), tag me).

- 31 + 11 = 42: As a bonus, we've added an additional +11 challenges to the list (w/ 42 things). These challenges should be developed using only one `
` (or whatever element you want) along with its `::before` and `::after` pseudo-elements.

- Have fun! There's no need to follow a strict schedule; you can create daily, adopt an alternate creation rhythm (every other day), or even do a "5K run" or create once a week. The key is to maintain consistency. The goal of 42CSSTober is to grow, improve, and develop positive habits while gaining a deeper understanding of CSS properties.

❗️ | A basic understanding of HTML and CSS syntax is recommended, but if you don't have it, it's a good opportunity to learn!

## 📌 Showcase

This is an initiative created for the community (and extern) with the intention of helping you learn HTML and CSS skills and problem-solving through daily coding challenges. A web page has been created for you to showcase your solutions to the community. 
 Read how to contribute to the showcase in [CONTRIBUTING](CONTRIBUTING.md).

## 🛠️ Usage/Tools

- Computer: Desktop, laptop, etc.

- Code Editor: Visual Studio Code, Sublime Text, Atom, Brackets, among others.

- Web Browser: Google Chrome, Mozilla Firefox, Microsoft Edge, or Safari.

## Tips and Tricks 😜

#### Golden Tip! ✨

- By Lula from 42São Paulo, avoid attempting to complete all the steps at once. Use Baby Steps! 👶🏾🍼

#### Silver Tip!

- Create a simple sketch of the drawing you intend to create; this will provide you with a better understanding of which CSS properties need to be applied in the project.

- Maintain organization in your files.

- If you reference external illustrations, be sure to credit the artist in your project's Readme. 

## ⚠️ Issues

Feel free to open an issue for bugs or suggestions.

## 📎 References 

- [Github Pages](https://pages.github.com/) | Documentation on how to host a webpage on GitHub

- [The Shapes of CSS](https://css-tricks.com/the-shapes-of-css/) | How to create geometric shapes with CSS

- [Extension: Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) | A VSCode extension that allows you to start a local server directly from VSCode to test your website or web application. It automatically refreshes the page in the browser when you make code changes.

- [CSS Battle](https://cssbattle.dev/) | If you want to practice offline, this website offers daily challenges to help you further improve your skills.

- [Inktober](https://inktober.com/rules) | Inspiration for the idea

- [Figma](https://www.figma.com/) | Create your illustration in Figma using geometric shapes; this will greatly assist you in the illustration process.

- [Flaticon](https://www.flaticon.com/) | A website to inspire you when developing artwork.

- RTFM!

## License

This project is released under the MIT license. [Learn more](LICENSE).

 Developed by cadets for cadets (and extern 😋).