Basic Front End Development Project #1: Tribute Page

*completed on 4/18/16

The first basic front end development project is a tribute page. You’re asked to create a page fulfilling two user stories: 1) include text & images 2) link to an external web page for more information on the person you created a tribute page for. You can’t look at source code for the sample tribute page that is provided or anyone else’s for that matter.

My page is for Rihanna and you can view it here. To be honest, I started off with ambitious goals for the layout but after spending more time on it than I would’ve liked to, I simplified everything.

First of all, based on the instructions, you’re asked to create the page using Bootstrap. I’ve heard about Bootstrap but my first interaction with it was through and I understood it enough based on the activities provided. However, in beginning the project, I felt like I didn’t know enough about Bootstrap functionality. So of course I searched for a cheat sheet to see if there was something that would provide me with a list of all the classes I could use, etc and I found “things” but not quite what I was looking for, so I had to spent a good portion of my afternoon skimming through documentation to find styles that fit my vision while satisfying the assignment requirements. My original idea included four pictures aligned to the left side of the page with the content in the the middle, but I couldn’t figure out how to make that all work out, responsively… using Bootstrap. Seems easy but of course there is a learning curve for this and my first reaction to having to do this is to whine, but instead I just chose to do the bare minimum, scrapped my original idea which I loved but I’m sort of goal-oriented at this point with the goal being completion LOL. Not good practice, as part of my plan in completing this coursework is to include some of these projects in my portfolio. So as I move forward I’ll have to figure out how to get over this.

My whining about bootstrap is just a reaction to doing things differently. If the task were to just create your own tribute page using CSS, I’m good money, but the video mentioned that you would barely need to include CSS in the CodePen console so I stuck with those rules and maybe my strict interpretation of the guidelines is the issue, maybe they weren’t meant to be so cut & dry.

Regardless, I completed it. I can say that I’m still not 100% with the Bootstrap grid system but I get how it works. For me my confusion is around why sometimes you use col-md instead of col-xs or col-sm or col-lg and/or why they’re being used together. So I’ll have to revisit, but at the moment I’m not sure about continuing in learning Bootstrap.

How Did I Do It?
  • I used the container and well classes to wrap my content.
  • My header “Rihanna” is centered using the Bootstrap class text-center and my subheading is a <div> tag with the pre-defined lead class, which I found during my search for alternative formatting.
  • I implemented the Bootstrap grid system starting with the Rihanna image, using the <div> tag and the row class, I broke up the page into 3 columns: the furthest right and furthest left included the col-md-2 class and the center column included the col-md-8 class. All together that adds up to 12 and since the grid is broken into 12, it’s complete. I don’t know why I used md and not xs-sm-lg, I just did and since it worked, I didn’t investigate further. The <div> tags with col-md-2 are empty, so the only content in that row is within the col-md-8 <div> tag.
  • The same thing applies to the second row which includes the timeline information for Rihanna’s career. I’m an enthusiastic fan, but I got bored compiling the information (I don’t know what’s gotten into me today – I just may be moody). So I rushed through inputting the content there but it still works.
  • The bottom includes the second user story which asks that we link to an external web page. I provide two options, the Wikipedia site for Rihanna and a fan site called

See the Pen FreeCodeCamp : Build a Tribute Page – Rihanna by a. chigozie (@shesgottadevelopit) on CodePen.

The next project is a portfolio page which I’ll begin work on probably next week. This week was interesting and I’ll share some of what I learned.

3 comments on “FreeCodeCamp: Basic Front End Development Projects – Review – Part 1

  1. I am at the point in my “study” where i have run into this project. I feel the exact same way, but i have no clue how to even start.. I feel like the lesson on jQuery just kind of throws you into bootstrap. I came out of that lesson not understanding it at all.. And i have wasted tons of time trying to find a code or cheatsheet for bootstrap as well…

    1. From everyone that I’ve spoken with, unless you have the basics of CSS down, trying to get started learning bootstrap might not be the best option. I understand why folks suggest it though, it gets you up and running. But for someone who doesn’t know why certain things do certain things, this isn’t as straightforward for them.

      I also didn’t find a bootstrap cheat sheet so I decided to completely abandon bootstrap altogether since I have a good handle on CSS. I’ll revisit later.

      If those things are stopping your progress, just work around them as much as you can.

      1. In the course on FCC, they take you through HTML &CSS. Then immediately through jquery and bootstrap at you. I completely felt lost once at the project stage. I’very moved back over to treehouse to go through their CSS basics. I feel like I have the basics down already for it. Bootstrap was confusing with the columns for some reason. I was finally able to get an image in the middle column, but couldn’t do anything else with text and where I wanted it on the page. I think for myself I need to take a few steps back and retrace what I’ve gone through. I have spent the entire week about ready to give up completely feeling like I would never get any of this down. I then realized that I’ve only been looking at code for about three weeks and I needed to not get so ahead of myself. Lol

Leave a Reply

Your email address will not be published. Required fields are marked *