Last Updated on
When I decided I wanted to jump in full throttle to learn about web development, I was at a total loss on what I should learn. It seemed there were endless tools and languages out there and it was always changing. After spending a ton of my own time trying to learn, I got frustrated and realized I needed some guidance.
First thing I did was signup on Codecademy and started working my way through some courses. This helped and I did learn, but something was still missing. How do I implement all this? That’s when I decided I needed some formal training and went to SAIT to take their Web Development Fast Track program.
Overall, I think it was a great program and getting the formal education certainly helps when applying for jobs. However, if I had just known what I should focus my efforts on, I might not have needed to do it. At the end of the day employers in the field tend to be more concerned about what you can do and what you have done as opposed to what certifications you have. Using a combination of tools like Codecademy, YouTube, and some plain old research on Google, I think you can figure out how to make things fall into place fairly quickly if you know what to learn and where to start looking.
Where to Start In Web Development
So if you are looking at getting started in web development, I’m going to write this article for you. This is the article I wish I had found over two years ago.
1. Content Management Systems (CMS)
In my mind this is the easiest place to start your web development journey. There are many content management systems out there but the most popular by far is WordPress. There is so much out there on WordPress that I am not going to go into a lot of details because this article will become a novel if I did.
Another popular CMS is Drupal. I have not really used Drupal so I can’t speak much to how it works or its functionality, but I have seen job postings specific to Drupal and it does have a large community of users contributing to it. This would also be a good CMS to learn if you were to pick one.
Being familiar with some popular CMS’s is a valuable skill to have in my mind. If you are just starting out freelancing, you are likely to get clients who don’t have a large budget and it won’t be worth your time to code a whole website from scratch. Also, there are jobs out there specific to WordPress developers and I have seen a few for Drupal. Theoretically you can have a website up using an open source CMS like WordPress in a matter of minutes. When you start out, most of your time will likely be spent on filling in content, images, and configuring plugins as opposed to doing much coding.
There are lots of great websites and YouTube channels out there to help you get started. I strongly recommend taking a look at WPMadeSimple, WPBeginner as well as Traversy Media & Kori Ashton’s YouTube channels.
2. Photoshop, Illustrator, Gimp, & Image searching
Being able to do some basic image searching and editing is a must if you are doing any front-end web development tasks. I’ll start by mentioning that you cannot just use any image you come across on Google and use it on your site. You need to make sure all images you use have the right license.
A good place to start is Unsplash which has a great database of high-quality images that are free to use. There are others out there that are alluding me at this point, but I’ll be sure to add them when I come across them again.
You can use Google to find free images, but you need to know how to search for them. If you search images on Google, make sure to select “Tools” under the search bar. There should be a new submenu with an item that says “Usage Rights”. Make sure it is “Labelled for reuse”, or if you intend to modify the image, “Labeled for reuse with modification”.
Image Editing & Creation
When it comes to image editing, Photoshop is the industry standard. However, if you aren’t prepared to spend the money on an Adobe CC subscription, GIMP is a great open source image editing software worth starting with.
Most of my image editing is very minor. In fact, the vast majority of it is optimizing a 5MB image for the web. If you have a page with a bunch of images that are 5MB your page will take an unreasonably long time to load. Just knowing how to do some basic image manipulation is extremely helpful. Even if you need to touch up an image a client sends you.
If you are looking to create your own custom graphics or icons, then you will want to use Illustrator. As mentioned above with regards to Photoshop, GIMP can do this too so it might be worth starting there if you don’t want to spend the cash. I personally almost never touch Illustrator as I usually find other online services or contract out to get graphics done. Graphic design is not really my thing, so I can’t say much more than that.
3. Domain Name Management & Basic DNS configuration
There is not really much to say about this other than you need to know how to register a domain name and manage the DNS records. DNS records effectively determine where to send specific types of requests and data to. For example, pointing your domain to a server, setting up email records, domain forwarding, and even verifying domain ownership are done configuring your DNS settings.
*Note: There are other ways of verifying domain ownership. Using DNS records is only one method.
There are many resources out there to learn how to register a domain as it is an extremely simple task. However, I’ll touch on some of the DNS management stuff in the next point as it kind of goes hand in hand.
4. cPanel, AWS, & Google Cloud Platform
Domain name management and hosting solutions are integral parts of web development. Where and how are you going to host your site?
cPanel is a hosting control panel (user interface) used to configure and mange your server. It has been around for a very long time and is often used on dedicated hosting accounts as well as shared hosting accounts. If you are just starting out with web development, I recommend starting here. Just to name a few things, cPanel allows you to:
- navigate your server’s file system,
- install and manage SSL certificates,
- install and manage CMS’s (among other open source web apps),
- connect your domain names to your server,
- create subdomains,
- backup your website,
- and even setup email accounts.
All you need to do to get started is get a hosting account, a domain name, point your domain to the name servers of your hosting account, and make sure your ‘A’ record IP address matches the IP address of your server. There might be slight variations on this depending on who your domain name registrar is and who your hosting account is through, but that should roughly cover how to point your domain to your server.
This is a great article on cPanel for beginners.
AWS & Google Cloud Platform
If you are ready to up your game, then it’s time to look at AWS (Amazon Web Services) or Google Cloud Platform. Both offer many different services and it can get really complex really fast. However, knowing the basics on how to run a website or web app on one of these (if not both) is a good skill to have. The major advantage to learning how to use either of these services is that it’s scalable and you only pay for what you use. On top of that they have many other services available depending on your needs and this is where it can start to get complex. Trust me on this however, having skills in AWS and/or Google Cloud Platform are things you can put on a resume, and employers do post it as a required skill in a job.
If you were to focus on one right now, I suggest AWS as it seems to be the most popular one to use and I see it in job posting far more often than Google Cloud Platform. Academind has some excellent AWS videos among other topics related to web development. His video on deploying a Laravel Project to Elastic Beanstalk on AWS was amazingly helpful to me. Furthermore, AWS itself has a YouTube channel which is very helpful. They have videos on launching a WordPress site to Amazon Lightsail.
5. SSL Certificates
In today’s web development age SSL certificates are a must. Google is now using them in part of their algorithm when they rank sites in search results, and I believe they are even starting to penalize sites that don’t have them. Generally speaking, I never build a website without an SSL certificate.
You will need to learn how to install and manage SSL certificates on servers. I wish I could give you more information on this however the installation and management of an SSL certificate varies by hosting provider. Just don’t bother with a self-signed SSL certificate.
There are a couple things to note, however. SSL certificates usually have an extra fee associated with them, but this is starting to become less common. GoDaddy still charges for SSL certificates, however they are included at no extra cost if you use AWS. I believe the same goes for Google Cloud Platform, but don’t quote me on that.
6. HTML & CSS
Let’s say you are comfortable navigating WordPress and doing some basic image editing. However, if you really don’t like how something looks on your WordPress site, then it’s time to learn HTML & CSS. I’m not going to dwell on this one because the reality is that it is an absolutely basic skill you need to have if you want any chance of getting work in web development at all. Frankly it’s not very difficult either to get the basics down.
For the real beginners out there think about it this way:
- HTML allows you to display content and organize it
- CSS allows you to decide how it gets displayed on a screen (layouts, colors, etc.)
HTML & CSS are used virtually everywhere in web development, so it is imperative you learn them. There are tons of YouTube videos and resources out there to get you started or to advance your understanding. Codecademy is what I used in conjunction with YouTube.
Lastly, I’ll leave you with my very first HTML and CSS project. A simple one-page project made to look like a whole site using only HTML & CSS
- You can start to build real projects to see how the pieces fit together
- And there are tons of resources available if you’re stuck.
PHP is still used widely and there are many sites and frameworks out there built on PHP. WordPress itself is built on PHP and I don’t see WordPress going anywhere anytime soon. There are many jobs out there too that specifically require skills in PHP and PHP frameworks for web developers.
Laravel PHP Framework
Assuming you have already learned some coding basics, then once again I suggest using a framework to learn PHP. Laravel is one of the most popular PHP frameworks out there and I see it mentioned in job postings quite regularly. Traversy Media has a great series called “Laravel From Scratch”. He walks you through from start to finish on how to build a CRUD (create, read, update, delete) application – or simply put, a blog.
If you haven’t figured it out by now, I really like Traversy Media’s YouTube channel and I strongly suggest you subscribe to it regardless of your skill as a web developer.
9. Command Line Interface (CLI)
Learning the basics of the CLI will become extremely valuable and improve your workflow. If you are working with frameworks like Laravel or Meteor, you will be starting to work in the CLI. I don’t think you will have much of a choice.
Some people might be wondering why we would bother typing in the CLI when we are in the age of GUI’s (graphic user interfaces). Frankly as you start to learn the commands and what you need to do to perform a certain task, using the command line is much faster. Navigating system folders, making commits in Git, starting localhosts, installing dependencies, etc., are all performed quicker within the command line.
My biggest complaint with the CLI was that you often needed a few terminal windows open to work. This was kind of a pain until I discovered Terminator. Unfortunately, Terminator is only available for Mac and Linux distributions as far as I can tell. But knowing the CLI will quickly become a valuable skill as a web developer both you and your potential employer will appreciate.
Personally, I think just learning how to navigate the CLI is a good place to start. After that, just look up the commands you need to use depending on what you’re doing. Whether it’s Git, Laravel, Meteor, or some kind of dependency, it’s fairly easy to find what commands you will need to use. Depending on the framework or tool you are using, you should have no problem finding commands in the documentation.
On a final note for those who are just getting started, there can be some very noticeable differences between the Windows CLI and Mac/Linux. So make sure you are looking for the appropriate commands based on your operating system.
10. Git (version control)
Version control is an extremely valuable tool not just for a web developer, but for any coder. It gives you a safe place to store your code, track changes, revert to previous versions if something breaks, and much more. In the professional world teams use it to work on different sections of code, track the changes and who made them, document known issues, and generally coordinate their work.
If you are just getting started with git, Source Tree has a GUI (graphic user interface) for git which is what I first learned on. This was handy in my opinion when learning so I could focus on the concepts of git and how it works. However, you may quickly find yourself moving to the command line for git if you get serious as it ends up being more efficient.
Personally, I prefer the command line and using GitHub for my repositories.
If you are interested in learning web development, taking the first few steps can be overwhelming with all the information out there. It’s always changing and it can feel impossible to know where to focus your efforts on. When I was first starting web development I was struggling with what to focus my efforts on and how to apply what I had learned.
To help those just starting out, this article suggests you learn:
- Content Management Systems (CMS)
- Basic Image Editing (Photoshop, Illustrator, GIMP, etc.)
- Domain Name Management and DNS Configuration
- cPanel, AWS, and/or Google Cloud Platform
- Installing & Managing SSL Certificates
- HTML & CSS
- The Command Line Interface (CLI)
If you are a total newbie, I would start with the first six items (excluding AWS or Google Cloud). In fact if you are looking to set up affiliate marketing blogs, or small online stores, you might be able to get away with stopping here. However, if you want to dig deep into the core and learn how it all works so you can really customize things, then keep going with the other topics.
Did you find this article helpful? Is there something I’m missing that new web developers should learn? Let me know in the comments.