Redesign of FreeCodeCamp Home Page – A Personal Project

This is a redesign of’s home page I made a few months back. I thought I’d share it. Any thoughts, questions, or comments are appreciated.


It looks really slick. Good job! There is a typo, you have “data visuapzation” instead of visualization.

1 Like

Thanks! It’s fixed now. I don’t know how I didn’t catch that before.

Looks nice! One small nitpick: the circular badges under “How Free Code Camp Works” go from all on one line on very wide screens to a single column on normal size. I think you could use an intermediate column size in your grid to make them go two across without it being overly cluttered. Actually, I noticed the existing FCC homepage behaves the same, but it’d be a nice fix to incorporate in this version.

Also, I would either remove or reword this part entirely:

Free Code Camp is a proven path to your first coding job. In fact, no one has actually completed our entire program, because campers get jobs before they’re able to.

First, it’s likely to become dated rather quickly when people do start completing the program. Second, no matter the reasons why, “no one has actually completed our entire program” does not sound like a positive. The second testimonial (from Brian Grant) gets the idea across with the positive tone you’re looking for.

1 Like

Thanks for the reply Chuck. I changed the “how it works” section so there’s two columns in a row for windows under 992px and then to one column for windows under 768px. I agree with you, it looks better.

I disagree with your thoughts on that quote though. I took it from the freecodecamp website and I don’t view it as a negative. I think it would get more people to try out freecodecamp. I made it prominent because a lot of people will skim a homepage and I thought highlighting that piece of information would make them pay some more attention to what freecodecamp is and what it offers. I’m curious as to what other people think.

Really nice implementation of the FCC Home Page. One thing I noticed is the Sign In button is shown in a line below the Map Chat Wiki… menu. Not sure if this was on purpose, but I think it would look better if it was in line with the rest of the menu. Otherwise, great job!

Thanks for the comment. I checked the site on a few different browsers and the Sign-In button’s text seems to be in alignment with the other text in the navbar. This is the way a button is positioned by default when using a bootstrap navbar, so I’m fine with it.

Great design! You really rocked with this design.

Good work dude, you nailed it :slight_smile: