My Experience as a Web Developer Intern

In some of my previous blog posts, I mentioned how the MCOR Bootcamp had internship interviews towards the end of the course. I interviewed with three companies: XOXY, Crisis Preparation and Recovery, and Pyxl. At the time I really wanted to become an intern at Pyxl because they’re a large digital marketing firm. I thought that an internship at Pyxl would offer me the chance to work closely with senior developers.

The company that offered me an intern position, however, was Crisis Preparation and Recovery, or CPR for short. They picked me because of my history with WordPress which their website was currently running.

What Their Website Looked Like

The last time they had a web developer touch their website was in 2006 if I remember correctly. The website had a very out-of-date design, some empty pages, a few broken links, and wasn’t mobile responsive. I knew going into this project that BootStrap was going to be the easiest way to make the site mobile friendly.

Below are some screenshots of what the website looked like when I was hired.

This slideshow requires JavaScript.

Learning How to Develop WordPress Themes

At this point, I was perfectly familiar with Bootstrap and building websites without any sort of content management system like WordPress. I had experience running WordPress websites, but not experience developing WordPress websites. The day before I officially started my internship I watched a ton of YouTube videos and read lots of articles about how to build a WordPress theme.

The biggest problem I faced early on was getting BootStrap to properly work with WordPress. After some hours of frustration, I found out I needed to include a “Nav-Walker” file. This file would allow WordPress and BootStrap to play nicely and after including that file I had the navigation working perfectly.

Making the Website Modular

The whole reason CPR wanted to run WordPress was so they could easily modify anything on the website without a developer on hand. I knew that whole site needed to be easily modified however they want once I was no longer working with them. For that reason, I decided to find a WordPress plugin that was basically a visual editor. I personally didn’t want to use a plugin to basically build an entire website, but it was the easiest and fastest solution to my problem.

The plugin I ended up choosing is called Elementor, and it’s a free plugin available to anyone. This plugin was loaded with features, and although it isn’t 100% perfect it’s close.

Different Designs

I created a couple of different designs, some of them were good and some of them weren’t. Eventually, we picked different elements of each design and smashed it all together. The result was pretty decent. The new design didn’t start to look really good until the homepage had a full-size image, and I introduced a blue gradient to the footer.

We decided on fixing the navigation to the top of the browser because, well, it just looks good.

Summary

I could probably keep going on, but I think it’s time to wrap this article up. Overall my experience working as a web developer intern was pretty great. Not only did I learn new skills, but I also gained the experience needed to launch me further into the web development field. CPR really let me be creative and genuinely listened to what I had to say. Plus they paid me pretty darn good for an intern so that was awesome.

You can also view the finished website if you’d like. Now it’s time to touch up my resume and website so I can find an actual web developer position!

MCOR Web Development Bootcamp Review

In late 2016 I found out about “Coding Bootcamps” and I after some research I found out Maricopa Corporate College. Their course was much cheaper than other “Bootcamps” and they seemed like a reputable company so I decided to attend their “Front-end Web Development Bootcamp”. There are quite a few “Bootcamps” out there, so I figured I would give you my review to help you decide which one is right for you.

A Little Bit About Me

My previous career path (automotive technician) required lots of manual labor and was already beginning to damage my body. I was already familiar with WordPress and running small “blog” websites so I figured a new career in the web development field would suit me well.

A few years before I decided to attend the MCOR Web Development Bootcamp I had learned a little bit of C, Ruby on Rails, and Objective-C. I understood the basics of programming which was a massive advantage going into the course.

Before You Attend the Course

There are a few things you should know before attending the MCOR Bootcamp which will make the learning process much easier.

1. You need to be very familiar with the operating system your computer runs. I have been using Apple computers for quite a while and would consider myself a “power” user. Understanding how to move files around and create a hierarchy of your files is very important. If you use Linux or Windows you need to understand how to manage files as well as installing and updating applications.

2. Know some programming basics before you attend the course. Spend a day or two just learning the basics of any given programming language. What is a variable? What is a function? What is a class? How do websites work on the client side and the server side? There are excellent free resources for learning this kind of stuff such as Codecademy. Understanding these basic concepts before hand will make the learning process much easier.

3. Understand that the course is fast paced. After all the MCOR Bootcamp is effectively everything you need to know about web development jammed into a very short period of time. Because of this having free time outside of class to learn more is a huge advantage. Get used to teaching yourself because the world of web development is always changing and there’s only so much that can be jammed into a 15-week course.

4. It’s much easier to learn a new skill if you’re genuinely interested in the skill you’re trying to learn. For example, I became interested in cars around the age 17 and every day I woke up wanted to learn more about them. Fast forwards a couple of years and I had the skills of a high-level automotive technician. In the case of web development, you need to be genuinely interested in it. Having a genuine passion for what you’re trying to learn will make you endlessly thirsty for more knowledge on the topic and will eventually transform you into an expert on the topic.

The HTML and CSS Part

