This is a web app that features a variety of songs and teaches the user to play the ukulele with step by step chords. We created this project for Hack the Heights 2019 at Boston College. It uses HTML, CSS, and JavaScript.
Visit www.uketheheights.com to see the project live until April 14, 2020!
www.uketheheights.com was created using FTP (File Transfer Protocol) via FileZilla with a free web domain and hosting from MLH through Domain.com. The domain will be registered and functional until 4/14/20.
DevPost Submission
Our team member, Alec, discussed how he was planning on hosting a ukulele concert sometime soon as he plays the ukulele for fun. We then came up with this idea at 6pm the night before and knew we had to run with it. We were dedicated to creating a web app that would help ukulele players everywhere, as well as those who were beginning to learn the instrument. We believe this web app is a fun, easy way to pick up a new song on the ukulele.
The button on the home page takes you to a songs page, where you can select from a variety of current tunes. Once you click on the image associated with the song, you are taken to an individual song page. When you're ready to master all the chords for the ukulele song, you can hit start, and the chords and lyrics will begin to change with a time delay of about three seconds. If you need to hear the song alongside the chords or if you need the tune of the song, we have included an audio player that will play an embedded MP3 file of the song you're learning.
We started with the basics, creating an HTML framework with some CSS elements inside it. We then progressed to creating external style sheets that were linked with our HTML to reduce the clutter in our HTML files. Finally, we used JavaScript to change the images of the chords and lyrics after hitting the start button on each individual song page.
www.uketheheights.com was created using FTP (File Transfer Protocol) via FileZilla with a free web domain and hosting from MLH through Domain.com. The domain will be registered and functional until 4/14/20.
In the very beginning of the hackathon, we were struggling to come up with a concept for our project. We discovered it was probably best to change course as we hadn't made much progress by 6 pm of that same day. Then, UkeTheHeights was born.
One challenge we ran into was transitioning our HTML files to a live website. Creating the domain was easy enough, but learning FTP with Domain.com was difficult to say the least. We eventually fixed it after downloading FileZilla to transfer the files, log onto the server, and after a long chat with Justin from tech support at 1 am. God Bless Justin.
Another difficulty we had was implementing the audio player inside the website. This involved several hours of testing out different audio players, but we eventually realized we might be making it a bit harder than it had to be. It ended up being one line of code in our HTML file...
Many hours in Stuart Dining Hall and late night conversations were involved with this project.
We are proud of making the site completely live and functional! It was so gratifying to get the FTP to work with our live site, after all the hard work we put into creating the HTML files, I'm really glad we were able to make it into a functional domain.
We are also extremely proud of starting our project at 6 pm the day before it was due and working hard to have a working project ready this morning. It took many late/early hours of our days, but it is definitely a tribute to the efforts of dedication and hard work.
We learned a lot about the FTP process via FileZilla to a web server. This was our first time producing a live site, so to make it live and function was very meaningful for us. Even though this isn't coding, it's a huge part of the web development process. We also expanded our knowledge of HTML, CSS, and many different JavaScript elements.
In the future, we would like to really enhance the CSS elements of the website. We would love to list more songs with a full length list of lyrics and chords. We need to continue making functional elements of the site, such as back buttons to the home and song pages, as well as a pause button for playing the chords and verses. We have a lot more to work on with the site and we look forward to completing it as a team.