Lesson 2: Types of web developer and the simple web dev roadmap

Overview of previous lesson

In the last lesson, we explored the idea of having a roadmap to help us determine where we are going. To begin building out that roadmap we started by explaining some of the different types of development and what they can be used for:

• Mobile Phones
• Developing native applications which live on a smartphone
• Desktops and Laptops
• Developing native applications which are meant for desktop or laptop
• Automobiles
• Developing software components that run different functions on an automobile
• Smart Devices(IoT)
• Developing software for devices that usually live in the home and can communicate with each other via Bluetooth
• Web Development
• Developing software that will live on the web and be accessible via a web browser

Then we talked about how to choose a path and determine which path would be the most useful in terms:

1. Ability to do the coursework entirely online(for free in some cases)
2. Doesn’t require a college degree
3. Ability to find remote work online
4. Availability of high-quality jobs in the field

After digging into all of these things we can see that web development is a clear winner in many of these categories. Keep in mind that the author is biased as this is very similar to the path that I took when I was learning development, however, in teaching this material I’m aiming to steer you clear of the pitfalls that hampered or slowed down my ability to rapidly learn a skill and begin writing real-world code as quickly as possible.

Today we’re going to be diving deeper into this web development path and explaining what exactly that looks like, what careers you can end up with, and then we’ll talk a little more about the technologies you’ll be using.

The different web development paths

Web Developer

A web developer is someone who can write code that can be executed over the web via technologies such as HTML, CSS, and javascript. A web developer will primarily work on things like building and maintaining websites, working with CMS systems such as WordPress/Drupal, and more recently they may be working with no/low code platforms like WIX or other tools which help nontechnical users build websites.

To become a web developer you have to learn some core concepts about how the web works like how to set up a server, work with DNS, and have a basic understanding of email. You’ll also have to be able to get your site up and running on that server. Of course, all of that assumes you can build out a website in the first place.

This skillset is the entry-level skillset that anyone starting on web dev needs to have as a foundation. In almost all cases to develop on the web, you’ll have to learn HTML, CSS, and javascript and then increase your skills outward from there depending on the specialty that you choose.

Frontend Developer

We discussed frontend development a little bit in the previous lesson, but here I’d like to dive a little deeper. A front-end developer is primarily concerned with developing the user experience and user interface or UI/UX of the application. At a more junior level, you’ll be implementing UI/UX according to instructions or designs provided by a designer, but as you become more senior you’ll be expected to understand core UI/UX concepts yourself and to be able to implement them in your work as you develop.

This doesn’t mean that you’ll be expected to become a designer. Far from it, but you’ll often encounter issues where you are building out a site or a component for a site and you’ll need to be able to make decisions on what should go where and if the things you’re developing look good and will be intuitive for users to use.

While UI/UX is important what separates a frontend developer from a web developer is a deeper understanding of both javascript and CSS. On the javascript front, you’ll want to develop an understanding of both Vanilla JS and a deep understanding of at least one frontend JS framework(ReactJS or VueJS). On the CSS side, you’ll have to understand how to write CSS from scratch, use SCSS or LESS and understand how to compile them, and have a deep understanding of at least one CSS framework. (Bootstrap, Foundation, Tailwind). You’ll be using these skills to build highly interactive single-page websites which don’t need to reload the page every time you go to a new tab and that look and feel more like an application instead of a website.

The term vanilla script is used to refer to pure JavaScript (or we can say plain JavaScript) without any type of additional library - javatpoint

This is where we start to get the concept of a Web Application Developer. Frontend along with backend and full-stack developers are all devs who can work on a full-scale web application as opposed to only working on websites like a web developer. When you start moving past the web fundamentals into learning frameworks and how they interact with each other, you’ll be on the path to becoming a web application developer.

Backend Developer

As a backend developer, you’ll have a completely different focus. The primary thing you’ll do as a backend developer is to write code that makes all of the functionality of a website or web application work by telling all of the different systems what they should do and how they should work together. As I mentioned in the last lesson the backend is every part of the site that the user doesn’t see, but it’s also the part that makes everything work.

This includes many things such as API development, storing and retrieving data from databases, building systems for user authentication, converting business logic into code, and more. From a skills standpoint, you’ll be learning things like backend frameworks(Rails, Laravel, Django), SQL, NoSQL, API development, and many conceptual things like MVC and CRUD.

When you go down this path you’ll be expected to know how to design and develop the backend of a feature from scratch. An example would be if your boss told you that he wanted a system that could create and store users and then retrieve those users whenever he went to a specific page. Your job would be to do things like think about and then create the tables and columns that would be in the database.

Things like:

first_name

last_name

email

password

created_at        

Then you’d create API endpoints that your frontend developer could send requests to. If your frontend developer wants to create a user your system would tell him what inputs he needed to have and then he would send them in a request. Your API would be expected to retrieve the data sent from your front-end, create a user in the database, and then respond to the front-end that a user was successfully created.

Of course, there’s much more to API development, but that’s the gig in a nutshell.

You won’t just be doing API development though. You can do all sorts of interesting things on the backend from working with APIs to create integrations, building data charts and graphs, writing and fixing queries to databases, building out authorization and permissions settings, and more. The amount of different things you can do on the backend is about unlimited.

