Web developer roadmap

Photo by Gema Saputera on Unsplash

Photo by Gema Saputera on Unsplash

After working as a web developer for over three years, and working hard to get good in my job, I believe I have an excellent step-by-step path an entry-level web developer should follow to become a senior developer in 2023. Web development is a huge field within the IT industry that covers a lot of skills. There is so much to learn, and everything is interconnected.

In this article, I will describe a learning path I consider to be the optimal order to learn in. My hope in sharing this learning path is to let others learn from my experience and learn web technologies in a step-by-step way where the skills are learned in optimal order.

Lv. 0 - Prerequesites?

Something to think about...

As I briefly mentioned in the introduction, Web development is a huge field. Because of this, I think it's very important to truly and deeply understand the basics of computers. To get a good foundation I would really encourage everyone to watch the CS50 course from Harvard, and CrashCourse's computer science course on youtube before jumping deep into the rest of the topics discussed in this article. These are absolutely incredible free resources that will teach in an entertaining way the very basics of computer science that will help you "connect the dots" faster.

While I don't consider myself a complete beginner anymore, I still revisit and dig deeper into the basics of computer science. Everything in IT is built on top of those basics. So if you truly master the basics, everything else will become easier to learn.

Another skill that does not directly help you, but will definitely indirectly help you progress and prosper in the field of IT - is touch typing. If you are able to type fast and accurately without having to look at your keyboard you can focus a lot more on problem-solving.

I don't think being a master touch typer is a prerequisite before starting on the journey to becoming a web developer, but I would recommend spending time learning to type using various online tools while learning. I really liked typingstudy.com in the beginning because they had good lessons based on the Norwegian keyboard layout.

I still spend time brushing up on my typing skills using a lot of different platforms, and I think I will continue to do so forever. Once you have reached a typing speed of around 40WPM you are sufficient enough to not spend too much mental energy on typing. Focus on accuracy in the beginning, not speed!

Lv. 1 - HTML & CSS

The basics

html code

Photo by Valery Sysoev on Unsplash

Web projects are based on HTML documents, and how the web browsers display these documents. No matter what back-end framework and programing language you use to generate HTML, you will need a solid understanding of how these basic building blocks of the web work and is displayed by the browser.

Once basic HTML is learned, CSS can be applied to make the HTML look and feel right.

Because of how important HTML and CSS is to web project I would encourage every beginner to focus on learning to build syntax-correct HTML pages for the first couple of weeks. Once you start adding javascript to the webpages you will benefit immensely from a solid understanding of when and where to use what HTML element.

After dabbling with the fundamentals of CSS, I would recommend learning SCSS or SASS as quickly as possible. SCSS or SASS makes it possible to write CSS that is easier to develop and expand upon.

SCSS and SASS cannot be read by the browser but has to be compiled into CSS. 10 lines of SCSS can quickly become 25 lines or more of CSS.

Learning to build web pages requires you to learn about typography, design, and UX. A web developer that has no skills in design and UX is in my opinion a bad web developer. Try to gain insight by reading books, watching courses, and trying to build good-looking and intuitive web pages.

Being a designer is a career on its own, but web development is a very multi-disciplinary field that is much easier with some basic design theory knowledge.

During this stage, you should gain a good understanding of how to make web pages look good on mobile phones, tablets, and desktop computers. A key skill to achieve this is CSS FlexBox and breakpoints.

Do not rush past this step. You will thank yourself for truly mastering HTML and CSS before moving on to more advanced topics.

Lv. 2 - CLI

Command-line Interface

Any developer that wants to learn any programming language quickly realizes that most of the tools they have to use are CLI-based. This means you have to open your command prompt, or terminal and type in commands.

For beginners, it might seem frustratingly hard and unnecessarily complicated to type your way through the CLI, when there is a GUI (Graphical User Interface) option. But once you get used to it, you will perform many tasks on your computer way faster than you probably ever could imagine possible. You will also get a much better understanding of how computers operate. All of this will make it a lot easier to troubleshoot problems you face while building web projects.

I like to use the metaphor that using the GUI is like being a car driver. Using the CLI is like being a car mechanic or engineer. To become a programmer you do need to have deeper insight than an average computer user.

As a good start, I would recommend any course that covers Linux or Mac terminal basics. You will probably discover that developing pretty much anything in Windows is problematic because most of the developer tools out there are Unix based, and expect file paths with forward-slash ( / ) instead of windows specific backward-slash ( \ ) to separate directories.

