- 🔔
Manish Patel (@savvystrider)
Your Projects
Landing Page
My first completed project for The Odin Project!
What I learned to make:
A template landing page. TOP provided the design spec and I tried my best to match it.
How I learned to make it:
I started with tutorials on freeCodeCamp and MDN, then slowly moved on to sites like Codecademy and TOP.
Challenges overcome:
- 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.
Rock Paper Scissors
What I learned to make:
The classic children's game recontextualized with HTML, CSS, and JavaScript.
How I learned to make it:
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.
Challenges overcome:
- 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.
Etch A Sketch
What I learned to make:
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.
How I learned to make it:
- Practice and many tutorials.
- Google, which usually leads me to MDN, W3 Schools, or Stack Overflow.
Challenges overcome:
- 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.
Calculator
What I learned to make:
A calculator made with HTML, CSS, JavaScript, and Font Awesome icons.
How I learned to make it:
- I followed along with a tutorial for making a JavaScript calculator a few months prior to making this project. I was able to keep up with the tutorial but I didn't fully understand the code.
- 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.
Challenges overcome:
- 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.
Sign-up Form
What I learned to make:
A single-page sign-up form made with HTML, CSS, and a tablespoon of vanilla JavaScript.
How I learned to make it:
- 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.
Challenges overcome:
- 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.
- I completed another project involving form validation and JavaScript, so this one felt simple in comparison. I had to implement some basic logic to verify that the Password and Confirm Password fields are identical.
Admin Dashboard
What I learned to make:
This admin dashboard.
How I learned to make it:
- 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.
Challenges overcome:
- 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.