The first part of the course covers HTML and CSS which are the basics of any website. Since HTML and CSS are pretty basic they’re pretty easy to learn. This part of course also covered the popular web framework known as “Bootstrap” which was created by Twitter.

Bootstrap is pretty easy to learn and the documentation for using Bootstrap is excellent. Using Bootstrap is the easiest way to make your website mobile friendly and making it look good as quickly as possible. Although this part of the course was a little long for me personally, I was really pleased with how thorough it was.

The Javascript Part

The second part of the course covers Javascript which is how you bring functionality to a website. Javascript is where the programming basics I talked about earlier come into play. Unlike HTML and CSS, Javascript is an actual programming language. I knew going in the Javascript learning curve was going to be very steep, but the instructors did a great job of showing us the basics.

The only thing I didn’t like about the Javascript part of the course is that we used a bunch of relatively unnecessary components such as Webpack and Babel. While these components are great to have experience with, it pushed the actual Javascript portion of the course further out.

Understanding the basics of programming really helped me understand what was going on when we’re writing code in the class. Our first project in class was building a simple Javascript calculator. Building a Javascript calculator is relatively easy and was a great way to get my feet wet.

Personally, I thought the Javascript part of the course was challenging, but it was pretty good. I know some of the other students were struggling with understanding the programming concepts used in our Javascript calculator. Again, learning some basic programming before the course will help you massively during the course.

The PHP Part

The third and final part of the course was PHP which is a server side programming language. This part of the course had never been taught before so we were the first students to get the PHP part.

Unfortunately, since we were the first students to be taught PHP is was pretty rough. We covered the material at an extremely fast pace which ultimately made nearly every student extremely overwhelmed. Although I did learn quite a bit of PHP I didn’t learn nearly as much as I could have if the pace was slower.

Although the PHP part of the course wasn’t that great, Maricopa Corporate College learned from that, so future PHP lessons will probably be much slower paced and easy to understand.

The Internship

Towards the end of the course, a few companies interviewed the students and each company hired one student as an intern. Not all students were hired as an intern, however, I was lucky enough to be one of the few who did. My internship lasted about 5 weeks and my job was to rebuilt the companies website which was powered by WordPress.

I am very thankful that Maricopa Corporate gathered those companies for interviews, and I now have professional web development experience which will help me get into the web development field professionally. I’ll have a more in depth article about my internship soon if you want to read more about that.

Conclusion

In conclusion, I would say I am pretty happy with the MCOR Bootcamp. They were able to teach me the skills necessary to get into the web development field and they got me hired as an intern. As time goes on the MCOR curriculum will get better and better.

So if you’re reading this as someone who is interested in investing their hard earned money into the MCOR Bootcamp course, know that your experience will be even better than my already good experience. I strongly recommend learning the basics of programming before hand and make sure you’re truly passionate about becoming a web developer.

Crazy Pong – My Second JS Project

My second Javascript project, Crazy Pong, was inspired by my first project. I felt like my first project was fairly simple, and wanted to build something similar but more complex. A very long time ago I tried to get into Objective C. When I was learning Objective-C I followed a tutorial that built a simple Ping-Pong game. I eventually got overwhelmed and gave up on Objective C. I decided that I now had the skills to build something like that in JavaScript, so that’s what I did.

Object Manipulation

To start I just tried to manipulate an object on the DOM with keyboard inputs. Once I eventually got that to work I restricted the movement to just left and right, and limited to the area of movement inside the game area. In my last project, I used view height and view width to make the project fully responsive. This time around I decided to make this project non-responsive. This made it much easier later down the line with the hit detection.

Other Players

Next, I created other players. For this, I created more of the paddles in HTML, styled them identical to each other in CSS, and then positioned them on opposite ends of the playing area. To move them I tested if the ball position was ever different than the paddle position. I then incremented the paddle position accordingly to follow the ball position. This created an extremely basic AI that would track the ball like a real player would.

Artificial Intelligence

I didn’t want to make the other paddles seem like absolute robots, so I made their skill dynamic. Every time a paddle hits the ball it becomes slightly faster, or slightly slower. This made the paddles slightly less robotic. For this, I used the Math.random() function to randomly generate a movement speed between 1.5 and 3.5.

Collision Detection

Next was detecting the collision between the ball and the paddles. This was something I had never done before. After some googling, I found some solutions that didn’t really make sense in my head, so I took it step by step and figured it out myself. If the ball position was within both edges of the paddle and reached the paddle’s outer face then collision was detected. Really the solution is very simple it just looks a little complex. Once collision was detected it would change the ballSpeedY or ballSpeedX depending on which paddle it hit. This is what makes the ball go in a slightly different direction every time it hits a paddle.

Scoring Detection

If the ball ever went past the paddle and hit an edge the ball position was reset, this effectively served the ball back to the player again. If the ball hit the red player’s wall the red player’s score would increase. If the ball hit blue player’s wall then blue player’s score would increase. This method of scoring was used for every wall. I thought this was the best way to implement some sort of scoring system, so I just rolled with it.

