Finishing YelpCamp and Lessons Learned

So I have finished The Web Developer Bootcamp and the final project, YelpCamp, a full-stack Yelp clone built with Node, Express, Mongo, Mongoose, Passport.js, and Bootstrap.

It took me four months and some change to completely go through the 45 hour course and finish YelpCamp. Here are some of my thoughts on the process.

Reviewing the Basics

A lot of what I learned in the beginning was a refresher on topics I have already learned. I did it anyway, just to make sure I was completely solid on my understanding of the basics.

I thought this was a very important step: there were some things I wasn’t exactly clear on, like DOM manipulation and CSS classes, etc, things I should have mastered before taking the course. It was evident right from the beginning I should continue to go over these introductory parts, as I really needed it.

Meat and Potatoes

Eventually we started going over things like Node, Express, etc. I found that, while these are intermediate topics, these libraries make working with JavaScript much, much easier. They abstract away so much of tediousness of writing JavaScript that I wished I had learned them first which is never a good idea 1.

These sections were the longest and the most hastily explained. For newcomers, this might be a turnoff but Colt has one of the highest rated courses on Udemy 2 so I am sure newcomers won’t be too scared of these sections.

Building YelpCamp

First, let me say: I am somewhat happy with it. It is my first full-stack app, I built it right alongside Colt. I have recently added modifications and with Ian Schroover, I am going to add even more modifications. It is also helping me in my other full-stack app, Check Yo Self as I can apply what I learned in YelpCamp to that app.

The problem is, the course came out almost three years ago. Web dev changes at a breakneck pace. Everything was out of date. Take this snippet for example:

//INDEX - show all campgrounds
router.get("/", function(req, res) {
  if (req.query.search && req.xhr) {
    const regex = new RegExp(escapeRegex(req.query.search), 'gi');
    // Get all campgrounds from DB
    Campground.find({
      name: regex
    }, function(err, allCampgrounds) {
      if (err) {
        console.log(err);
      } else {
        res.status(200).json(allCampgrounds);
      }
    });
  } else {
    // Get all campgrounds from DB
    Campground.find({}, function(err, allCampgrounds) {
      if (err) {
        console.log(err);
      } else {
        if (req.xhr) {
          res.json(allCampgrounds);
        } else {
          res.render("campgrounds/index", {
            campgrounds: allCampgrounds,
            page: 'campgrounds'
          });
        }
      }
    });
  }
});

This is a mess of callback hell that doesn’t 3 exist anymore in 2017. There are promises in ES6, and async/await in ES7. I am sure Colt knows this now and has references to these features in his new course. However, this app is probably over a thousand lines of JavaScript over several modules. I don’t have the time, or the want, to refactor this. I didn’t come up with this idea but it does look good on my portfolio.

End Game

My mission in all this was to learn the basics of full-stack web dev in a pace and learning style I could be successful in. I have done that. Now, it is taking what I learned and working it into Check Yo Self. Pop on over to YelpCamp and give it a look. Tell me what you think.


  1. Some people think you can learn libraries right away without learning the basics. This is erroneous thinking. If you are a junior, like I am, learning the basics will get you hired. There are concepts you need to fully understand before calling yourself a professional JavaScript developer. It’s that simple. 
  2. His newest course, The Advanced Web Developer Bootcamp has a similarly high rating though it isn’t as well-thought out, and it shows in ratings from his previous course’s students. The course uses several teachers but is more up to date and uses React, ES6 and so much more. I plan on buying it when it is on sale again. 
  3. And shouldn’t 

Gauging My Progress

As I step through The Web Developer Bootcamp, I am beginning to realize just how much I’ve learned the last two years and how it is beginning to codify in my brain.

I am coming from a Humanities background but I have always had technical chops, working with circuits was a thing I liked to do; improvising is fun.

I was, a long time ago, a Computer Networking major but decided that I wanted to build computers instead of administering them. Before class started I chose Electronics Engineering Tech at my local 2 year. I did very well. I got an A in my first class, being the only black person as well, by the middle of the semester, the only female. This was the early 2000s.

I’ve always had technical chops. In fact, I taught myself electronics over the course of two years and was competent enough that my physical science professor wanted me to help her teach the electronics section. She was a physicist and my hero.

I prefer being an autodidact, if you haven’t guessed by now.

Translating Hardware Chops into Software Chops

