All Projects → zero-to-mastery → Css Art Hacktoberfest Edition

zero-to-mastery / Css Art Hacktoberfest Edition

Hacktoberfest Edition - A CSS art challenge, for all skill levels

Projects that are alternatives of or similar to Css Art Hacktoberfest Edition

Hacktoberfest2020
List of beginner-friendly | first-timers-only | up-for-grabs issues (repositories) for Hacktoberfest 2020 | Submit 4 PRs to earn a T-shirt
Stars: ✭ 248 (+1080.95%)
Mutual labels:  hacktoberfest, beginner-friendly
Letra Extension
Passively learn a new language every time you open a new tab
Stars: ✭ 323 (+1438.1%)
Mutual labels:  hacktoberfest, beginner-friendly
Programming
Code a program in a language of your choice.
Stars: ✭ 269 (+1180.95%)
Mutual labels:  hacktoberfest, beginner-friendly
Tech Interview Preparation
A one stop solution to ace your next coding interview 👨‍💻
Stars: ✭ 188 (+795.24%)
Mutual labels:  hacktoberfest, beginner-friendly
Hello World
Hello World in all possible programmnig languages
Stars: ✭ 558 (+2557.14%)
Mutual labels:  hacktoberfest, beginner-friendly
Pokeapi
The Pokémon API
Stars: ✭ 2,695 (+12733.33%)
Mutual labels:  hacktoberfest, beginner-friendly
Front End
Operation Code's website
Stars: ✭ 301 (+1333.33%)
Mutual labels:  hacktoberfest, beginner-friendly
Hacktoberfest 2k18 Katas
Game has ended :: Little challenges to up your Hacktoberfest game!
Stars: ✭ 160 (+661.9%)
Mutual labels:  hacktoberfest, beginner-friendly
Gitstart
Make a Pull Request
Stars: ✭ 415 (+1876.19%)
Mutual labels:  hacktoberfest, beginner-friendly
Hacktoberfest
Hacktoberfest 2018. Check out the end video for this project ->
Stars: ✭ 406 (+1833.33%)
Mutual labels:  hacktoberfest, beginner-friendly
Hacktoberfest
Make your first PR! ~ A beginner-friendly repository made specifically for open source beginners. Add your profile, a blog or any program under any language (it can be anything from a hello-world program to a complex data structure algorithm) or update the existing one. Just make sure to add the file under the correct directory. Happy hacking!
Stars: ✭ 191 (+809.52%)
Mutual labels:  hacktoberfest, beginner-friendly
Plots2
a collaborative knowledge-exchange platform in Rails; we welcome first-time contributors! 🎈
Stars: ✭ 666 (+3071.43%)
Mutual labels:  hacktoberfest, beginner-friendly
Potigol
Linguagem Potigol - Linguagem de programação funcional moderna para iniciantes - A Functional Programming Language for Beginners
Stars: ✭ 179 (+752.38%)
Mutual labels:  hacktoberfest, beginner-friendly
Awesome Jetpack Compose Android Apps
👓 A curated list of awesome Jetpack Compose android apps by open-source contributors.
Stars: ✭ 207 (+885.71%)
Mutual labels:  hacktoberfest, beginner-friendly
Hacktoberfest
Opportunity to start open source and PR experience
Stars: ✭ 171 (+714.29%)
Mutual labels:  hacktoberfest, beginner-friendly
Awesome Jetpack Compose Learning Resources
👓 A continuously updated list of learning Jetpack Compose for Android apps.
Stars: ✭ 275 (+1209.52%)
Mutual labels:  hacktoberfest, beginner-friendly
Hacktoberfest2018
A repository for HacktoberFest 2018.
Stars: ✭ 139 (+561.9%)
Mutual labels:  hacktoberfest, beginner-friendly
Creative Computing Society.github.io
This is the Hacktoberfest first contribution website of CCS
Stars: ✭ 158 (+652.38%)
Mutual labels:  hacktoberfest, beginner-friendly
Awesome Hacktoberfest 2020
A curated list of awesome Hacktoberfest 2020 repositories, guides and resources
Stars: ✭ 349 (+1561.9%)
Mutual labels:  hacktoberfest, beginner-friendly
Hacktoberfest 2020
Welcome to Open-source! Simply add your details to contributors | Repo for Hacktoberfest 2020 ✅
Stars: ✭ 621 (+2857.14%)
Mutual labels:  hacktoberfest, beginner-friendly

CSS ART - Hacktoberfest Edition

UPDATE

This CSS Art repo has been split into two editions. The Hacktoberfest Edition was locked at the end of October to preserve its state at the end of Hacktoberfest. If you would like to continue its development, you can do so in the General Edition HERE

Welcome to CSS Art, a fun, beginner-friendly challenge for Hacktoberfest!

What shapes, pictures and animations can you come up with, using plain HTML divs and CSS? Let's showcase the artistry of ZTM students, and get a free t-shirt into the bargain! If you're not sure what this is or how to go about doing it, take a look at this tutorial, which will teach you all about how to make pure CSS images.

What is Hacktoberfest?

Every October, Digital Ocean runs Hacktoberfest, a month-long celebration of open-source software! All you have to do to take part is sign up on their website - and make five pull requests in the month of October. Any pull request to any public repo on Github will count, which means, of course, that any PRs you make to this project will help you on your way to getting a cool t-shirt!

Instructions

If you've never forked a repository or made a pull request before, we recommend making your first one over at https://github.com/zero-to-mastery/start-here-guidelines . That will count towards your total, and then you'll be ready to take on this challenge with your new GitHub skills!

Now, once you've forked this repo and got a local version up on your computer, follow these steps:

  1. In the Art directory (folder), create a directory named after yourself.
  2. Within this folder you just made, create two files, an HTML file and a CSS file.
  3. Link your CSS file to your HTML file.
  4. Using only HTML and CSS (no <script> allowed!!), create a work of art! It can be as simple or as complex as you like.
  5. Take a screenshot of your finished work! Try to crop it so that it looks good as a smallish (preferably squarish) image. Save this in your directory, together with your HTML and CSS files.
  6. Go to the root include.js. You will see a list of arrays, each one represents a work of art that someone has created. Copy the example array and paste it at the end. Here is an example:
  let cards = [
    //  Add your card in this section
    //  Follow this example format:
    //  ["Art Name", "Page URL", "Image URL", "Your Name", "Your Github Link"],
    
    ["CSS Dog", "./Art/Dog/index.html", "./Art/Dog/dog.gif", "Chintu Yadav Sara", "https://github.com/chintuyadav" ],
    ["Mahatma Gandhi", "./Art/Mahatma%20Gandhi/index.html", "./Art/Mahatma%20Gandhi/Gandhi.png", "Chintu Yadav Sara", "https://github.com/chintuyadav"],
    ["WindMill Animation", "./Art/WindMill/index.html", "./Art/WindMill/windmill.gif", "Chintu Yadav Sara", "https://github.com/chintuyadav"],
    ["Art Name", "Page URL", "Image URL", "Your Name", "Your Github Link"],
]

  1. Now replace Art Name, Page URL, Image URL, Your Name, Your Github Link with your art information and links.
  2. Save everything, and commit to your repo.
  3. Make a pull request!

And congratulations! You're all done. Have fun!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].