I recently completed my first programming project for freeCodeCamp, which was to create a Tribute Page. There were times of frustration and times of confusion, but in the end, there was a great feeling of accomplishment that came from coding something completely from scratch.
Reading articles, watching videos, and working thru guided lessons are all great but if you really want to develop a new skill there is no substitute for putting what you have learned to use. This is certainly true for programming.
There are tons of sites out there that offer online tutorials where you work thru exercises and code right in your browser. These lessons are a great way to learn, but it is a very curated experience. Between the instructions, the examples, and the hints, the information that you need is all provided for you. Things aren’t always that easy in the real world of programming.
If there is one thing that I have learned in my few short weeks as a self-taught programmer, it is that knowing how to figure out the answer to a question is just as important as knowing the answer in the first place. There is a lot of researching and problem-solving involved. Contrary to what some people might think, coders don’t just sit down and bang out row upon row of code effortlessly. Not everything works the way you expect it to the first time and sometimes you have ideas that you aren’t sure how to implement.
This is why freeform projects like the ones at freeCodeCamp are so valuable. They not only give you practical experience on how to build something from the ground up but they also force you to figure things out as you go. They give you an objective and some guidelines for what you need to accomplish. What they don’t give you are the answers. That is up to you to figure out.
For those who might not be familiar, freeCodeCamp (or fCC for short) is a coding community that helps people learn to code and then to get experience by contributing to open source projects for nonprofit organizations. You can check out their about page here to learn more.
Before you can unlock your first project at fCC you must first complete about 13 hours worth of lessons. These lessons cover things like HTML, CSS, responsive design using Bootstrap, and jQuery.
The first project tasks you with building a Tribute Page using only HTML and Bootstrap*. You can check out the full instructions including an example project here.
Call me cheesy, but I couldn’t think tribute without thinking of Tenacious D and their song “Tribute”. They were immediately my first choice for a subject. I thought about doing something with a more serious tone, but I wanted the project to also be fun. Once I saw that plenty of other people had done tributes to cartoon characters, video games, even themselves I knew that the focus was the development more so than the subject matter.
I quickly sketched out the layout for my page and started doing research for the timeline. Once I had all of my information in order it was time to start coding. All fCC projects are done use CodePen, which is an online web editor.
I felt comfortable with HTML but my only experience with Bootstrap was from the handful of fCC lessons that preceded the first project. Adding the content and basic HTML was a breeze, but things took a turn when I started trying to style the layout with Bootstrap.
A lot of the functionality I wanted to use had been covered in the previous lessons. It should have been a simple matter of taking what I learned from those lessons and incorporating it into my code but it wasn’t working out that way.
The biggest problem I had was getting the content and images to resize dynamically to different browser sizes. According to what I had learned, I should have been able to do this by using container-fluid as a class, but it wasn’t working. I tried creating different div elements and different classes but things still didn’t adjust correctly and I couldn’t figure out why.
After doing a ton of research online, I figured out the problem was related to the version of Boostrap that I was using. I had loaded the newest version of Bootstrap, Bootstrap 4, into CodePen but the fCC lessons were made using Bootstrap 3. While the two versions are largely the same, there are some language differences and the biggest one as far as I was concerned was that container-fluid doesn’t work in Bootstrap 4. Once I realized this I was able to figure out how to get my images to automatically center using Bootstrap 4 language. With that crisis fixed I thought my project was complete, but I still had one problem. Even though my page would resize properly on the computer regardless of the browser size, on mobile it still wasn’t responsive.
I knew that the solution involved using columns but I couldn’t quite figure out how to set them up using what I had learned from the fCC lessons. I decided to put my project on hold for a few days while I learned a little bit more about Bootstrap.
Code School’s Blasting off with Bootstrap
I had been working thru Codecademy’s lessons but they didn’t have anything on Bootstrap so I decided to check out Code School. I started working on their Blasting of with Bootstrap course and I was immediately impressed. Their lessons are in video form which I think helps not only with how well the information is conveyed but also with the engagement factor. The video lessons did a great job of helping to give me a better understanding of Bootstrap. I also liked that their quizzes, or challenges, would deduct points if you had to ask for the solution. It is a small thing but it is just another motivator to encourage you to find the answer on your own versus asking for the answer.
A Code School Bootstrap Challenge
Between what I learned in the Code School lessons and what I was able to figure out researching articles on google, I was able to go back to my project and finish it up.
One thing I did that really helped was to fork my project into a new project and basically rebuild it from scratch. Since much of it was built on trial and error and random things that I picked up from around the internet my code was a mess. Stripping it down to essentially the HTML allowed me to recode it in a much cleaner way. Once I had everything the way I wanted I was able to copy the code into my original project and delete the forked version.
You can check out the finished version of my project here. Let me know what you think in the comments and if you have any suggestions for how I could improve the code.
*There is some difference of opinion as to whether or not you can use more than just HTML and Bootstrap in this project. In the video, the instructor specifically points out the one line of CSS he uses and says that it is an HTML and Bootstrap only project. I interpreted that to mean that the student should operate under the same restrictions but I can see that being open to interpretation.