// 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, 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 <div>. 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, 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 <div> (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.

🛠️ 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 | Documentation on how to host a webpage on GitHub
• The Shapes of CSS | How to create geometric shapes with CSS
• Extension: Live Server | 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 | If you want to practice offline, this website offers daily challenges to help you further improve your skills.
• Inktober | Inspiration for the idea
• Figma | Create your illustration in Figma using geometric shapes; this will greatly assist you in the illustration process.
• Flaticon | A website to inspire you when developing artwork.
• RTFM!

License

This project is released under the MIT license. Learn more.

Developed by cadets for cadets (and extern 😋).