DEV Community

Cover image for  From a calculator app to a game jam winner.  Learning web development at The Odin Project.
fgostev
fgostev

Posted on

From a calculator app to a game jam winner. Learning web development at The Odin Project.

At the beginning of this summer, I decided to take seriously my learning to code journey.

I've been for some time watching various coding tutorials, courses with code along videos where I had a false sense of progress. Every single time I tried to do something on my own I would fail. I wasn't as easy as following a code-along tutorial.

I was in tutorial hell.

Acknowledging that made me realize that I need to accept the fact that coding is hard and embrace it. I needed to learn in a different way where I would focus more on building projects. Code along tutorials weren't for me.

Alt Text

I decided to give a try to the The Odin Project . What I enjoyed the most from a quick curriculum scan was that it is a project based curriculum backed by a large and active community. Their discord is very active and I was lucky to meet other aspiring and experienced developers. I also was lucky to get feedback on my projects.

Foundations

The curriculum starts with a foundation section. It teaches how to setup a development environment, how to use git. When I started it was re-directing for the HTML and CSS introduction to freecodecamp, but now they have their own HTML and CSS curriculum.

What I liked right away for the curriculum is how they use different sources for the same subjects. They use videos and articles from all over the web. Reading 2-3 articles and watching videos from different sources really helps understanding new concepts. Specially if from the first read you feel slightly confused.

During the foundations section I got to build a copy of google homepage, built a small Rock Paper Scissors app and an Etch-a-Sketch project.

The final project of the curriculum was a calculator.

Calculator

calculator

code live

Perhaps this is so far the most important project for my self-esteem that I had to build. I was fairly tired after the etc-a-sketch project as... Let's be honest, before getting towards the calculator I was treating each project as a "get it done asap". I was fine with just making it to work without any styling. I thought it was foundations, so... I probably should just go as fast as I can... Till this clicked something in my brain:

odin project extra credit

Portfolio project?! It can help me get a job?! Challenge accepted! I decided that no matter what I will make this project work and look "nice". I went for all extra credits. Before I thought that I just need to get done with project and move to the next one as fast as I can. Doesn't matter if it works well, doesn't matter if it looks good - just move!

With this project I learned the difference between a job well done and a mediocre job. Here I decided that from now on I will try to focus on making all projects look "presentable" and aim for the extra credits.

In those extra credits I learned and struggled more than I could imagine. I learned that JavaScript can behave weird with numbers (yes, floats, I'm looking right at you!) , learned about keyboard support and got a better understanding of DOM manipulation.

Library

library project

code live

After finishing to the calculator I felt that I can do anything. (probably sounds funny for the more experienced developers) This was the first project of the JavaScript curriculum. The boost from the calculator project helped me to go fairly fast with the library.

Here I got to practice how to create objects with constructor, storage them and display them on the screen. It was quite impressive to use local storage for first time. Also here I started to get more comfortable with creating functions with a concept of "re-using" them and trying to keep my code readable.

Tic-tac-toe

player vs playertic-tac-toe

code live

This was... A different kind of project. Prior to this one the curriculum covers modules and factory functions. This project had one specific challenge - no global variables.

That was completely out of my comfort zone. I was just getting used to use them for... Everything?... As well as instead of a constructor I was supposed to use factory functions. I understand why that was a good practice, but I couldn't stop feeling that my code was weird. I started to understand better why we were learning those concepts once I got introduced to webpack, but during this project... I was not exactly sure if that was the best practice.

However... At the end of the day it works and I'm very happy with how it looks. Specially the player vs player screen.

TOP's Game Jam - Calculationster

Alt Text

code live

This is currently the project that I'm the most proud of. I've got here a chance to get out of my comfort zone - to build a project with other people, learn how to collaborate and about team management.

For a few week there was an announcement on TOP's that there will be a game jam. I got intrigued a decided to give it a try.

Our team was a few days before the actual challenge. One of our team mates introduced the rest of us to Scrum. I got a chance to create tasks and brainstorm game concepts. As a team we worked to achieve our sprint goals every week.

Our concept was a calculating game, where a monster grows and becomes stronger. If your answer wrong - the monster gets hurt, if you answer right - it grows.

On the original concept the game was supposed to finish when you loose, however we decided to focus on an achievable ending of the game with a story twist.

The game jam was announced to be 3 weeks long. We split our organization in three splits:

splits

We underestimated a little the amount of work for the visual side... But thankfully the jam was extended for another week and we were able to finish almost everything that we had in mind.

More than anything I learned how to work as an organized coding team, how to deal and manage pull requests, how to work on different trees and how to work with others code.

Alt Text

At the end happened something that we didn't expect - we won! It was a great feeling to get recognition for all our work. More than anything - it was an amazing feeling to see reactions of others who played.

It was the first time that I ever won in my life any kind of public competition and it was a big boost for my motivation to keep on learning to code.

I'm very grateful form my team. Thanks to MaxraySavage, es-rene99 and Arstix for this great experience!

Conclusion

I'm glad I decided to learn on TOP's. I learned that project based learning is what works for me and looking back I'm happy with the results I got. I hope I will keep progressing and I will be able to build more complex projects.

My biggest problem that I had once I started my journeys was to rush everything. I didn't acknowledge before that learning to code takes time. Solving problems takes time and is okay to struggle. The struggle is what makes it worth it at the end of the day.

Currently I'm still working on TOP's curriculum. Recently finished the restaurant page and started building a todo page with webpack. Also I'm reading clean code as well with TOP's book club.

Top comments (1)

Collapse
 
esrene99 profile image
Rene Escalante

Thanks as well @fgostev , it was a complete pleasure working with you in the game jam! :) Looking forward for more of your projects