For Windows users, this might be the time to start using a Linux Distribution like Ubuntu or Linux Mint. Linux has a steep learning curve, but while learning to use Linux you will learn a lot of general IT stuff along the way, simply because Linux expects you to understand computers and networking, something most Windows and Mac users do not.

Lv. 3 - JavaScript

Make the web page feel alive!

JavaScript is the programming language for the web browser. This enables us to program interactive web pages that no longer feel like an internet-based Word document, but rather like an actual application.

Your skills in HTML, CSS, and CLI will help you to quickly implement changes on the web page that is happening because of JavaScript Magic.

Just as I did with CSS, I recommend getting a good understanding of vanilla JavaScript before moving towards JavaScript frameworks like React or Vue. These frameworks will make everything that is complicated with JavaScript development easy, but without a proper understanding of the underlying concepts, it's very hard to actually learn and understand these frameworks.

Just like any other programming language, JavaScript is hard to learn if you have no previous programming experience, but once you start learning, it becomes easier and easier. And once you master one programming language it's a lot easier to learn other languages.

The nice thing about JavaScript in web pages is that you will quickly get visual feedback on what you are programming. This keeps the learning process fun and engaging.

I would actually recommend staying away from JavaScript frameworks until you really, really have a feel for vanilla JavaScript. Take some JS courses, make some simple HTML5 games, and have fun!

Lv. 4 - Git and GitHub

Version control and collaboration

git history tree

Bilde av Yancy Min fra Unsplash

Git is an amazing tool that helps you save revisions of your source code, and store a backup of the project on a remote repository like GitHub.

Every modern programming project use Git or the old but similar alternative SVN. In my opinion, SVN sucks, and Git rocks.

Git is essential knowledge for any programmer and will help you to collaborate with others. When the time comes when you regret some experimentation you can easily roll your project back in time to before you started on some crazy solution that you realized was not such a good idea as you first thought.

Using GitHub as your remote repository for your projects can be used to show potential employees and colleagues what skill level you currently have, and what you like working on in your own time. On GitHub, you can at your own discretion choose to keep your projects private or public for anyone to see.

Lv. 5 - CMS

Making dynamic web pages with Content Management Systems

designer drawing wireframes

Photo by Kelly Sikkema on Unsplash

When you have learned a lot about front-end web development and feel confident about it, you are ready to start building back-end applications.

Back-end programming is all about generating the HTML that will be sent to the front-end web browser. There are plenty of programming languages and frameworks for those programming languages that can be used to build back-end applications that will generate HTML. The most popular ones are probably PHP, Node.js (which uses JavaScript), and Python.

I would recommend learning any, or all of these languages. But if you are hesitant to learn a new programming language, and want to stick to JavaScript you can learn node.js. That being said, I do think Python is the fastest language to code in despite the fact that I hate that white space in the code matter. Personally, I use PHP for all my professional work, simply because of the wonderful developer workflow Craft CMS and Laravel provide. Please don't believe what the internet memes say about PHP. It's a good and modern programming language for the web.

Choose one back-end programming language, and stick with it. At least for a while. It's better to get good at one and then later shift to another language than to jump from language to language.

At this stage, you should achieve a solid understanding of the HTTP protocol that is used to communicate between web browsers and web servers. In addition, you should also learn the basics of relational databases like MySQL and MariaDB. Non-relational databases like MongoDB are good for their own use, but once you have an understanding of relational databases you will better understand when to use what type of database system once you start to learn about non-relational databases.

I recommend that you do not focus on building web applications with frameworks like Django (Python), Express (node.js), or Laravel (PHP) at this stage. You should rather focus on building web pages that can display content like a blog or any other website containing articles written by a content creator in a CMS.

Pick a CMS like Craft CMS (PHP) or Django CMS (Python) and learn to use template engines to build websites that use your own custom templates. Build cool websites and focus on building websites with reusable template modules.

Do yourself a favor and stay away from the super popular CMS, WordPress. WordPress is a perfect example of a project that is popular simply because it is popular. It's not always a good idea to follow trends.

If you learn WordPress you will learn WordPress, but very few of the skills you learn are transferrable to other web frameworks and CMS'es. I have the impression that people think PHP is a bad programming language because when they got introduced to WordPress, it used PHP. Because of how bad the programming experience is in WordPress, they conclude that PHP is a horrible programming language.

Trust me, PHP is a good and modern programming language for the web, WordPress is bad CMS 😉

