The Odin Project Roundup
From fundamentals to full stack projects
Tech Stack
Frontend
Backend
Infrastructure
The Odin Project Roundup
A single post to collect the key projects and lessons from the curriculum.
Overview
I completed The Odin Project because I wanted to dive deeper into web development with structure and guidance, rather than trying to patch together my own path. The curriculum took me from the very basics of HTML and CSS all the way through JavaScript, DOM manipulation, and into small full stack builds.
It was an intentional way to strengthen fundamentals, push myself through challenging exercises, and eventually set myself up to succeed with modern frameworks like React.
Why Do it?
I needed more than scattered tutorials — I wanted a structured learning experience where each project built on the last. By finishing each assignment and pushing code to GitHub, I could clearly see my progress and develop confidence in the fundamentals.
Along the way, I also wanted a portfolio of tangible projects that showed both the front end skills I learned and my ability to complete a curriculum from start to finish.
What I Built
A mix of small, focused projects and larger exercises that highlight different aspects of front end and back end development:
- Calculator – An iOS-style calculator with keyboard support.
- Etch-a-Sketch – An interactive grid sketch pad using DOM manipulation.
- Admin Dashboard – A CSS Grid-based admin panel layout.
- Andy’s Big Pies Landing Page – A static landing page styled with HTML/CSS.
- To-Do List App – A project/task manager built with modern front end tooling.
- Weather App – A simple client that consumes an external weather API.
- Books App – A basic library app to add, toggle, and delete books.
Each of these taught me a different skill, from mastering CSS layout systems to structuring JavaScript logic and handling API responses.
Odin Project Exercises
A collection of small projects built during the curriculum. Each is linked to its repo and, where available, the screenshot links to the live demo (opens in a new tab).
Tech Behind the Scenes
The stack mirrors the curriculum: HTML, CSS, JavaScript on the front end with Node.js on the back end for selected projects. I practiced both Flexbox and CSS Grid for layouts, used jQuery for DOM manipulation in early exercises, and worked with API requests to bring in external data.
By the end of the program, I was comfortable enough to move into React and start building more complex apps with reusable components.
What I Learned
- Iteration over polish. Shipping small pieces taught me to focus on progress rather than perfection.
- Vanilla skills compound. Understanding HTML, CSS, and JavaScript deeply made frameworks much easier later.
- Deeper web dev understanding. This journey gave me a clear view of how to build websites in a structured way.
- Appreciation for frameworks. After weeks of writing raw DOM manipulation, I gained a new respect for the efficiency that frameworks like React provide.
- Confidence in fundamentals. From layout to logic, I learned how to approach web development problems systematically.
Takeaway
This journey gave me confidence in building from the ground up. By first struggling through vanilla JavaScript and DOM manipulation, I developed an appreciation for structured frameworks and the value they add. More importantly, I learned how to approach web development in a systematic way, breaking down problems, iterating on solutions, and building toward something bigger.