My first completed project for The Odin Project!
A template landing page. TOP provided the design spec and I tried my best to match it.
I started with tutorials on freeCodeCamp and MDN, then slowly moved on to sites like Codecademy and TOP.
- Getting this project onto Codepen felt like such a triumph. I was still learning about hosting options and felt overwhelmed with all of the different options.
- My previous landing page project was a bit difficult but I completed it and learned a lot in the process. All of the stress and effort made this project so much simpler in comparison.
- Where do you find high-quality and FREE images? Turns out the answer is Unsplash. Thank you, Unsplash.
Practice makes perfect. When you learn about coding, you hear about "building muscle memory a lot." You hear that phrase associated with different hobbies, but with coding you have to get used to typing out the unfamiliar in order to make it more familiar. By the time I got to this project I had been building up the muscle memory involved with creating variables and drafting if / else statements.
- When I first saw the details of the project, I assumed that I wouldn't be able to complete it on my own. I had a mindset that I'd either have to blindly follow a tutorial or skip the project altogether. I did end up consulting multiple tutorials and I'm glad I did. While it would have made a better story if I figured the problem out on my own, in reality, I had a lot of fun following along with an experienced coder and hearing their explanations.
- Small projects like this helped me practice CSS media queries and gave me more confidence with responsive design.
A modern variation on the Etch A Sketch drawing toy. The page generates a 16x16 grid. The grid can be cleared away and a new custom grid can be generated. If that's not interesting, hovering over each item of the grid generates a random background color.
- Practice and many tutorials.
- Google, which usually leads me to MDN, W3 Schools, or Stack Overflow.
- I posted my first question onto Stack Overflow and received a response within the hour that helped fixed my problem.
- At the time, this was my biggest and most challenging project. Without realizing it, I broke the project up into four major chunks and then slowly build up the final product.
- I consulted numerous guides and tutorials for making a calculator (there are a lot of them).
- Ultimately, I followed along with a tutorial from Dors Coding School on YouTube and then modified where I could.
- I felt disappointed at not being able to complete the project on my own but I still feel like I learned a lot just from completing it. The finished product isn't perfect but I think of it as more of a starting point than anything else.
- The design itself was a challenge, especially in regards to aligning the buttons and trying to get them to be the same width/height.
- Numerous practice projects where I built up the structure and functionality of a form.
- Consulting MDN and W3 Schools when I needed a technical reference.
- The design felt familiar after taking Kevin Powell's Responsive Web Design course.
- Working with forms has always seemed like a pain and I've never looked forward to making any. However, since so much of web development is built around sending and receiving data, I realized that this would be a good practice project.
This admin dashboard.
- By this point, I've had a decent amount of experience with grid layouts, but I figured I needed the practice that this layout would provide. Plus, it seemed like a good idea to reflect on the work I've been doing.
- I've slowly been using CSS Grid in other projects, so the syntax and the properties are becoming more familiar.
- Chrome Developer Tools are amazing. I wish I had learned how to use this resource sooner.
- I discovered a resource called the CSS Grid Generator (built by Sarah Edo) that helps you create a custom grid. This resource was extremely useful for me, as some grid properties are hard for me to visualize without Chrome Developer Tools.
- I gave myself some extra challenges in terms of the design. The provided layout is basic and offers a lot of opportunity for customization, so I decided to experiment with color and style.