Step-by-step Guide to becoming a self-taught web developer.

In this article, we are going to look at the road map to becoming a self-taught web developer. We are going to cover the programming Languages, frameworks, and other necessary technologies.

I will also give you my recommendation for each of the technologies that will be covered, however, the choice will be entirely yours. By the end of the article, you will have all the knowledge that you need to become a self-taught developer.

In the interest of time and for the sake of Diana, let’s dive right in.

Web development is the process of building websites and applications for the internet, or for a private network known as an intranet.

As a web developer, you can build a simple static page, an electronic business service, an e-commerce platform, a video streaming site, or a social network site, and more.

FRONTEND, BACKEND OR FULL STACK

To get started, you must first figure out what kind of developer you want to be. Generally, this can be categorized as Frontend, Backend, or Full Stack.

1. FrontEnd Developer focuses on the front-facing website or the app user interface. Frontend developers are concerned with the appearance of the Website/app. A frontend developer works with HTML, CSS, JAVASCRIPT, TYPESCRIPT, the DOM, HTTP, etc.
2. Backend Developers focus on the server-side structure (behind the scenes structures) of the website or app. They work with databases, APIs, etc. using Languages such as Php, Python, Ruby, C#, JS, and many others. You must know how to configure servers and so on.
3. Full Stack Developer: A combination of both FrontEnd and Backend Development. As a full-stack developer, you are concerned with both the client-side and server-side architecture of the website / Application.

Depending on what you intend to do, you may concentrate on Fronted or Backend development.

Once you become a developer, you can take any of the following paths.

• Become a Freelancer (Doing client work)
• Be a Professional Developer and work for companies
• Create content to help other Developers
• Build your own software as a service (SaaS)
• Build your own apps
• Take it as a hobby

OK! Let’s start the journey, shall we?

Let’s start with the most basic, the tools that you will need.

• You will need a computer and an operating system installed (Lol), if you don’t have, grab one at  Amazon.

• Next, you will need a Text Editor where you will write your code, these include VS Code, Sublime Text, Atom, VIM, etc. VS code is the most popular and the one I recommend.
• The obvious one, you need a Web Browser. Chrome is powerful and used by many developers, others include Firefox, Safari, Brave, Edge, Opera, etc.
• A design software is optional but very helpful for quick mockups and user interface elements especially if you are interested in Frontend Development. Adobe XD is popular and the one I recommend, others include Figma (which I use a lot as well), Sketch, Photoshop, Illustrator, etc.

The Starting Point

• All web developers must know the fundamentals of HTML and CSS.
• You must understand the HTML page structure and HTML tags (headers, divs, ul, li, img, etc)
• Understand Styling with CSS (fonts, padding, margin, colors, etc)
• Understand Positions and Alignment (CSS Grid & Flexbox)
• Understand Responsive Design (For websites to look good on all screen sizes)
• Understand Animations & Transitions (Especially Frontend Developers)

At this stage, you can make a static website, thus the journey has started, and you are becoming a developer.

CSS / UI FRAMEWORKS

Next comes Frameworks, which will help you to make websites quickly. You will do a lot of work with less code using frameworks. The common CSS / UI frameworks include Bootstrap, Tailwind CSS, Materialize CSS, Bulma, etc. Bootstrap is the most popular and is a good place to start.

I personally use Materialize CSS most of the time. Tailwind is gaining traction as well and can be a great choice. Most of these frameworks are easy to use and you won’t have problems learning any of them.

INTRODUCTION TO PROGRAMMING

Now that you have learned the basic structures of websites, it’s time to pick up a programming language. Javascript which is the programming language of the browser is the best place to start your programming journey. It is easy to pick up and understand.

Make sure to understand the fundamentals such as:

• Variables, loops, arrays, functions, objects, etc
• DOM manipulation
• JSON (JavaScript Notation Objects)
• HTTP Requests

You can also learn advanced concepts such as Array Methods (map, foreach, filter, reduce) and other JS built-in functions.

At this point, you would have learned HTML, CSS (& UI frameworks), and JAVASCRIPT. If you have learned these, congratulations (from Diana) you are now a frontend developer and you should be able to write and deploy simple to advanced interactive websites.

FRONTEND DEPLOYMENT

You should be able to take your website online so that others can access it. Thus, you have to learn the basics of deployment and domain registration which is very easy to do.

You can deploy your static website and register your domain with Web hosting companies like  Namecheap, Inmotion, Bluehost, Hostgator, Hostinger. I personally recommend Inmotion

WHAT NEXT,

Now that you understand the Client-side, you can either move on to learn server-side (backend development) or continue to polish your frontend skills using Javascript frameworks. I will cover JS frameworks briefly and then move to backend development.

JAVASCRIPT FRAMEWORKS

Frameworks will help you to build your websites faster and efficiently, frameworks are also helpful when you are working with teams as the written framework code is mostly easy to read and organize.

The most popular JS frameworks are React, Vue, Angular, Svelte, and many others. React developed by Facebook is the most popular JS library with a huge community of developers and is relatively easy to learn.

Vue is probably the easiest to learn and widely used. it would also be a great investment.

Angular developed by google is a full-fledged framework that uses Typescript (a superset of Javascript). It has a steep learning curve and is used a lot in the enterprise world.

Svelte is gaining popularity and wide adoption from many developers. It will undoubtedly be worth the investment.

I recommend learning React, however, you can choose any that you may find interesting. Let us move on to Backend Development.

BACKEND DEVELOPMENT

Backend developers work on the server-side structure of a website/app.  They are concerned with databases, server configuration, HTTP requests, and responses.

If you want to be a Backend or Full Stack Developer, you will need to learn a server-side programming language.