This might be the perfect time to start your own blog where you write about the stuff you learn, and find interesting. This will provide you with problems you want and need to solve. This will give you valuable experience. This blog is my personal sandbox where I experiment and play around and learn a lot from.

While you learn and experiment with templates, you will really learn and get a much deeper understanding of HTML, CSS, and JS because you now will be able to build proper full-stack projects that require you to know both sides of web development. Do not rush past this stage and try to really understand these fundamentals before moving to the next phase of your developer journey.

Lv. 6 - SEO

Search Engine Optimization

SEO is all about understanding or at least trying to understand what search engines like Google and Bing look for when indexing and ranking webpages and what they think users really want to find when they search for something on the web.

This is an ever-shifting algorithm that will constantly be refined to evade "hacks" that cause bad websites with poor content to rank high on the first few pages of a search result.

Currently, there are a few factors that are known to cause good rankings and good SEO. Correct HTML syntax, fast load times caused by small-sized resources, and good metadata in the HTML header.

By spending time on SEO, your HTML and backend programming skills will get a real boost. You will probably have to re-learn a lot of the basics of HTML, and you will learn compression methodologies and image optimization.

A wonderful tool to test and improve your SEO is to use the built-in developer tool in chrome called Lighthouse.

Lv. 7 - Front-end mastery

Reactive and interactive pages

Once you are confident about your CMS work you can start to build amazing front-end applications that really feel like an application. I recommend Vue.js or React. Build fancy-ass websites that feel like mobile applications.

If you did a good job during the previous phases you will learn to build and reactive web pages quickly, and you will have a lot of fun along the way. As I wrote earlier, everything that is hard and complicated with vanilla JavaScript becomes easier with JavaScript frameworks, and you will probably get a renewed love for front-end programming at this stage.

This phase is the perfect time to learn about API communication with your CMS and other websites using asynchronous JavaScript.

Lv. 8 - Plug-in builder

Back-end level up!

At this point, you should start to feel the limitations of what the CMS you use has. A nice way to get your feet wet with "proper" backed programming is to build plugins for your CMS that expand upon functionalities in the CMS.

Now you can start to communicate with third-party APIs that require authentication to retrieve and store data, and it might be a good time to start playing with custom database tables to store data from your plugin functionalities.

Most CMS's are very flexible and allow you to build plugins that in essence are applications within the CMS. This experience can ease the transition from a full-stack CMS programmer to a full-stack web application programmer.

Most CMS's are built on an underlying web framework. An example is Craft CMS, which is built on Yii2, which is a huge and very popular framework for building web applications. Building Plugins give you a good opportunity to learn the basics of a framework. Take your time end get confident with plugin building and implementation. You will learn a lot from building plugins.

Lv. 9 - Security

Hack the planet!

Screenshot for Hackers movie

Screenshot from Hackers (1995 - MGM)

Once you have learned to build cool plugins, you have also entered the danger zone. CMS plugins are often the most vulnerable attack surface black-hat hackers who want to take over your website exploit.

To be able to write plugins and web applications that are hard to exploit you do have to know how hackers find and exploit these vulnerabilities. In my opinion, the most fun and rewarding way to learn this is to learn how to hack websites.

At this stage, I would recommend that you register an account on TryHackMe and spent a lot of time there learning about tools, tactics, and techniques used by threat actors (hackers) on the web.

This will give you valuable Linux skills, and also give you hands-on experience with hacking that you can later use to harden your own plugins and web applications. Focus in the beginning on understanding the OWSAP top10 and tools like Dirbuster or FFUF and Burpsuite that are used by attackers.

Gaining this insight will provide you with a completely new level of insight and awareness that will help you make better design decisions and stop you from making the most common security mistakes.

Lv. 10 - Web applications

Back-end mastery

Some will probably argue that this stage can replace the CMS stage, but I disagree. In my mind, it's better to learn to walk, before trying to run. Building web applications is possible before learning to build webpages with CMS's, but having the experience with CMSs will provide you with a lot of excellent experiences that will prevent you from a lot of frustration when trying to learn a back-end framework like Django (Python), Laravel (PHP) or Express (node.js).

When learning to build web applications you will re-learn a lot of the things you thought you knew, and give you insights into why certain quirks of CMS's are designed the way they are. It's also a lot of fun to build projects and tools that help you solve real-world problems.

If you add WebSockets functionality to your web application you will end up with an application that in every sense feels like a desktop application that lives in the web browser.

From this point, it's all about refining your skills and adapting to the ever-changing IT landscape.