FreeCodeCamp is a great website that lets you learn coding, among many other things. In between lessons it provides challenges to test what you’ve learned. At the end of the Bootstrap lesson are two challenges, the first of which is to create a tribute page in Codepen.io.
When I got to this part, my Twitter feed was full of praises for Hidilyn Diaz, a 25 yr. old woman who won the Philippines a medal in the Rio Olympics. I took it as a sign – and so I made a tribute page for her. Here’s what I did:
The Process (Duration: ~8 days)
I wanted to stay true to how I would do it if I were to just give it to a web developer. So I opened Sketch and started laying out the page. No holds barred! My only limitation is that I had to use Google fonts and I have to at least follow the Bootstrap grid as best as I can. What I ended up designing is not the easiest to code, I can easily say that in retrospect, but at the time I just thought it was a pretty decent design.
This was my design vs. my end product:
The good thing about coding your own design is that you can easily make compromises whenever necessary. For example, the shade of dirty white that I used in Sketch looked hella different in my browser, so I ditched that for another one. I tried many different shades before I got the one that looked right. I know I just won’t be able to enjoy this kind of real-time editing and trial and error if I’m working with a developer.
The bad thing is that it can be really, really frustrating to deal with code sometimes. For example, in the caption below the hero picture, I wanted it to look perfectly aligned vertically and horizontally. The code gods will not have it. I imagined it will only be just a matter of including equal padding for all sides, but the word ‘Mindanao-based’ presented some challenges. When I put equal padding on all sides, ‘based‘ goes to the next line. If I increase the padding in the left for a few pixels, the caption looks awkward in other screen sizes. Ugh.
I can only imagine how difficult it would be if the data inside the page is something that is beyond my control.
Lesson learned: don’t rely only on what you’ve learned from FreeCodeCamp. The site basically just spoonfeeds you the information.
Of Bootstrap Grids and Messy Codes
I have never used Bootstrap prior to this project. I understood the concept of rows and columns, but I wanted to style my rows so that each row will have a background style that spans the entire page, while keeping all my content in the middle, inside a container. What happened next was a little messy. For each row it looked somewhat like this:
<-div class="row numberofrow" style="some background styles"> <-div class="container"> //this keeps my content in the middle <-div class="col-md-something"> //this allows me to create columns depending on my design MY CONTENT </div> </div> </div>
This messy code presented some problems when viewing my page in smaller devices (see below). I had to create some workarounds and it’s still not as elegant as I imagined. 😦
I wanted the numbers to count up when I scroll over it. I wish it was as simple as that. I got a Counter script from the internet and called it a day. But one of the feedback from the FCC community is that they can’t really see the animation because by the time they get to that part, the animation is done.
The answer came in the form of Waypoint.js. Just kidding, the answer came from Waypoint but in the form of a script that I have stolen from another pen. It took me two days to figure out this “simple animation”. Simple. Yeah, right.
I did manage to find use for my previous C++ and C# classes back in college. I wanted my animation to happen only once but in the code that I ‘forked’ from David, the animation happens everytime you scroll down to that part. I added in a boolean variable, named it HasAnimated, gave it a false value. I added another condition in the ‘if’ part that if the animation hasn’t run yet (and is thus false) the animation will proceed and the value for HasAnimated will be changed to true. Now when you go back and scroll over to that part, the animation won’t run anymore!
Lesson learned: majority of the time you spent developing would be in google trying to find solutions.
Things I Would’ve Done Differently
- Right off the bat, I would’ve just followed the Bootstrap Documentation.
- Use a different color scheme. This color scheme doesn’t mean anything. I just picked it arbitrarily and it was a missed opportunity to communicate something.
- Accept that what I have in my browser is never going to look exactly like my design in Sketch.
Now, I’m off to work on another challenge!