My First Project: Important Takeaways for Beginner Developers
Tags: javascript, beginners, programming, productivity
Published: 2022-01-24 14:07:47

When I approached my first project for Flatiron school, I admit, I was very overwhelmed with trying to think of what exactly to create. The web is full of apps, so what could I do that was different and stood out? Would it be user friendly in it’s functionality? Could I even get it to work? I decided to take a step back and think about how I would create in other mediums, such as songwriting. Start with just one theme, let it grow from there and don’t get lost in the details. Less is more.
Writing the code, styling and adding finishing touches this week was an excellent learning experience and I had some excellent eye opening experiences with developing. Actually doing the work helped me think about it differently than what I suspected it would be. Upon reflection, I felt it would be helpful to share some takeaways with others.

**Seriously, do not overthink the idea.**
Sometimes the ideas flow, and sometimes it’s pretty quiet. I was definitely struggling with not only the daunting task of HOW to create something, but WHAT I was going to create. My mind was filled with ideas of how to execute planning an idea that wasn’t even created. Should I sketch out my layout? Make a list of functions and events? Should I choose colors for the background and fonts?
It started to become extremely overwhelming so I decided to take a step back and remove myself from the equation. I thought of the user and what they could ultimately gain from the program and had the idea to approach the most critical consumer panel I know; my seven year old daughter, Penelope.

**Remove yourself from the equation, and think of what the user would want.**
Lately, Penelope has been playing the game “Animal Crossing:New Horizons” and has expressed her desire to be able to know all the Villagers possible and have them live on her island. We were having a conversation about this when it came to me. “What if I could have an index of all the villagers, would that be fun?” Step one has been completed! I have a basic idea, now to let it grow. “What if we can make a list of all the villagers we want to be our neighbors? That makes it easy to keep track of.” I ran this idea by my daughter who gave it two thumbs up and wanted to try it right away. While this may not be an app that I would use personally, there are many users out there in the world that potentially could find a use for it.

**Break down your sections.**
Ok, I did not do this at first and I paid the price. While coding I would work on a few JavaScript functions, put in some HTML, style for a while with CSS, and don’t get me wrong, it worked, but it was not efficient in the long run. I ended up having lots of code, especially CSS, that was not connected to anything after revisions and I had to spend time weeding out and deleting. Looking back, I can see how this was definitely not the most ideal way to spend my time.

**JSON Data and DOM Rendering can seem tedious to a newbie, but it’s great practice.**
The data I received from my API was not set up ideally to easily render to the DOM. I tried multiple different ways of coding my rendering function, but nothing would work. I googled numerous different codes and ideas, asked other students and teachers. Turned out I had an extra key in my data that was essentially blocking the information I needed from being pulled. Using JSON-Server and creating a db.json file I was able manipulate the data to and array object, and finally get it to render.

```
function renderVillager(villager) {
const villagerDiv = document.createElement("div")
villagerDiv.innerHTML = `
<img src="${villager.image_uri}">
<h3>Name: ${villager["name"]["name-USen"]}</h3>
<h4>Catch-Phrase:   ${villager["catch-phrase"]}</h4>
<p>Personality:   ${villager["personality"]}</p>
<p>${villager.saying}</p>`
villagerContainer.append(villagerDiv)
}
```

Working with JSON Data, whether an array object, or just an object with nested keys will be good practice as well. As we can see in the code above, there are many nested objects under the “villager” key. Making sure the correct data was displayed on the screen was ultimately a fun exercise.

**Google can be your best friend or your worst enemy.**
Sometimes, your code will hit a small snag, or everything will just break suddenly. There are a lot of resources available to developers via Google, but having good search etiquette is vital. Be specific with your search terms to get the best results, otherwise the time spent filtering through the information could be extremely detrimental to your work. I found myself getting lost and caught up on information that was not helpful to my code, and ultimately getting bogged down in details that was not relevant to what I needed. I suggest making sure your keywords are narrowed down. For example, if you are searching for a way to code a “To-Do List”, instead of searching just that term, be sure to add important information, for example, what code language you would like to use, any errors you are receiving or specifics to your code. Another example, the search term “To-Do List JavaScript DOM fetch error” will return more customized results.

**The most important takeaway.**
Upon reflection of my time spent working on this project, I wanted to share my experience in hope that it helps others when approaching their first milestone. It can be intimidating to organize where to dive in. Overall, my most important takeaway is that every project is an opportunity to learn and grow as a developer, and benefit from every challenge we may face throughout the process.