My web development roadmap (if I had to do it over again)

I have been learning to code since late 2019, while holding a full-time job. It wasn't easy, but entering 2023 when I started freelancing, web development training became my main commitment.?

It took me three years to finally get to the point where I could build a decent web app with Next.js, complete with all the basic features — speed, responsive UI, authorization + authentication, user base scalability, and search engine crawlability with server-side rendering.

I wish it took me less time, but I didn't have a guru to guide me through. All I had were tutorials and ChatGPT. But I'm happy with the progress, and I'm still learning to this day.

Based on my personal experience of the past nearly four years of web programming, this would be my ideal web development roadmap, if I had to do it all over again…

Table of contents

1. Choose your IDE

2. Learn HTML and CSS

3. Learn basic Javascript (let, const, function, scoping, reusability)

4. DOM Manipulation + JS libraries

5. Run a local server (XAMPP, Laragon)

6. Learn PHP (templating, CRUD)

7. Use WordPress as a framework

7. Learn Object Oriented Programming

8. Apply OOP to WordPress theme development (+ autoloaders, singletons)

9. Like reusable components? Check out React.js

10. Learn about package managers (npm, yarn, etc.)

11. Learn about module bundlers like Webpack

12. Stick to WordPress or continue your journey…

13. Learn about Next.js (and Typescript)

14. Learn about Firebase

15. Learn how to use GitHub

16. Practice CI/CD with Vercel

17. Learn about pay-as-you-go hosting with AWS Amplify

18. Learn about authorization and authentication

1. Choose your IDE

There's nothing better than jumping into code as a beginner. Yes, we can spend time in theory-land, learning how the Internet works, and how web pages are built on the server or client-side. But that's no fun. Coding is hard and can suck the fun out of it quickly. That's why the first thing I would do is to choose an IDE.

Atom was my first choice, but after trying out Visual Studio Code (VSC), I stuck with it. It was an arbitrary choice at first, but with VSC, I was able to follow coding tutorials more closely using the same extensions my tutors were using. Your code will run just as well on any general purpose IDE, but VSC seemed to be the community favorite at the time.

2. Learn HTML and CSS

It's time to see your website on your browser. It's not live yet, but you can write a "Hello World" if you want.

Learn the three ways of applying styling — inline, style tag, and external CSS. Generally, external CSS is good practice, but there are cases where you'd use inline styling (usually what Javascript does for interactivity). On the other hand, style tags offer a fast way to apply styling without leaving your HTML page, and maintaining low CSS prioritization, making your styling more maintainable.

Avoid my mistake of trying to learn all the features of HTML and CSS. I end up not using everything and forgetting about some of the niche tags and CSS rules. A good developer is not someone who memorizes every syntax there is to know, but they are aware of them and can choose to apply them wherever necessary.

3. Learn basic Javascript (let, const, function, scoping, reusability)

Before learning about DOM manipulation, which is the fun part of Javascript, you need to learn about scoping. If you've never taken programming before, this could be a tricky one. Once you learn to create functions, recognize when to use let and const depending on how variables want to be referred back.

