PlayCSS is a free website that enables you to enhance and enrich your CSS skills by playing daily challenges. All that you need to do is test your UI design skills by recreating random target images in a live editor using pure CSS code with a new challenge every day.
Once your designing is done, you can submit your work and it will be visible on the ‘Today Submissions’ page from where you can get votes to move up the Leaderboard. PlayCSS also has Pro subscription that fetches you benefits like playing past challenges, viewing your CSS code as well as those of other players, code editor with auto-completion and more.
Working:
1. Click on this link to navigate to PlayCSS and sign up for a free account using your email address.
2. Verify your email using the link sent to your inbox and you will be straightaway navigated to the main page that presents the challenge for that day (Today challenge). Click on the target image to start playing.
3. You can now observe the 3 boxes in the page namely, Code Editor, Code Output and Target Shape.
4. The random shape that you are supposed to recreate is displayed in the ‘Target Shape’ box. To build this shape, you can input your HTML / CSS code in the ‘Code Editor’ box while the results can be previewed in the ‘Code Output’ section.
5. The main colors in the target diagram can be copied by clicking on the corresponding buttons in the ‘Color Palette’ section below it.
6. To submit the image that you have recreated, click on the button ‘Submit your code’ and it will appear in the ‘Today Submissions’ page that you can access by clicking on the corresponding link at the top of the page.
7. Additionally, you can see the submissions of other users on this page. Click on the button ‘View & Vote’ to see the Code behind each submission (only for Pro users) and to Vote for it so that its ranking improves on the Leaderboard. You can also share any submission through a weblink or on social platforms by clicking on the ‘Share’ button’
8. You can navigate to the Leaderboard, by clicking on its link at the top of the page.
Closing Comments:
Overall, PlayCSS seems to be a good website that is sure to help you to augment your HTML / CSS skills by attempting daily challenges and recreating target images.
Go ahead and test it out and write to us about what you feel. Click here to navigate to PlayCSS.
