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 https://codepen.io/mikemang/post/a-beginner-s-guide-to-pure-css-images , which will teach you all about how to make CSS images.
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 - https://hacktoberfest.digitalocean.com/ - 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!
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:
- In the Art directory (folder), create a directory named after yourself.
- Within this folder you just made, create two files, an HTML file and a CSS file.
- Link your CSS file to your HTML file.
- Using only HTML and CSS (no <script> allowed!!), create a work of art! It can be as simple or as complex as you like.
- Take a screenshot of your finished work! Try to crop it so that it looks good as a smallish image. Save this in your directory, together with your html and css files.
- Go to the root index.html. You will see a
<div>that has a class of 'card'. Here is the first example:
<div class='card'>
<a href='./Art/joy/robot.html' target='_blank'>
<p class='project-name'>Robot friend</p>
<img src='./Art/joy/robot.png' alt='robot'/>
</a>
<p class='author'>by
<a href="https://github.com/royranger" target="_blank">Joy</a>
</p>
</div>
- Copy this div and change the link hrefs, image srcs, and text within the p tags to reference the directory and files that you just made, as well as the name of your project. And in the 'author' section, put your name and include a link to your GitHub. Add your 'card' div to the list in index.html. Make sure it is within the 'container' div.
- Save everything, and commit to your repo.
- Make a pull request!
And congratulations! You're all done. Have fun!