How to get started?

Modern web application development is a huge field. There are hundreds of technologies in use to build a high quality application. This post is a roadmap to get your grooves going to become a productive web developer.

Frontend and Backend

Any web application has two parts. One part is the piece of code that is running inside the browser of your user. Another part is the piece of code that is running inside your own servers.
The browser side code is called the frontend. The server side code is called the backend.

Core front end technologies:

  • HTML
  • CSS
  • JavaScript

Core backend technologies

  • A web server (Apache HTTP Server, Nginx Server are most popular)
  • A backend application server
    • Typically written in one of the major programming languages like PHP, Python, Ruby, Java, Go, Rust, JavaScript, etc.
    • Every major programming language has framework libraries to make backend development easy.
    • PHP (Laravel, Cake PHP)
    • Python (Django, Flask etc.)
    • Ruby (Rails)
    • Java (Spring Boot)
    • JavaScript (NODE-JS, EXPRESS-JS, KOA)
  • Database server (PostgreSQL, MySQL, etc.)
  • Application Cache (Redis)
  • CDN (Content Distribution Network)

Static Websites

Static websites are the simplest to build. They don’t involve any backend application framework as they consist of static web pages with non-changing content. No user interaction is supported. They are built using HTML and CSS only. A little JavaScript may be used for some styling and animation purposes (and simple effects like showing and hiding pieces of content).

From the backend side, you only need a web server which can host and serve the HTML pages whenever the user requests.

Domains

Your users access your website on some Internet domain or subdomain (e.g. google.com). Domains are available with domain name registrars and are purchased on annual charges. A website may be hosted at the main domain (like facebook.com) or a subdomain (like music.amazon.com). You may need to maintain multiple separate websites for your company mapped to different subdomains of the same domain. Something called a DNS (domain name system) management console provided by your domain registrar would be used for mapping the right website to the right subdomain.

No Code Website Builders

Web technologies have been around for 25 years now. With that, the ease of building simple, yet elegant websites has become easier day by day. You don’t really need trained web developers for basic websites like a company web presence, a marketing site, a campaign, a personal homepage, blogs, portfolio websites for artists and designers, an event site (with invitation management etc.) simple online shops for e-commerce. It is important to know about off the shelf solutions which can save your time and development cost. Some popular ones include (as of this writing):

The website builders come with built-in support for features like drag and drop design, designer templates, search engine optimization, security, domain purchase and management, privacy rules, automatic backups, global CDN, consistent display of site content on a variety of devices (desktop, mobile, tablet etc.), plugins for third party services (authentication, payment, analytics, etc.).

Explore these services, see if they serve your needs. Code your website only if you really believe that you need custom work.

Getting Started with Front-end Development

One of the best resources to learn front end web development is MDN Web Docs. MDN stands for Mozilla Developer Network. Mozilla is the group which developed the original web browser (Netscape Navigator) back in the 90s. They are the pioneers in web technologies and developers of the venerated Firefox browser. You can start with their Learn web development series to learn the fundamentals of HTML, CSS and JavaScript. You will learn about how to structure your web content, how to style it using CSS so that it looks good and how to add interactivity using JavaScript. It also includes sections on server side programming using Python or NODE-JS (JavaScript).

Which Backend Language?

If you need to do some custom backend development, a big question that arises is which language to use. The major frameworks in all the languages are sufficiently rich and powerful in terms of functionality. Thus, choosing between them is a matter of taste and convenience. If you are already familiar with any of the major backend languages (Python, Java, Ruby, etc.), you can pick a framework in that language.

The problem is easier if you are joining an existing development team. The choices would have been made already for you. If you are a total newbie, my suggestion is to pick between Python and JavaScript (NODE-JS).

What is NODE-JS?

JavaScript was originally a language designed to run inside browsers. Google developed the v8 engine which made JavaScript run much faster inside the browser. Some smart people figured out that it was possible to run the v8 engine on the backend servers too. They added some extra functionality like file system access, etc. and made it easy to run JavaScript on backend servers. This solution became known as NODE-JS. One of the advantages of using NODE-JS is that you can use the same programming language (JavaScript) for both front end and backend development. So, if you want to keep your life simple, NODE-JS is a good choice.

Checkout Node School for great tutorials about NODE-JS.

Why Python?

One main reason is that it is very simple to learn, and you can achieve the same functionality with much less code compared to something like Java. If your applications are focused towards scientific computing / machine learning / deep learning, then Python is a good choice as most of the technology in this area is available in Python.

One of the best places to learn about Python is Python 101. Once you have got a hang of the language, you can move on to Django tutorials to learn about backend development. Django is a more comprehensive framework in Python, but Flask is easier and lightweight.

Further Reading

Here are some resources to find more information: