Skip to content

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

License

Notifications You must be signed in to change notification settings

mewmewdevart/42CSSTober

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

// 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

GitHub code size in bytes Main language License

📌 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 😋).

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published