The most common server-side programming languages include Python, C#, Javascript (Node.js), PHP, Java, Kotlin, Ruby, Go, etc. If you are already familiar with Javascript, Node.js is the best place to start.

Node.js allows you to write javascript on the server, this helps with a smooth transition from Frontend to backend since only one language is used.

Php is widely used and has a huge community of developers who are always ready to help, more websites run on PHP than the rest of the server-side programming languages put together.

Ruby is also powerful and easy to pick up, like python, it has an easy to understand syntax similar to English. it has powered a lot of startups because of its effectiveness, and ease of use.

Pick one Language and learn as much as you can and it will be easy to move to other Languages. I recommend Node.js and python.

BACKEND FRAMEWORKS

When you have learned a good amount of the language, you can move to backend frameworks, which helps you to speed up your development process.

Frameworks are so helpful for rapid development. Code written with a framework is mostly easy to read, well structured, and uses minimal syntax. Here are the most common frameworks:

NODE.JS

Recommended: Express.js

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. Part of LinkedIn, Paypal, Netflix, and many others are built with Node.js

Other frameworks for Node include Loopback. Koa, Nest.

PYTHON

Recommended: Django

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Part of the backend of Instagram is built with Django.

Other python frameworks are Flask, Web2py, CherryPy

PHP

Recommended: Laravel

Laravel is a PHP web application framework with expressive, elegant syntax. It follows the model–view–controller (MVC) architectural pattern. Part of Laracast, Barchart, Alison is built with Laravel

Other PHP frameworks include Symphony, CakePHP, CodeIgnitor, Slim,

RUBY

Recommended: Ruby on Rails

Ruby on Rails is designed to make programming web applications easier by making assumptions about what every developer needs to get started. It allows you to write less code while accomplishing more. Part of Airbnb, Hulu, Basecamp, Shopify was built with Ruby on Rails.

Sinatra is another Ruby framework worth the consideration.

Other Backend frameworks to consider are Phoenix (Elixir), Play Framework (Java and Scala), Deno (Javascript), Javalin (Kotlin), ASP.NET(C#), Spring MVC (Java), etc.

DATABASES

Part of being a Backend / Full Stack Developer is working with Databases. A database can be categorized as Relational Database or NoSQL Database. Most used Relational Databases are MySQL, PostgresSQL, MS SQL Server, etc. I recommend learning MySQL for a start and you can easily learn the rest.

Common NoSQL databases include MongoDB, Firebase, Cassandra, etc. MongoDB is really popular out there and used in the Javascript Stack i.e.  MERN (MongoDB, Express.js, React, Node) stack MEAN (MongoDB, Express.js, Angular, Node) stack. MongoDB would be a great place to start for NoSQL databases.

PROGRESS

At this point, we can loosely say you are a full-stack developer. It’s time to deploy your website/app to production. You need to be familiar with any one of the following hosting platforms: AWS, Linode, Azure, Heroku, etc.

You also need to be familiar with web servers (NGINX, Apache). Or you can host directly and easily with a Hosting company like Bluehost, Inmotion, Hostgator, Hostinger, Namecheap, etc.

USING WEBSITE BUILDERS

GOING TO MOBILE APPLICATIONS

Now that you are a web developer, you can use your web development skills to make mobile applications. Good news right?

Web technologies can be used to make Native and Hybrid mobile applications. Here are the most common technologies used to achieve this

REACT NATIVE

React Native lets you create truly native apps and doesn’t compromise your users’ experiences. React Native uses React and JSX (a syntax extension to JavaScript). Some of the apps made with React Native include Instagram, Facebook, Pinterest, Shopify, Skype, Tesla, Bloomberg, Flipkart, etc.

FLUTTER

Flutter SDK is Google’s UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter uses the Dart programming language; it is easy to pick up if you are familiar with Javascript. Some apps developed with Flutter include Google Assistant, Tencent, Square, My BMW, Nubank, etc.

IONIC

Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. Ionic uses Angular or React HTML, CSS, JS. Apps made with Ionic Framework include Sanvello, NHS, EA, Amtrak, etc. Making apps with Ionic is easy and fast, Here is an example of the App I made with Ionic in a day  Biology Revision

PHONEGAP / CORDOVA

Phonegap/Cordova uses HTML, CSS, and JS to make Hybrid Apps that can run on Android and IOS. Apps made with Cordova include Sworkit, FanReact, Untapped, Tripcase, Hockey Community, etc.

XAMARIN

Xamarin  (.NET) is a developer platform made up of tools, programming languages, and libraries for building many different types of applications. It uses C# programming Language. Some apps made with Xamarin are PictureX, Ups, Olo, Storyo, Evolve, JustGiving. Etc.

KOTLIN

Kotlin which you can use for web development is also used in Android Studio to make native Android apps. Actually, Google recommends using Kotlin for developing Android apps over Java.

I recommend that you learn React Native, it has a huge community of developers and it is easy to pick up.

DESKTOP APPLICATION

Apart from making mobile apps using Web Technologies, you can also make Desktop Applications. Electron.js is the most popular framework for making Desktop Applications.

Applications made with Electron include VS Code, Whatsapp, Codex, Git-it, QuickRedis, Twitch, Slack, Figma, Atom, Sleek, Mingo, Afterlife, Nota, Twittertron, Skype, Discord, etc.

Other frameworks for making Desktop applications include Tauri, NW.js, Tkinter.

CONCLUSION

Other technologies worth your consideration include Version control (Git) socket.io, GraphQL, Web Assembly, Algorithms & Data Structures, Machine Learning, Server Side Rendering (SSR), Static Site generators, Testing, Software Design Patterns, Cyber security. You can look into any of these once you gain some experience in programming.

Congratulations on your Web Development journey. Build your portfolio, participate in open source projects, freelance, apply for jobs and build your own software.