Scoring System

I decided it would make the most sense if the scoring system counted up instead of down. The player doing the best would have the lowest score, and the player doing the worst would have the highest score. Although this is slightly counterintuitive to most games I felt like it made the most sense in this situation.

Running the Application

Finally was the setInterval() function which ran everything I mentioned above as much as possible. This means that the ball position, paddle positions, ball speed, hit detection, AI movement and scoring all update as fast as possible. This also allows for a cheeky way to slow down the entire application if needed.

Summary

Overall this application was much simpler than my first but was built on some of the same ideas. I used the Math.random() function multiple times which I learned in the first application. I also used event actions which I used in my first application. The only thing that presented a large challenge for me was the hit detection. Now that I understand hit detection and how to implement I will probably use it more in the future. You can play Crazy Pong by visiting my Projects page, and you can view the code by visiting my GitHub.

Crazy Clicker – My First JS Project

For my first Javascript project, I didn’t really have a plan. I decided to try and manipulate a simple div on the page when it was clicked. After having a hard time remembering how to get an element by ID I eventually figured it out. At this point, I decided to make the div shaped like a ball. Now that I had the div element in my Javascript file, I needed to find a way to detect when it was clicked. For this, I used the .onclick method and set it equal to a function. In that function, I had all the logic for what I wanted to happen on click.

What Happens On Click

On click, I wanted to change the position of the ball to a random location on the DOM. For this I used the Math().random function and I generated a random number between 20 and 80. I then rounded those values down to whole numbers, and assigned those numbers to ball.style.top and ball.style.left. I used view height and view width to make it fully responsive so it would work on a phone. I also increased the score every time the ball was clicked, decreased the size of the ball to make increase the difficulty, and added time to the timer.

Setting the Timer

The timer was created using the setInterval function which fired every 100 milliseconds. If the timer ever equaled 1 then the lost() function fired, else it decremented the timer. Every time the ball was clicked six units of time were added to the timer. This is what makes it important to click the ball as fast as possible.

What Happens When you Lose

When the lost() function fires it makes the ball unclickable and changes it to a fixed position in the center of the screen. It also massively increases the size of the ball and displays the user’s score inside of the ball. Also, the timer and score keeper fade out. All this stuff happens using CSS and JS animations to make it all smooth and pretty.

Summary

Overall this project was pretty simple but was an excellent learning experience. I had never built a JavaScript project with almost no outside help or tutorials. This forced me to experiment with different ideas and do some googling to get things to work. After showing my instructors some of my code they suggested ways improve readability and performance. You can play with Crazy Clicker by visiting my Projects page, and you can view the code by visiting my GitHub.

Why Did I Decide to Become a Web Developer?

When I was a child the things that interested me most were skateboarding, Rubik’s cubes, and video games (more specifically Star Wars: Battlefront II). At some point in my childhood, I started to become interested in cars, but my knowledge was limited to horsepower statistics and not much more.

Eventually, I was gifted “Grand Turismo 5” for my PlayStation 3. This is where my deep interest for cars started. Understanding how to tune suspension in Gran Turismo directly translates to real world suspension setups. I just kept getting deeper and deeper into everything until I eventually bought my first vehicle.

With my first vehicle, I learned how to do small repairs and general maintenance. With my second vehicle, I learned how to do much larger repairs, and eventually ended up working in a small shop. I found automobiles so fascinating that I just kept getting deeper and deeper, thirsty for more knowledge.

The problem here is that professional technicians don’t really have all that great of a salary, and have to work pretty darn hard to earn that salary. I kept putting off school because I was unsure of what I wanted to do. Eventually, I realized I wanted to do something in the computer science field, but I didn’t want to do a 4-year degree. With a 4-year degree I would 25 years old by the time I completed my degree, and that just sounded like a very bad idea to me.

So, with an expensive and long degree out of the cards, I was left with only a few options. I could’ve just taught myself everything, but with a complex and completely foreign topic that would’ve been quite difficult. It was at this point I began to discover “Web Development Boot Camps”. The idea was simple, take a huge amount of information and pack it into a short, high-intensity course.

I really liked the idea of this because it could get me launched into this new career path very quickly, and that’s great considering I plan on moving out of my parent’s house soon. So here I am, at week 5 in my 12-week long web development boot camp.

Interestingly enough I went into this expecting it to just be a school program into a career that I would like, but not love. But, I’ve actually found web development to be very relatable to the automotive field. Because of this relatability, I have begun to fall in love with the art of web development, and have a thirst for more knowledge every time I open up my laptop. This thirst for more knowledge is now what is driving me to play with HTML, CSS, PHP, and JS all day outside of class.

I’m looking forwards to learning more about the web development field, and I’m looking forwards to getting much deeper into PHP and Javascript in the coming weeks. With my strong thirst for knowledge, my hopes for becoming a professional developer in the near future are high.