I just played around with circuits and diagrams of those circuits with basic logic structure knowledge. I had and have the ability to learn logically complex things. The fact that it has taken me two years and 5 CS classes as well as learning on my own makes me feel really silly. I have always been the smartest person in the room. It is quite humbling to struggle with something that you feel you should get right away.

Sometimes I look at other newbies and see they struggle with simpler concepts than I did. It makes me feel better 1 but I also want to help them become competent.

The Web Developer Bootcamp and Leveling Up

I have been studying for two weeks practically non-stop. I am seeing so much progress that it encourages me to keep going. I can ask relevant questions of the material, when I get stuck instead of running to Stack Overflow or Slack/Gitter first thing, I open up Dash Docs and read the MDN, which is beginning to make a lot more sense to me.

I can write simple algorithms much more easily than just a few months ago. I don’t know what happened or what switch flipped but I am really, really happy.

Being Happy For Other Developers Success, However…

I see developers all around me getting jobs. I am happy. I am really happy for them. This isn’t a fake happy. It is how things should work. You never begrudge another’s success.

I do, however, feel a pang of longing when I see the tweets and YouTube videos. I am waiting for my turn.

The helpful thing for me right now is knowing I am about a little over a half a year from being ready to apply for developer jobs. It is the solace I need to not get discouraged.

The Code

Some of the things I worked on.

Arrays

//Print Items in an Array in reverse //

function printReverse(arr) {
  return arr.reverse();
}
printReverse([1, 2, 3, 4]);

// Refactor to print on new line
function printReverse(arr) {
  for (var i = arr.length - 1; i >= 0; i--) {
console.log(arr[i]);
  }
}
printReverse([1, 2, 3, 4]);

// isUniform //

function isUniform(array) {
  for (var i = 0; i < array.length - 1; i) {
    if (array[i] !== array[i + 1]) {
  return false;
   }
 }
  return true;
}

// sumArray //

function sumArray(arr) {
  var sum = 0;
  arr.forEach(function(element) {
    sum += element;
 });
  return sum;
}

// max //

function max(arr) {
  var maxValue = 0;
  arr.forEach(function(element) {
    if (maxValue < element) {
  maxValue = element;
    }
  });
  return maxValue;
}

Objects

//Movie database for object practice

var movies = [
  {
title: "Taxi Driver",
hasWatched: true,
rating: 5
  },
  {
title: "The Social Network",
hasWatched: true,
rating: 5
  },
  {
title: "Steve Jobs",
hasWatched: true,
rating: 4.5
  }
];

function stringBuilder(movie) {
  var result = "You have ";
  if (movie.hasWatched) {
    result += "watched";
  } else {
    result += "has not seen";
  }
  result += '"' + movie.title + '" - ';
  result += movie.rating + " stars";
}

movies.forEach(function(movie) {
  console.log(stringBuilder(movie));
});


  1. The arrogant, competitive little snot I was still peeks through sometimes. 

The Web Developer Bootcamp

So I am still working on Check Yo Self, but, like I do, I jumped into another tutorial where you build stuff. I am so stuck on and afraid of the logic of Check Yo Self that I decided that I needed to shore up some knowledge of basic JavaScript 1 so I bought, and have started working on The Web Developer Bootcamp by Colt Steele.

Colt is a Bootcamp instructor in San Francisco 2 and has taught students how to be professional full-stack web developers for mountains of money. His Udemy course is usually $1000 but I got it for $10 on one of their deal weeks.

It is one of the highest rated courses on Udemy and especially recommended by web devs across the internet.

Relearning Basics

I started from the beginning. I did skip some HTML and CSS stuff but as I said on my Facebook page:

I guess starting out coding in HTML and CSS…It felt really easy and so I skipped over A LOT. Free Code Camp taught Bootstrap so I felt there was no need to learn deeper.

Taking the Web Developer Bootcamp course has opened my eyes to so much about semantic markup, what attributes, block level elements, inline elements, selectors, and properties are and their differences. Can’t believe I aced my intro to web dev class without knowing that much about basic web dev.

It is never a good idea to skip things, no matter how “easy” they seem. I am learning that.

Granted, as you get better there are things you can skip but if the language is new or the concepts are new, it behooves anyone to learn it. Do not skip it.

Course Curriculum

This is a full stack course where we will basically learn the MEN stack. He excludes Angular. Not sure why but we will end up building several front and back end projects ending in YelpCamp, a Yelp clone for camps using Mongo, Express, and Node.

