Awesome

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: <br> A CSS drawing per day, based on the theme of the list.

+Bonus List ⭐ : <br> 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.

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