Learn how to be a 10x developer by creating reusable and maintainable code early on, keeping things DRY (don't repeat yourself). Create functions that manipulate datasets, and learn how to avoid bugs by processing different data types (string, number, arrays, and objects).

I didn't have the luxury to use ChatGPT back then. It's okay to use it to find code samples, but you must understand how the code works before copy-pasting the AI's response as your own code.

4. DOM Manipulation + JS libraries

Now we get to make things appear, disappear and fly on the browser. DOM manipulation using vanilla Javascript could be challenging at first, but you should learn how to do this before employing libraries like jQuery, GSAP (for animations), and other libraries that give you shortcuts.

Using libraries isn't cheating. It's a smart move, and we'll do that more often. But you have to be aware of the hidden cost of using unnecessary and unpopular libraries. First, your website could become slower to load, and second, you won't find sufficient community support (for troubleshooting, tutorials, QnA's) for unpopular libraries.

5. Run a local server (XAMPP, Laragon)

This enables you to emulate a server environment without buying a hosting service.?

My first local server tooling was XAMPP, and it may look daunting to use at first. That's why tutorials exist, and you should now be able to follow through the installation process, and troubleshoot issues that pop up during installation by searching them online. You'll find the answers, trust me.

Once that's set up, create a file and name it index.php. Use the Live Server extension by Ritwick Dey and then you're able to auto-refresh your website every time you hit Save.

(Note: I now use Laragon. It allows you to simulate using real domains, and not "localhost". This solves so much pain when it comes to custom routing and I highly recommend it)

6. Learn PHP (templating, CRUD)

PHP is alive and well. Use it as your first web programming language. Javascript is great, but at your current knowledge, it's not enough to build something cool — something more useful than an online poster.

PHP allows you to build your web pages at scale. You can have a website with 50 pages without writing 50 pages of html. You probably need at least three PHP files — one for the header template, one for the footer, and one for the content body.

In the content body of your php file, create a function that queries data from the phpMyAdmin database using MySQL, which comes out of the box with XAMPP. Got that? Now create an input field that sends data to PHP (which lives on the server) to filter the content the user sees on the content body.

Learn about CRUD operations — create, read, update, and delete data on the database using PHP at the command of your frontend UI components (forms and buttons).?

7. Use WordPress as a framework

WordPress is an open source software that allows anyone from any level of experience to design and build websites. You could technically skip steps 1 through 6, and use page builders on WordPress to design something better than what you could have done with vanilla CSS and Javascript at this level.

But WordPress is also a framework, meaning you have the power to create a WordPress site with code, and have complete control over its frontend. You'll understand how important this is when you try to customize a WP site using its user-friendly albeit limited theme customizer.

Download it into your local server, install it, and find a tutorial that explains how to work with its specific file systems, like home.php, front-page.php, functions.php, and more.

7. Learn Object Oriented Programming

I'm now moving through the roadmap faster than ever, and I hope you can catch up.?

Object oriented programming (OOP) may sound daunting, but it is just a more advanced programming technique using the languages that you already know (PHP and Javascript). Most tutorials will give you the analogy of a car or person, but I think that doesn't really illustrate how useful it is.

Here is my take. OOP helps you organize and reuse code. Functions are great for reusability, but you can get tangled in a mess of spaghetti code pretty soon, and can introduce unexpected bugs when accidentally naming two variables the same thing.

Think of an OOP class as a blueprint, and inside it are the relevant functions and variables (they're called methods and properties now) that work together for one purpose. Think of them like a single focused department to solve one particular issue.

8. Apply OOP to WordPress theme development (+ autoloaders, singletons)

WordPress's core codebase uses OOP as well as functional programming (using functions instead of classes) to organize its code. But when building your first frontend theme for WordPress, you can choose OOP. You'll find that using it will become a breeze after learning how autoloaders work.?

Don't forget to apply a singleton design pattern on parts that should run only once (enqueue style, enqueue scripts, and everything else in functions.php). Of course, there are parts or components that will be reusable — buttons, form fields, sections. Rather than recreating throughout your templates, put them in a class (you can write HTML inside PHP classes too).

Congratulations, you've discovered reusable components using PHP classes. You can keep your code even drier by creating more instances of the same class (using "new") without having to rewrite all the HTML and CSS for each time you want them on your site.

9. Like reusable components? Check out React.js

When it comes to supercharging your frontend, Javascript has a trick up its sleeve. React.js is a library developed by Meta that allows developers to manage two things well — reusable components and states. The former is self-explanatory. What about states?

Ever used a website that flows so naturally? You click on a product preview of an e-commerce site, it expands slightly for a better view. You click it once more and it fills up your screen. You check out its product variants and the copy, images, and prices transitions in and out smoothly without triggering a refresh.

That's probably the work of Javascript. Knowing how tedious DOM manipulation can be, you may wonder if you can ever reach a point where you could do all that with vanilla Javascript. Well, my friend, don't stress.

Take a break from WordPress, open a fresh project, and quickly start using React with a CDN link. Employ animation libraries that are compatible with React, like Framer Motion, React Spring, and Anime.js. Why reinvent the wheel when you can download them for free?

10. Learn about package managers (npm, yarn, etc.)

You're now entering high school in terms of web development. You have used a CDN link to get started with React — fair enough. But for production builds, you may want to install the whole library in your local machine.

Rather than using your mouse to go to the library's website and clicking on download, use npm install (or yarn add) to download libraries directly into your project folder. I personally use npm, but it doesn't really matter which one you use as many libraries will have the options for you to access them from both package managers.

You may need to install Node. It may not look like it's doing much for your project, but trust me, it's what makes working with React and other libraries possible. It's basically a Javascript runtime environment for executing React and other libraries based on ES6 module syntax (more below).

11. Learn about module bundlers like Webpack

You may want to apply React components and place them within your reusable WordPress components, but your site won't simply load the Javascript you meticulously prepared.?

That's because your React code (written in modular ES6 syntax) is not compatible with WordPress. This is where Webpack comes in. When configured properly, Webpack runs whenever you save your Javascript file. It's a compile-time module bundler that converts your modular ES6 Javascript code into "classic" Javascript that uses a single point of entry. That's the Javascript that Wordpress understands.

The bundler will generate new files in your project folder under the 'build' directory (it could be called something different, like 'output'). Enqueue these files instead of your raw React components onto WordPress, and you will find everything works.?

12. Stick to WordPress or continue your journey…

With WordPress, you're able to quickly get production-ready websites up and running. You can already make money with it, as WordPress is being used by a majority of marketing websites in existence.?

It is search-engine friendly, too, which makes it a prime choice of technology by web development agencies and freelancers wanting to get more out of a client with their add-on SEO service. If you decide to get into WordPress professionally, it might be beneficial for you to use plugins and page builders to speed up development.

Huh? What about all that talk about OOP, bundlers, singletons, and stuff? I don't need to use them after all??

It's a fair enough question, but consider the fact that most people "overprepare" for employment. As I've mentioned, you can skip everything from 1 - 11, and use WordPress as effectively to build amazing and functional websites. But that won't set you apart from your competitors, hence I highly recommend you to understand how WordPress works before using it.

If you decide to stop here, enjoy the fruits of your labor!

If you're not happy settling down with WordPress, you're part of my gang. Because we are going back to Javascript land!

13. Learn about Next.js (and Typescript)

Welcome to college. Like real life colleges, you get to choose your majors. There are many other ways to build websites, apart from the PHP + MySQL stack. You could code your website in Python, Ruby, and Java.?

But I'm the kind of person who likes efficiency. We've already learned React, haven't we? Let's take it to the next level with Next.js. Next.js is a framework for building web applications using Javascript. Actually, using Next.js for development will eventually get you to try Typescript, which is Javascript, but with types.

Typescript is useful for defining function parameters, and the expected data type to be returned by them. You absolutely do not need to define types for every single variable, especially if you have defined them with a primitive type (string, number, and boolean).?

But once you're working with arrays, objects, and promises (for asynchronous Javascript), you'll find defining a custom type a necessary pain for a beneficial future. Types allow the IDE to make smarter suggestions for existing variable and function names, object properties and methods, and prevent bugs by spotting them at compile time.

I hated it at first. Now, I'm quite liking it. I still write some code in Javascript among its Typescript peers, but the beauty of Next.js is that it doesn't force you to write in 100% Typescript. This allows for a smoother learning curve and I very much appreciate this from the makers of Next.js.

14. Learn about Firebase

At some point, you'll need a database to create a useful app. In my experience, I've tried playing around with remote SSH keys to connect with my existing MySQL database of my hosting provider. Unfortunately, it was not possible due to the hosting company's security configurations. If I must use MySQL, there's PlanetScale.

But since my app was so simple, it didn't matter if I were using SQL or NoSQL data architecture. I found Google's Firebase to be an excellent learning tool for working with NoSQL — using documents instead of tables and rows.

Plus, its free tier is absolutely generous. Provided that you pay attention to its security features and password-protect your app, you can get away with using Firebase for free for learning purposes.

15. Learn how to use GitHub

I actually used GitHub way before I was learning PHP. If you start now at this point, it's 100% fine. GitHub allows you to save your raw code online. It's like Google Drive for code. Unlike Google Drive, you can synchronize code on your local machine with that on GitHub (known as your remote repository).

GitHub is what many developers use to collaborate with each other and manage the same codebase. The primary software behind GitHub is Git, and Git allows you to create different versions of your code off a specific point in history (called a branch). This ensures that your main branch (which many projects use for production) is safe from experimental code.?

Once you know how to create a remote repository, commit and push code, create branches and merge branches, you're ready for the next step.

16. Practice CI/CD with Vercel

I know we're running fast now, but feel free to stop whenever.

CI/CD stands for continuous integration / continuous delivery or deployment. You may remember how tedious it is to update your WordPress theme code by disabling your website for maintenance, deleting files, and replacing them with new ones.

CI/CD makes upgrading your code feel seamless, and that has to do with GitHub. But before we dig further, let's talk about Vercel.?

Vercel is the company behind Next.js, and is one of the few cloud services that can help you deploy your Next.js app. Unfortunately, you can't take your Next.js code and upload it to your WordPress hosting server.

Next.js runs on Node servers, not Apache or Nginx servers that can run WordPress. That's because Javascript is being used as a frontend as well as a backend language, so a Node server must be used to be able to run Javascript on the backend for everything to work.

Fortunately, Vercel makes it so easy to deploy your Next.js app. All you need to do is to sign in and connect your GitHub repository with a deployment project. Choose a branch for your production branch (by default, it is the 'main' branch).?

Whenever you commit code into the main branch, Vercel will automatically compile and build your Next.js app. You can use Vercel for free with a generous free tier limit. You can deploy your portfolio and example projects for everyone to see, but do be careful about using it to do business (e.g. create an e-commerce) without a commercial license, which is included in the paid tier.?

17. Learn about pay-as-you-go hosting with AWS Amplify

We're coming towards my most recent level of understanding of web technologies. I could be wrong about a lot of things. But the things I shared that works here, should work for you too, and everyone who has shared content around them.

Why do I choose AWS Amplify when my database is on Google? I initially didn't want anything to do with AWS, as I was more familiar with Firebase at the time. However, when I try deploying my Next.js app on Firebase Hosting, it didn't work exactly as planned.

What worked was the Static Build deployment of my web app. Next.js, when configured a certain way, will generate static assets — regular HTML, CSS, and Javascript files. Does that make my web app SEO friendly? Absolutely, because HTML is crawlable.

But it's not exactly what I was looking for. I want my content to be dynamic. I don't want to generate hundreds of HTML files to serve hundreds of blog post content. I want the content to be dynamically generated on the server, so that web crawlers can read them without too much effort.

The approach that I'm talking about is, of course, server-side rendering, or SSR. That will only happen in an already configured server environment that supports Node, and I'm surprised that Google's Firebase has not yet made it easy to deploy Next.js apps with a few mouse clicks.

Do you know which service does that, though? (Apart from Vercel). Yes, you've seen the title, it's AWS Amplify. With almost no configurations at all, I was able to deploy my Next.js and get the benefits of SSR for SEO and speed.

?Interestingly, Vercel is an infrastructure built on top of AWS, but using AWS directly won't actually cost me as much as Vercel's premium plans. Instead, it's pay as you go, meaning you pay only for the resources you use.

Sure, I have to give out my credit card details for surcharge on unexpected usage. But with near zero monthly active users, my app doesn't get charged a single fraction of a cent. I'm still technically prepared to pay for AWS's service, but it gives me a huge boost of confidence that I can build whatever commercial apps that I want without legal repercussions.

18. Learn about authorization and authentication

Ideally, before you launch your app for the world to see, you should include some security measures to prevent spammers and bad actors of the open Internet to misuse your website. If they manage to do so, you might get an unexpectedly high bill from AWS or from Firebase (or both).?

Learn how to set JSON Web Tokens (JWT) in a secure http-only cookie and how to retrieve or delete them based on login status. You can also use the user's local storage to your advantage in storing non-sensitive data. Such data can be used to identify a user and retrieve the correct customized information like the username, images, and content served for this specific user.

Roadmap synced

If you've come this far, you're awesome! That is as far as my training has gone, and there are many more things I'd like to learn about — payment gateways, video hosting, and image optimizations.

Enjoyed content like this? Follow for more ??