Odin Web Dev Bootcamp

Written by Cory Chung

What is the Odin Project?

The Odin Project is a free, open-source bootcamp for full-stack web development. I worked on the Foundations and Java course over the summer of 2024.

Inspiration

I had always known about The Odin Project ever since high school, but I had never taken the time to fully commit and actually complete the course. I remember multiple times where I had attempted to do so, but only got about one or two projects in. But this summer, I really wanted to commit to learning frontend web dev in order to have it supplement my work in UI/UX, so I got to work setting aside intentional 1 hour daily blocks to get it done.

My Projects

The Odin Project (also known as TOP) is heavy on the project development side, advocating for learning and then true application of knowledge through open-ended projects. After doing the Intermediate HTML and CSS courses and a bit of the Javascript course, here is what I’ve created so far, in rough order from least to most recent and selected based off of the ones I’m most proud of.

Admin Dashboard

Made of pure HTML and CSS, I worked here to create an admin dashboard from scratch. The project taught me mainly about CSS Grid and layouts and how to configure elements in a responsive manner. Some things I would still like to work on are how to organize my code better, but this was only the first draft and an early look into some of the projects that Odin offered. You can also check out the live site at this link.

Responsive design is fun!

Calculator

Here I made a pretty simple calculator using HTML, CSS, and JS, as part of the final project of the Foundations course. I am pretty proud of how this turnt out, although I really do think I could clean up the JS logic to be a bit nicer. It was fun doing the HTML and CSS and tweaking that so that it actually feels more interactive to use. Additionally, it was a fun challenge to figure out the logic for the JS. I did a few flowcharts and used “scratch paper” to figure out the logic and then implementing it, using different states and toggles was interesting to learn. Overall this was a very fun project and it taught me a lot about JS. In the future I would like to take a second look at the logic and revamp it to be more concise and readable. Right now it is a bit of spaghetti code so I would like to take a second shot at it. You can also check out the live site at this link.

I like how the interface of the calculator turned out.

Book Library

Finally, I created a book library website that was meant to allow people to track books that they want to read or have read and check them off of a list. It taught me a lot about DOM manipulation, data management, and form design, and I also refactored it later on so that it would follow the “module pattern” that was outlined in the course. You can also check out the live site at this link.

Here’s two books loaded on the actual library page.

My Experience and Review

Overall, The Odin Project was a great way for me to begin dipping my toes into the foundations of web client languages without jumping straight into something like React or some other heavy framework. I learned a lot in the short time I spent with the course and I’d love to continue finishing up the entire course someday.

Next Steps

So far, as mentioned before, I was able to finish the Foundations course and a bit of the JavaScript foundations course. However, there is a much longer way to go, as the course offers more paths such as advanced HTML/CSS, React, Databases, and even NodeJS. So I definitely have a long way to go, but I am excited to continue the course and see what comes next.