Create a website to host Garifuna Musicians and their singles and/or albums. Users have full CRUD functionality; adding, updating and deleting artist information. Currently Garifuna music is pretty local to the areas where the musicians live. This application is an effort to make the music genre more global.

• Fetching information from an API which I built myself. This was a pretty easy task, because I knew the data model and how to extract the data. What did not come easy, what deciding how I wanted to present the data in a clean UI. At first I started out using material UI, but that proved to be difficult because of all the preset CSS. I then switched to Bootstrap which is a lot simplier and easy to manipulate.
• Overwriting Bootstrap default styles. I learned a lot about the importance of !important (he-he-he) and ended up in StackOverflow plenty times to see how to disable some of Bootstrap's native behavior.
• Mobile responsiveness. At first I handled it with flexbox, but during this project I finally got to first name basis with Bootstrap grid system too. Differences between BS3 and BS4 sometimes caused problem, since you use the screen size prefix -sm- or -lg- differently, but once you get a hang of it, it flies like a dream!
• Less is more. At first I wanted to use an image as a background, but with all the artwork being displayed cluttered everything and made it hard to focus on the actual important information: artist, album and song. So I decided to go for a simple approach using a solid color, making sure that the background does not compete with the content and text is easily legible.

The goal of this project was to challenge myself in combining my programming skills in Javascript with my skills building out user interfaces with HTML and CSS. Choose one UI Pattern and an API and combine the two. The data to populate the UI Pattern should come from the API. When the user loads the page, they should see the data from the API load into the UI pattern on the screen.

Using the hamburger menu UI, when the user clicks on it, a menu should appear from off of the right side of the screen with a list of menu items. When the user clicks on the menu item, the contents in the center of the page should change to show the details for that item. The user should be able to see which item is currently selected. The user should be able to close the menu by clicking the hamburger menu again.

• Navigating the OpenWeather API and its documentation. This was my first experience with using an API, making a request and console logging the response from the API. Once I had the data fetched in the console log, I then had to read through the documentation and decide what information I wanted to present in the UI.
• In choosing the hamburger menu UI, I had to figure out how to implement the hamburger menu icon and have it positioned in the right corner of the page. After tons of googling, I found came across Font Awesome and they seemed like the easiest to use. I was able to quickly add it to my HTML without any downloading as well as easily manipulate size and color through CSS.
• The temperature data from the OpenWeather API was presented in celcius. Googling the formula to convert from celcius to fahrenheit to celcius was fairly easy, but using that formula in a function not so much. Eventually after many trial and error I was able to convert the temperature from one unit to another and give user functionality to choose which unit they wanted the temperature displayed in.
• This was my first project where I designed the entire interface, color scheme and layout. My desire is to always keep the layout as simple as possible but keeping in mind the experience of the user. I spent quite some time on palette creating sites and ultimately decided on an orange and turquoise color scheme. Eventually, I would like to add a background, but I haven't quite found one that fit the overall theme and feel I am trying to achieve.

Build a responsive website using HTML and CSS.

• Translating someone else's idea into code has its challenges. The most difficult was deciding what HTML element was appropriate to bring the design to life. For example using a div vs a p tag as they are both block level elements, this exercise helped to further cement the functionality of each element.
• There are about 520 CSS properties and whew I got my first dose of the CSS rabbit hole. Luckily this project used the basic and most commonly known properties. I got to play around with grid and flexbox which both make a world of difference when manipulating elements.
• Using media queries to rearrange the content so it looks good on different devices was a challenge. An important lesson here was learning to the class naming cadence. When trying to efficently grab elements by their class name, I realized that I was too vague and had to go back and efficently rename elements.