The common and entirely forgivable situation you might now find yourself in is: Just what the hell do I do with these new found skills. Not feeling confident enough to find an open source project to contribute to (which can feel unnatural, like stumbling upon somebody else’s conversation) or start selling your services. Well in this scenario people also might say “make something you’re interested in” (not helpful), everything I’m interested in already has a free/famous/brilliant app for that and I’m not ready to takeover the world. Therefore you need some simple, tried and tested programs that beginners might attempt, which you’ll soon find feed in to each other (I’ll explain in a second).
First I highly recommend you visit The Odin Project, a fabulous curriculum, which if your starting out or still green (like you or I) is just the ticket. Essentially it’s a guide which links to a lot of third-party content (and that’s not always a bad thing) with mini-projects interspersed throughout. It’s strength is that it’s concise, and exhibits a great deal of good quality linked material – some of which we may have seen here – and doesn’t gloss over the tough stuff. Some sections appear to need some work (though it’s open source and being worked on) but I can’t really fault it.
The ‘Etch-a-Sketch’ was a pretty smooth experience, and make sure to check out other user’s projects as they can demonstrate some added functionality you might want to dive into. The calculator is a bit tougher, but shouldn’t be too much of a struggle, again if you have any problems then let me know. The snake app was much more a hurdle for me, and I’ll admit I struggled with trying to figure out how to link the visual HTML5 canvas grid with the back-end array logic where the computations happen. Therefore I threw in my hat and worked through the guide here, I explored a few different guides but I found Andres’s the most concise. In this case, having light fingered someone else’s project, we should pay attention to understand it in complete detail. I worked carefully through and left comments through the code, which I recommend you do too – if you don’t wish to attempt the game from scratch. I then added a few lines to allow me to change the head, body and tail images for the ‘snake’. However I found using HTML5 canvas a little tricky when trying to upscale the quality of the images, alas, I’m yet to find a solution.
Finally the ‘Tic Tac Toe’ game which I was determined to build myself, using some of the theory from the snake game (creating a grid matrix) and avoiding the HTML canvas element, I was successful. The hardest part in my opinion is the conditional logic required for checking victory conditions. I even added some extra special styling (not a requirement, I just wanted to show-off). I’ll be working my way through the rest of the projects on this track, so if you’re calling that’s where I’ll be for the next few weeks.
Oh and you can find my projects in my GitHub portfolio.