Things I Learned from the Tribute Page Challenge in FreeCodeCamp

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:

hidilyndesign_beforeandafter
I think I did a pretty decent job of staying as faithful as I can to my design.

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.

Screen Shot 2016-08-25 at 4.51.54 PM.png

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.

giphy

The entire process took at least 8 days. One day in designing in Sketch. Two days of creating the HTML and CSS for the entire page in medium screen. The remaining days are spent pulling my hair out trying to make my page responsive and trying to make the javascript work.

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. 😦

Screen Shot 2016-08-25 at 11.16.29 AM.png
Lesson learned: when in doubt, follow what the documentation says.

Stranger Things (also known as Javascript)

I haven’t gotten to the Javascript part of the FCC lessons. But I had a simple animation in mind when I was designing the page.

Screen Shot 2016-08-25 at 4.46.03 PM.png

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!

giphy1

Lesson learned: majority of the time you spent developing would be in google trying to find solutions.

Things I Would’ve Done Differently

  1. Right off the bat, I would’ve just followed the Bootstrap Documentation.
  2. 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.
  3. 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!

Advertisements

12 thoughts on “Things I Learned from the Tribute Page Challenge in FreeCodeCamp

  1. I am currently working on my tribute page.. I feel like bootstrap and jQuery were just thrown at me right before saying, “Hey, do this project entirely in bootstrap!” I am beyond frustrated, i can’t seem to get anything to line up, and have had to walk away from the project. its day 4 and all i want to do is move back to teamtreehouse and start all over from the beginning…

    • It’s the same with me! I felt like I understood Bootstrap.. but when it’s time to do the project, I was dumbfounded. I think it’s best to just do it at your own pace, and don’t be afraid to use the chatroom if you have any questions. It IS (and I assume, it will be more and more) frustrating, but it really is satisfying when you finish it. Good luck to us! 🙂

  2. Wow. That is honestly a beautiful design. Could you briefly describe how you came up with this design? And does Sketch basically allow you to put together a web design without the fuss of knowing programming languages?

    • Hi, David! Sorry for the extremely late reply. I haven’t been able to check my wordpress for a while. Sketch does let you design webpages but that is as far as it goes. You can only export it as png or pdf. Sketch has, however, plugins that lets you see the css properties (like rounded corner sizes, box-shadows) of the elements you designed. I have to say I already have some basic understanding of HTML and CSS because we had web design classes in college about 3 years ago. As for coming up with the design, I first did research on the topic, and figured out a way to present information so that it’s not too overwhelming. I did the layout first, then applied styles in Sketch. (I hope I answered your question correctly!)

  3. I didn’t know any coding before going to Free Code Camp. And your code, to me, is super complicated. I try to imitate your style but there are so so many syntaxes that I am not familiar. Did you learn all these esoteric syntaxes that weren’t taught in previous challenges in those 8 days?

    • I agree the classes in FCC prior to doing the challenge isn’t really enough to execute a complicated design. So for the most part, I tapped one of my friends who does web dev for a living, for questions as to how to pull off certain things.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s