FreeCodeCamp: Basic Front End Development Projects – Review – Part 1

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 FreeCodeCamp.com 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 RihannaDaily.com

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.