Fullstack Developer

Finally, you have the concept of a ‘Fullstack’ developer. This is a developer that can do everything on the front-end and the back-end. They might be better at one or the other, but usually, they can jump in where needed and make things work.

Fullstack developers usually work to develop features end-to-end and can often build an entire feature on their own. Instead of just building the UI and waiting for the backend team to finish the API they can also go into the backend, write migrations for the database, set up their own API and routing, and get a feature fully functional. You can think of them as the ‘Jack of All Trades' when it comes to development.

The upside to full-stack development is that you can do just about anything, but the downside is the lack of specialization. Any time you're writing code just for the front-end or just for the backend day in and day out you start to develop a deep understanding and start to become quick with the work that you're doing, but when you're doing full-stack work you may find that you struggle when you get too deep into any specific project where you don’t have a deep level of knowledge or expertise.

DevOps

Although I don’t consider DevOps entirely a part of the web development path, it is something worth considering. DevOps is a hybrid between a developer and operations or IT person. They are dedicated resources who usually come from a coding/development background, but who also have an interest in infrastructure and IT. They are responsible for things like setting up cloud infrastructure, making sure that infrastructure is optimal, and then they monitor and maintain that infrastructure with the use of specialized tooling.

Usually, they are going to be working with tools for CI/CD, directly with operating systems, networking, and cloud service providers like Azure and AWS. On many small teams, this can be handled by a lead developer with some interest in the idea of DevOps, but as teams become larger or use more of a microservice infrastructure a DevOps member can become mandatory.

CI/CD is a method to frequently deliver apps to customers by introducing automation into the stages of app development. The main concepts attributed to CI/CD are continuous integration, continuous delivery, and continuous deployment. CI/CD is a solution to the problems integrating new code can cause for development and operations teams (AKA "integration hell"). - RedHat

We may dip or dive into some DevOps concepts from time to time, but I consider this almost another specialty past becoming a web application developer.

The core web development skillset

We’ve gone over it quite a bit, but to even become a web application developer you’ll have to have the core web developer skillset first. Once you understand the basics of web development you can start looking into the different specializations and paths and determine better which suits your personality.

Web application development path

Web Developer → Frontend Developer → Sr Frontend Developer

Web Developer → Backend Developer → Fullstack Developer → DevOps Engineer

Web Developer → Fullstack Developer

WordPress developer Path

Web Developer → WordPress Developer → Sr WordPress Developer

Web Developer Path

Jr Web Developer → Web Developer → Sr Web Developer

The point is that all of these paths start with that same core skill set. That’s why there is a heavy emphasis on learning the web stack of HTML, CSS, and js first, and then once you’re solid in those skills you can continue developing the skills that are in line with where you want to go.

If you want to learn more about the different web development roadmaps check out https://roadmap.sh/. There you’ll find roadmaps for all of the different skill paths and much more.

The Web Developer Roadmap

The next thing I want to go over is the roadmap of skills to be acquired to simply become a good web developer. If you develop these skills you’ll be able to start picking up work and jobs in web development and you’ll be well on your way to a greater career in the web world. Be it simply web dev, application dev, or WordPress dev.

Here’s the Web Developer Roadmap:

Jr Web Developer → I build websites

Skills: HTML, CSS, jQuery, JS, Bootstrap

• You can make a basic website from the ground up.
• You can move elements around on a page.
• You can style and change the style on a webpage.
• You have a basic understanding of CSS frameworks
• You can add basic interactive functionality like opening/closing a modal, opening and closing an accordion, and using a plugin to create things like sliders.
• You can fix bugs on a website.

Web Developer → I build good websites

Skills: Above + GIT, SCSS, FTP, DNS, SQL, PHP, CLI

• You can make a mobile responsive website from the ground up
• You can add and submit forms from your website
• You can convert a PSD to HTML and CSS
• You can add advanced interactivity to your website
• You can version control your work
• You can use backend functionality to store and retrieve data.
• You understand concepts and protocols like FTP and SSL
• You can host a website online
• You add readable comments to your code

Senior Web Developer → I build great websites using the right technologies for the job

Skills: Above + Linux, Apache\Nginx, CDN, Advanced SQL, backend frameworks(Wordpress\Laravel), Hosting(hostgator, godaddy, basic AWS)

• You can make complex websites from scratch, using templates, or using online creators depending on client needs.
• You can use backend frameworks when sites are more complex and need additional functionality.
• You version control everything.
• You have a deep understanding of how websites are delivered from a server to a client.
• You can modify your underlying server technology by adding new packages, upgrading PHP versions, and changing configurations
• You can diagnose and solve complex issues.
• You can read and write code quickly and at a high level
• Your code is self-commenting and descriptive where possible

Wrapping Up

Now that you’ve learned about the different types of programming and how they can be used as well as learning about the web development roadmap you should have a clear idea of how to proceed and what languages to start with.

Before you get coding though there are a few things that you’re probably missing if you haven’t tried to code before. Namely a text editor and git! In the next lessons I’ll guide you through a list of different text editors you’ll want to know, help you figure out which is the best to get started, and then we’ll go over “How to get git” installed on your computer.