With CSS Battle, you can find a new target every day for you to unwind. You will see a finished design that you can try to reproduce down to the pixel. They have a built in IDE, and a preview display with a slider so you can see how close you are to matching the design. It is a lot of fun!
I am committing to 30 days of CSS Battle! I will be sharing on Twitter and GitHub, and may even do some live coding on Twitch. And each day I will add my solutions for challenges from cssbattle.dev in this repository.
If you would like to share your own solutions on GitHub, feel free to use this template I have created.
-
First, create a fork of this repository. The name of the repository will likely be "[your_username]/css_battle". Once you have navigated to your own repository, you can clone it to your local machine using the terminal or your preferred GUI.
-
There are 30 directories, each corresponding to the 30 days you will play CSS Battle. Each one already has an
index.htmlfile inside it. You can write your HTML code here (or copy/paste it from the IDE on the CSS Battle site). If you are including your styles in the HTML file, those will go in theheadof the document. You can also create a new file that will be your external stylesheet (CSS). -
When you have completed the daily challenge, take a screenshot of your solution. Drag and drop that file from Finder/File Manager into the corresponding 'day' directory. Rename it as 'solution.png'. Now your solution will display on the main page!
-
Currently the anchor tags link to the
index.htmlfile for each day. When you click on the link, you'll be directed to that page and either see a larger version of your solution or a blank page (if you haven't yet inserted HTML). You can decide what you would like to display here. Perhaps you will have a larger version of your daily solution. You might have a screenshot of your code as well. It is up to you! -
You may wish to edit this README file to suit your own purposes.
-
Deploy your site, and share with your network! This is a fun way to #BuildInPublic and sharpen your CSS skills!