// Select your language preference: 🇧🇷 | 🇺🇸
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.
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.
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 |
- 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::beforeand::afterpseudo-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!
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.
- 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.
- By Lula from 42São Paulo, avoid attempting to complete all the steps at once. Use Baby Steps! 👶🏾🍼
- 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.
Feel free to open an issue for bugs or suggestions.
- 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!
This project is released under the MIT license. Learn more.
Developed by cadets for cadets (and extern 😋).