The Odin Project Foundations Review
This is going to be my review of The Odin Project Foundations Course. I will discuss how I found it, what I learned, and why I seriously recommend doing this course if you are a beginner. This course has made me believe I have what it takes to become a Software Engineer, no matter how hard it can be.
How I Found The Odin Project
So I started coding around two months ago, and I started with a Udemy Course called “The Web Developer Bootcamp 2022”. This was a course by Colt Steele who is a great instructor.
I go over all of my thoughts on the first half of the course in the article here: https://medium.com/@chanc3093.ce/starting-fresh-as-a-web-developer-8095002ce99d
When I was taking this course, I got all the way to the backend content before realizing that I had no idea what I was doing. If you read the article above, you will see spots of doubt in my learning. But I just kept pushing forward, hoping I would get it along the way. Well once I got all the way to the backend, I was so confused and felt like I didn’t even know any of the stuff that he was talking about.
I also knew that I couldn’t really build any projects. I saw a video saying that you should be able to build a calculator after learning the basics of JavaScript. Well I had already learned JS and made it all the way to the backend, but there was no way I could build a calculator. I didn’t even know where to start.
At this point, I was completely overwhelmed. I knew I wasn’t going to give up, so I felt like I needed to change up things because I was doing something wrong. This is when I started going down a rabbit hole of random Youtube videos and happened to see two separate videos on The Odin Project. One video was a beginner reviewing it after he just finished the foundations course. The other was a more experienced developer saying that it is a great resource for beginners to learn how to code.
To explain what pulled me toward the course, I first have to explain what The Odin Project is.
What is The Odin Project?
The Odin Project is a free open source coding curriculum. It focuses highly on reading documentation and building projects. When I started looking into it, all I saw was that it was very challenging. This is because they don’t hold your hand like every other course does.
It is designed to give you a lesson that is 80% reading and teaches you every concept you need to know. Once you know enough to build a basic project, they have you build that project. There is no code along, they just tell you what you are going to build and that’s it. They don’t provide a solution, they just tell you what it should look like and what it should be able to do, and you figure out everything else on your own.
I loved this because I knew this heavily pushed building projects. The main problem I had with the previous course was that it had no emphasis on building projects to make the concepts stick. Udemy just focused on the lessons, and everytime there was a project, it was a code along. A code along doesn’t feel like building a project. It just feels like another lesson you are taking.
If you want a better description of what The Odin Project is, this page should give you a good idea of what they have to offer: https://www.theodinproject.com/about
Introduction
This section has 5 lessons:
- How this Course Will Work
- Introduction to Web Development
- Motivation and Mindset
- Asking For Help
- Join the Odin Community
This section really gave me a great idea what the course was going to be like. I could immediately tell how thorough they were when teaching things. I didn’t know they would be creating whole lessons on how to stay motivated in the course, and how to properly ask for help.
I really enjoyed the motivation and mindset lesson, because it showed me that everything I have experienced up until that point was how everyone felt. Everyone feels like they don’t know what they are doing when learning how to code. But you just need to pick yourself back up and keep going, no matter how tough it gets.
I quickly joined the Odin Discord just in case I needed to ask questions sometime in the future. I also wanted to see some questions other people were asking, just in case it could answer any questions I have. It is very active and people are constantly posting their projects in there, asking for feedback.
Prerequisites
This section had 7 lessons:
- Computer Basics
- How Does the Web Work?
- Installation Overview
- Installations
- Text Editors
- Command Line Basics
- Setting Up Git
This section ended up being an absolute goldmine full of things I did not know. I had never used Git, I had used the command line before but I had no idea what it actually was, and I only had a tiny idea of how the web works.
The first two sections go very in depth. I read so many articles, but by the end I felt like I had a really deep understanding of these topics. The installation sections just go over everything you need to install, and how you should install them. These are things like the command line, Node.js, and Git.
I had already used the command line before taking this course, but I had no idea what it was. I knew how to type things into it and how to create files, but I could not explain to someone what the terminal was, or what the command line was. This really helped me understand what it was, and the reason why it’s so important to learn.
Git Basics
This section had 2 lessons:
- Introduction to Git
- Git Basics
Git is absolutely amazing. I had known about Git for awhile, but I never knew how to use it. I told myself I would eventually teach myself after the Udemy course (because they don’t teach you anything about it). I am so glad this course teaches you before you do anything else. Git is so important, and setting up a GitHub is the best way to show your progress as a student learning how to code.
If you are a beginner and you don’t know how to use Git and GitHub, you need to stop everything you are doing and get it setup. TOP teaches you how to set it up and how to use it. It also walks you through creating a GitHub account and creating your first repository. It is absolutely something you should be using from the very beginning, so don’t put it off.
To sum it up, Git is a version control system that allows you to make save points in your code. You can go back to any save point and start fresh from there. This was a very easy concept for me to grasp because I grew up playing video games, and saving in there is very similar. You can also use Git to collaborate with others on projects you are doing.
HTML Foundations
This section had 7 lessons and 1 project:
- Introduction to HTML and CSS
- Elements and Tags
- HTML Boilerplate
- Working with Text
- Lists
- Links and Images
- Commit Messages
- Project: Recipes
This was a section that I just blasted through. Everything in here was stuff I already knew. I still went through it to get a refresher. I even found out a few minor details that I didn’t know about these topics. If you are a taking this course and you already know this stuff, I still recommend you skim through it because their lessons are very detailed and cover everything.
Something I did get out of this section was learning how to commit. They teach you right before you start the first project so you can get the basics of Git down while your projects are super easy. I try to do micro commits when commiting my projects. I heard they are a great way to keep a good history of your project.
The Recipes Project is not meant to be pleasing to the eye. It is just to make sure you have the basics of HTML down. I didn’t really care about this project and just wanted to move forward. But I plan on remaking the whole project to make it a nice recipe website in the future. But right now, it’s not at the top of my list.
Here is a link to the GitHub repository and a live preview of this project:
CSS Foundations
This section had 4 lessons:
- CSS Foundations
- Inspecting HTML and CSS
- The Box Model
- Block and Inline
I initially planned on skimming through this section, but I found several things I did not previously know. The Block and Inline lesson was great, and gave me a full understanding on display: inline-block. I already knew about this property, but I didn’t understand the use case. Now I have a full understanding of all these things and when I should use them.
Overall this section was very helpful. It had a lesson that taught me how to use the Chrome Dev Tools in a way I wasn’t really using them before. It makes editing your CSS a lot easier when building a project.
Flexbox
This section had 4 lessons and 1 project:
- Introduction to Flexbox
- Growing and Shrinking
- Axes
- Alignment
- Project: Landing Page
I was really excited to do this section. I already learned about flexbox, but I was not good at it. I knew about the main and cross axis and all of the basic concepts. But I always struggled laying out my websites when trying to use flexbox on my own. With how the course was going already, I had a feeling I would be able to use flexbox by the end of this section.
The first 3 lessons only go over the very basics and don’t have you practice much. At first, this put me off. Only because the rest of the course has been so in depth and practice driven. But once I got to the Alignment lesson, I could see what they were trying to do. They saved all the practice for that final lesson, so you knew everything about flexbox before even trying it out.
There was a lot of practice. They had practice problems, websites where you could mess around with flexbox, and little games to play. I thought it was great and it really helped me with learning how to layout my websites. I am pretty confident with flexbox now, but I am no pro.
The Landing Page project was simple. We had to copy a landing page that was already made by TOP. But it was just a picture. We couldn’t go and inspect the elements and styles or anything. We just had to look at the picture and make a complete copy. The main purpose of this project was laying out the website using flexbox. I did this project pretty easily. I still need to work on the responsivness, but other than that, the website is a really good copy. In the future, I would like to go back and turn the landing page into a custom landing page for one of my friends.
Here is a link to the GitHub repository and a live preview of this project:
JavaScript Basics
This section had 12 lessons and 3 projects:
- Fundamentals Part 1
- Fundamentals Part 2
- JavaScript Developer Tools
- Fundamentals Part 3
- Problem Solving
- Understanding Errors
- Project: Rock Paper Scissors
- Clean Code
- Installing Node.js
- Fundamentals Part 4
- DOM Manipulation and Events
- Revisiting Rock Paper Scissors
- Project: Etch-a-Sketch
- Fundamentals Part 5
- Project: Calculator
This was by far the best part of the whole entire course! I was very nervous going into this. JS was my biggest weakness and I really struggled with writing any JS code. I knew I was going to have to take my time, and I told myself that if I didn’t completely get a concept, I was not going to move forward until I had it down.
Fundamentals Parts 1–3 teach you the basics of the 8 data types, methods, conditionals, functions, and other tiny details that fall within those groups. By the time I got through these sections, I was stoked. I already had a really good understanding of things that I struggled with before (functions and conditionals). I was even learning about things that I never knew existed (like the difference between function declarations and function expressions).
I got to learn about all sorts of things outside of JavaScript also. They teach you how to properly use the dev tools, how to problem solve, understanding errors, and how to write clean code. All of these are so crucial and I didn’t learn about any of this stuff in the Udemy course I took. I would say the most useful lessons were how to problem solve and how to write clean code. I learned a lot from those two lessons that I still carry over to this day.
Fundamentals Parts 4–5 teach you arrays, loops, and objects. It took me a few days to get through these lessons, but I finally did it. They even had a lesson on DOM manipulation and how to use event listeners. I really felt like everything was making sense. I was confident using the console, and I was asking all the right questions and leading myself to answers just by messing around with some things. At this point, I was still nervous about the projects. I felt like even though I had all the concepts down, I still wasn’t going to be able to build a project like a calculator.
Project: Rock Paper Scissors
The first project I did was the Rock Paper Scissors project. At first, we started to build this project in the console. Once we learned DOM manipulation, we revisited this project to add a basic UI and buttons to play the game. It only took me a couple hours to do this project. I really focused on clean code and properly committing my project. In the end, I was pretty proud of what I had built. I still feel like I can learn stuff in the future and improve it, but it does everything I want it to do. I just need to make it look cooler in the future somehow.
Here is a link to the GitHub repository and a live preview of this project:
Project: Etch-a-Sketch
The second project I worked on was the Etch-a-Sketch project. I had no idea how I was going to pull this off. I had heard about this project before I even started The Odin Project and I was not looking forward to it. But I ended up figuring it out pretty quickly. The main focus is using loops and event listeners to build a canvas that you can draw on. Once you have those two concepts down, this should be no problem. There are still a few things I want to tweak, and I would like to add a couple more features. I also think it looks ugly so I would like to give it a better design in the future.
Here is a link to the GitHub repository and a live preview of this project:
Project: Calculator
The final project was the Calculator project. Now remember what I said earlier! The whole reason I ended up finding this course was because I couldn’t build a simple calculator, and I was already learning back end. So this calculator was like my enemy. By the time I made it to this project, I was confident I was going to be able to build it because of how my last two projects went. But I felt like it would take me over a week. This project only took me 2 days! I finished the project on the first day, and spent the whole second day adding stuff that wasn’t even required in the assignment. I went above and beyond for this calculator. This is the project I am most proud of right now, even though it is just a simple calculator. I plan on revisiting it in the future and adding a ton of features to make it a full calculator web app.
Here is a link to the GitHub repository and a live preview of this project:
The Back End
This section had 2 lessons:
- Introduction to the Back End
- Introduction to Frameworks
Now this section was super short. Its purpose was to introduce us to the stuff we are going to be learning in the next course. I skimmed through these lessons because I already had a good idea of what they were. I also know we are going to go way in depth in the future.
Conclusion
I could not recommend The Odin Project enough. I really felt like I had no idea what I was doing until I found TOP. This gave me the confidence to keep going forward, and assured me that this is what I really want to be doing from now on. It is so rewarding when you do something you felt was impossible. I know for a fact I could not build those projects back when I was doing the Udemy course. This is not me trying to say that course was terrible. I just think that in order for me to learn, I needed to make that leap instead of letting them hold my hand. I am now taking the Full Stack JavaScript Path, and so far I love it. Once I get through the whole thing, I will start to look for a job because that is when I feel I will be ready.