Introduction
In order to improve my CS literacy, I am practicing some computer languages as side projects to support my Data Analytics and UXD journey. As part of this effort, I started to follow freeCodeCamp’s (further as fCC) guide, which I found fascinating.
The first module covered creating responsive web designs using HTML and CSS. Nowadays, it’s common to encounter people with a good amount of knowledge in these languages, especially those who spend time with web browsers and related tasks. However, it was quite different in my youth.
I remember having difficulties trying to figure out the proper proportions for our heavy-metal band’s webpage. (Hell yeah! 🤘) It wasn’t easy for me to implement even simple actions like hover or transitions. So, completing this module brought me some good memories as well.
What did I practice?
This responsive web design module comes in five sections, each ending up with a project for us to complete in order to earn the certificate. The program first introduces the basics of HTML and CSS. Then showing modern techniques like CSS variables and finally, we are dealing with different screen sizes by implementing Flexbox and CSS grid.
If you are interested, each of these five projects that I completed can be found here. However, I believe what’s more important is what you try to learn and attempt along the way, rather than the concrete outcomes. In that sense, I believe that we should not overvalue credentials either.
A bit of data about this journey
That’s why I find it’s more interesting to come up with my own story delivered thorough data. Let’s start with a simple table first.
This is a screenshot from the Google Sheets that I kept records for this certification program.
- I assigned letters ‘A to E‘ for each section and CP stands for Certificate Project that comes at the end of each of those sections.
- The titles of each course can be read as: ‘what we dealt with‘, ‘by doing what‘. Take B02 for instance: We use ‘CSS Flexbox’ by ‘building a Photo Gallery’.
Apart many other things, you may realize two things at the first glance:
- C02 has a correction by cancelling out the Picasso part and bringing the Cat part instead. I will come back to this a little later.
- CP04 took more time than any other projects.
The last one was caused due to a long pause. Around the time I was preparing the 4th project last year, we had to move out and change the city we live in. One thing come after and I became lazy to finalize this program. When I finally came back to my routine I decided to start over that project, but I anyway kept all hours that I spent before.
The main reason I am mentioning this (in fact, the reason that I am writing this whole post) is to write some take-aways related to a data analysis process. If such table would come in front of me, I probably would not think of a scenario similar to what happened to me. Instead, I’d come up with insights claiming that CP04 is the ‘hardest’ project among other. The context, the domain-knowledge and the why-behind-decisions are really important when it comes to analyzing a dataset.
Looking deeper into the data
OK, enough with the notes, let me get back to my records.
As you’ve already seen in the table above, I’ve spent totally 60+ hours for this program. Below is a chart that shows a little more detail about the time I spent.
First I practice the files as fCC guided me through. This is about following the steps exactly as they show. But after that, before jumping into the project part, I did a recap for each files and kept some notes between the code lines, just to understand the concepts better. A sample of such notes is like the one below.
Checking the above pie-chart makes me think of the Recap part as a balancing bridge between the Practice and the Project parts. I know it may sound assertive to say this, but reviewing the course might helped me spend a more ‘balanced’ amount of time on projects. But I have to mention that even if this is true, it may be valid only for me, for my situation here.
What about a bit more detail?
Finally, let’s explore each course files a little deeper. The below chart shows the distribution of practice and recap time that I spent for each of them. For the simplicity of this graph, I moved out the times that I spent for creating projects.
Looking at this chart, we can say the following:
- Apart from B01, B02, C03 and E01, the total time that I spent for each file exceeds 2 hours.
- On average, the recap time takes around 40% of the practice time.
- C02 and E02 have the smallest ratio of recap time compared to the practice time.
- A01, A02 and C03 have the greatest ratio of recap time compared to the practice time.
Again, if I’d have to come with insights only by looking at this graphs without knowing the story behind, I’d easily suggest that C02 and E02 (with the least recap time) are the ‘easiest’ practice files among others. But what if they were so hard that I wanted to skip the recap part quickly? Or, what if they were not structured well enough that I lost my interest?
What was the story then?
Having said that, I know for sure that one of the reason that I have less recap time for C02 is this:
Remember the strikethrough on the title of the project, that was ‘Picasso Painting’? There was a file with that name and when I came back to this program (I explained my big pause earlier), I wanted to have a quick overview of the entire module to remind my mind what I’ve done so far.
And then I realized that there was a section that I did not complete, and I understood that fCC replaced that Picasso file (that I’ve already completed) with another one, titled the Cat Painting. So I did the Cat Painting project and this time did not bother with a recap. This alone itself reduces the amount of recap time compared to the practice time, combined with the Picasso and the Cat.
I guess it is already clear, but let me point out this again: If I hadn’t marked this part, I would have easily forgotten this story and read these digits as a sign of a ‘toughness’ of the file or some other factors that have nothing to do with all of these. In most cases, it would be almost impossible to record whole story of such changes within the dataset itself. But at least providing such tiny marks in the datasets to remember that story in the future might help to come up with better insights.
My suggestions for the program
That last part brings us to my suggestions for those who want to finalize this Responsive Web Design Certification by Free Code Camp.
I couldn’t find concrete records but I believe that fCC replacing the Picasso Painting file is highly related to the complexity of its abstract visuals. I believe learners like me were having difficulties to understand the parts of the project. (Here is one post about this in fCC forums.)
The fCC’s programs are structured along a step-by-step guideline. Main idea behind is that they follow a ‘learn by doing’ approach which I also find very effective. Another good point is that by these steps learners can smoothly follow along the guide, because it is easier to grasp the project with its tiny parts.
However, all these have a side effect: You can get lost during the process, especially when the steps get repetitive. I believe this is caused not by coming to a repetition, but getting far away from the context instead.
By context, I meant the parts of the project. Although fCC provides a visual at the beginning of each course to give you the idea what you will be building, you might still get lost during the process as some parts may not make sense to you. And if you don’t know what parts you are dealing with (at least visually), it is harder to understand how to build them. Let me provide you visual materials to elaborate this.
This previous picture is what you get (could get) at the beginning of the Picasso Painting file. It is very hard to understand what are those parts. Especially when the picture is shrunk like that. Checking the original Picasso painting itself might give you more ideas, but still it is not that easy to grasp those parts. One might say, that’s what abstract art is all about, isn’t it? 😼
What I offer then?
While making this Picasso project, we were creating divisions (<div>) with ids and classes named such as mask, hat, triangle, or guitar. Without knowing how they look like, it is hard to understand what you are creating. Therefore, keeping the pictures (of each project file) nearby while practicing the steps might help you to understand what you are dealing with.
It would be also very helpful to have the related parts highlighted when the learners reach the corresponding parts.
Final Thoughts
Anyway, it was a very nice journey for me and I would like to underline my respect and love to the Free Code Camp community. Big kudos to them! 🙏