After four long months of coding, researching, breaking things, and wondering if it would ever be finished, I finally deployed my very first website.
It was not an easy road, but in the end it was worth it.
This is what I learned from building the Black Excellence Music Project.
Can I build that?
In June of 2020, racial tensions were at an all time high because of the recent events surrounding George Floyd's death. As a result, this spawned a conversation on the lack of diversity and representation of minorities in all industries.
I had a lot of friends reach out to me and ask for information on black composers from the past and present in hopes of getting their music performed more often.
In response to this, I decided to start the Black Excellence Youtube series, which profiled successful black composers.
The series was a hit and a new idea was born.
What if there was a website called the Black Excellence Music Project?
It could be an educational website with profiles, games, music and more.
But there was one big issue: who on earth was going to create this?
I was only a few weeks into my coding journey and I didn't feel like I had the skills to build something like this. So I decided to put it on the back burner and continue with my learning.
It's Now or Never
A few months later, I started thinking more and more about the project. I thought about possible games, featured composers, and other cool features.
But I was still hesitant to start because I didn't feel like I was ready. I only knew HTML, CSS, and a little bit of JavaScript.
But I realized it's now or never.
Despite fear and hesitation, I decided to get started.
Hello Git and Github
I first opened up my GitHub profile back in June 2020, when I decided to learn how to code. I didn't really do anything with it for a few months before this project.
My vague sense of what GitHub was is that you can save your code and people can look at it.
So I decided it was time to actually learn about GitHub and start working with the command line.
After watching a few tutorials, I had successfully created my first repo and pushed my first commit to GitHub.
I was proud of myself for getting started, but now I faced another dilemma.
What's next?
Just HTML
I had all of these ideas but absolutely no clue on where to start.
Do I start with building games?
Do I build a mockup of a design?
Things quickly started becoming overwhelming and I didn't know where to turn to next. So I decided to just start with a simple HTML page and go from there.
I figured I could build some HTML pages for the composer profiles and worry about styling them later.
This approach calmed my nerves and lead to a very productive start to the project.
Choosing the right color scheme
I wanted to choose a color scheme that was appropriate for the subject matter.
I wanted something that was calming but had power behind it.
After some research, I settled on the color purple. Purple is often associated with royalty and wisdom.
I thought this would be the perfect choice for these black composers who made significant contributions to the arts.
How can I create a game?
At this point, I had a few HTML pages and some minimal styling. But now it was time to starting coding some games.
I thought it would be nice to have a few games that both kids and adults would enjoy.
I first started with mapping out how the games should work. Then I started tackling each functionality one at a time.
I did a lot of research and made a lot of mistakes but I finally got them working.
// this is for the tour and local gig functions
function performanceOutcomes() {
shuffle(gigResponses);
if (randomMsg === 'You were late to the gig and not allowed to perform.' || randomMsg === 'You were mugged outside after the gig and they took all of your money.') {
message.innerHTML = randomMsg;
money += 0;
earnings.innerHTML = `Total earnings: $ ${money}`;
} else {
message.innerHTML = randomMsg;
money += 5;
earnings.innerHTML = `Total earnings: $ ${money}`;
}
}Once I finished up the games, I decided to take care of some housekeeping.
How am I going to organize all of this?
There were going to be a lot of moving parts to the site so I needed to be smart about managing all of these files.
I was very conscious about picking short descriptive file and folder names so I could easily find them.
There were also a few times I had to reorganize some files into different folders.
For example, I originally had the composer quizzes in individual composer folders. But then I realized that it might be better to just have a folder called quizzes and keep all of those files in there.
I also ran into the issue of having multiple stylesheets. Since I was reusing a lot of the same styles, it made more sense to just have a main stylesheet and link that to all of the HTML pages.
Can you look at my project?
By the end of January of 2021, the site was finally ready for someone else to take a look at it.
I decided to reach out to Nicholas Carrigan who is a freeCodeCamp developer and moderator. He had a service for code review sessions on his website and I wanted him to take a look at my code.
The code review session was very valuable and I learned a lot about how to make the site even better.
A deployment nightmare
I was finally ready to take the plunge and deploy my website. I had registered for a custom domain name with Bluehost and read the documentation on how to setup the live site with GitHub pages.
At four o'clock in the morning, I finally published the site.
When I clicked on the live link, I was horrified at what I saw.
No Navbar. No footer. No CSS.
Why was this happening?
Everything was fine when I tested it locally.
After hours of tinkering and research I finally reached out for help. I messaged Nicholas and explained the issue.
He looked at my code and explained that there was an issue with my file paths and showed me how to fix it.
I was relieved to hear a solution for my problem and was able to make all of the necessary changes.
<script src="landing-page-nav.js"></script>
<script src="landing-page-footer.js"></script>
<script src="index.js"></script>I was finally ready to share it on the freeCodeCamp forum for feedback.
It is a good start but fix this
Over the next few days, I received a lot of comments on how to improve the site.
At first it is was a little overwhelming and I took the comments personally.
I guess in some fantasy world I had hoped that everyone was going to love it and think it was perfect.
But a lot people pointed out some bugs, and some design issues that made the user experience a little confusing.
I knew that my strong suit was not in design and so that is probably why I took it personally. But I realized that people were just trying to help and their suggestions did make the site look better.
Advice to beginners
I learned a lot by building this project and there were definitely a fair share of ups and downs. But in the end, I am very happy with the result.
If you have an idea for a project, just start. Don't wait until you are ready.
Build it the best way you know how and deploy it.
It is completely fine it is not perfect or polished.
Just keep building and learning.