Exercises.

Here is a form I built in HTML that I had an issue with 3.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Register</title>
</head>

<body>
  <h1>Register</h1>

  <form class="register">
    <label for="firstName">First Name: </label>
    <input id="first" type="text" name="firstName" placeholder="John" required />
    <label for="lastName">Last Name: </label>
    <input id="last" type="text" name="lastName" placeholder="Doe" required />

    <div class="sex">
      <label for="male">Male </label>
      <input id="male" type="radio" name="gender" value="male">
      <label for="female">Female </label>
      <input id="female" type="radio" name="gender" value="female">
    </div>

    <div>
      <label>Email:
        <input type="email" name="email" placeholder="Your email" required />
      </label>

      <label>Password:
        <input type="password" name="password" pattern=".{5,10}" required title="Password must be 5 to 10 characters" />
      </label>
    </div>

    <div class="birthday">
      <label for="birthday">Birthday: </label>
      <select name="month">
        <option value="Month">Month</option>
        <option value="Jan">Jan</option>
        <option value="Feb">Feb</option>
        <option value="Mar">Mar</option>
      </select>
      <select class="day">
        <option value="Day">Day</option>
        <option value="first">1</option>
        <option value="second">2</option>
        <option value="third">3</option>
      </select>
      <select class="year">
        <option value="Year">Year</option>
        <option value="1978">1978</option>
        <option value="1979">1979</option>
        <option value="1980">1980</option>
      </select>
    </div>

    <div class="terms">
      <label for="terms">I agree to the terms and conditions </label>
      <input type="checkbox" name="check" value="terms" required />
    </div>
    <input type="submit">
  </form>
</body>

</html>

Here is some CSS from the basic CSS section that I just finished. There is something like 42 hours of video and assignments.

/* Style the HTML elements according to the following instructions.
DO NOT ALTER THE EXISTING HTML TO DO THIS.  WRITE ONLY CSS!

/* Give the <body> element a background of #bdc3c7*/

body {
  background: #bdc3c7;
}


/* Make the <h1> element #9b59b6*/

h1 {
  color: #9b59b6;
}

/* Make all <h2> elements orange */

h2 {
  color: orange;
}

/* Make all <li> elements blue(pick your own hexadecimal blue)*/

li {
  color: #459BE6;
}

/*Change the background on every paragraph to be yellow*/

p {
  background: yellow;
}

/*Make all inputs have a 3px red border*/

input {
  border: 3px solid red;
}

/* Give everything with the class 'hello' a white background*/

.hello {
  background: white;
}

/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/

#special {
  border: 2px solid #459BE6;
}

/*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/

div p {
  font-size: 25px;
}

/*Make only inputs with type 'text' have a gray background*/

input[type="text"] {
  background: gray;
}

/* Give both <p>'s inside the 3rd <div> a pink background*/

 div:nth-of-type(3) p {
  background: pink;
}

/* Give the 2nd <p> inside the 3rd <div> a 5px white border*/

div:nth-of-type(3) p:nth-of-type(2) {
  border: 5px solid white;
}

/* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/

div:nth-of-type(3) em {
  color: white;
  font-size: 20px;
}


/*BONUS CHALLENGES*/
/*You may need to research some other selectors and properties*/

/*Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)*/

input:checked {
  margin-left: 50px;
}

/* Make the <label> elements all UPPERCASE without changing the HTML(definitely look this one up*/

label {
  text-transform: uppercase;
}

/*Make the first letter of the element with id 'special' green and 100px font size(font-size: 100)*/

#special::first-letter {
  color: green;
  font-size: 100px;
}
/*Make the <h1> element's color change to blue when hovered over */

h1:hover {
  color: blue;
}
/*Make the <a> element's that have been visited gray */

a:visited {
  color: gray;
}

Other Courses

Eventually, I’d like to be an iOS dev at some point. So I bought a Swift course from Steven 4 and award winning iOS dev from the Hacking With Swift series, Paul Hudson.

I won’t be starting that course until after I start the other course I bought Modern React with Redux and Webpack.

Got all of these courses for $10 a piece. Not too bad.


  1. Not just jQuery. 
  2. His apartment has me starry-eyed and wishing for a dev job and I am totally California dreamin’. 
  3. A form. Of all things. 
  4. Guy’s last name is always escaping me.