Web Development

Table Of Contents

Please Read First

An Introduction

Web Development is one of the most popular career paths in the Pakistan Industry. While Web Dev can mean a lot, at the surface level, it is about making websites and web applications.

The Web has grown quite a lot since its quick expansion over the past ten or so years, and we are seeing a stage of rapid development and refining of the tools that we already have to make the process more robust, easier to use, understand, and far more flexible than before.

Web Development includes many sub categories of work, it includes databases, an understanding of client-server relationship, client side scripting, server side scripting, creating beautiful frontend design, working with backend systems to handle data, responsiveness, and carrying the proper data between components. It can include network configuration, commerical, entertainment, public or personal web development.

Web Development is usually broken up into Frontend and Backend design. What frontend refers to is usually the looks and style of the website / web application itself. Backend refers to how the different components interact with each other, how the data is handled behind the scenes, and what services are used that should not really be exposed to the user.

People working in this domain are referred to as:

  1. Frontend Developers

Those who primarity work on client side technologies like HTML, CSS, JS (and JS based Frameworks)

  1. Backend Developers

Those whose task is to create APIs, manage Database, and Server side application like those involved web application server

  1. Full Stack Developers

Developers who can develop both client and server side applications

Technologies

The main or most popular components of client-side web development are:

  1. HTML, the skeleton of the web pages
  2. CSS, the looks of the web pages
  3. Javascript, the interactivity between and in the web pages

Other backend technologies (languages and frameworks) are:

Languages:

  1. JavaScript
    • React, Vue, Ember, Backbone, Angular, etc.
  2. PHP
    • Laravel, CodeIgniter, Symfony, CakePHP, Yii, Zend, Drupal, etc.
  3. Python
    • Flask, Django, etc.
  4. C#
    • ASP.NET framework
  5. Java
    • Spring, Struts, GWT, etc.
  6. Other languages like Perl, Ruby, Go, etc.

Most developers these days use different frameworks depending on their use case, and thus have different stacks that they use, which just means they use different conjunction of frameworks or technologies to meet their needs.

Some popular stacks are,

  1. MEAN ( MongoDB Express Angular NodeJS )
  2. MERN ( MongoDB Express React NodeJS )
  3. MEVN ( MongoDB Express Vue NodeJS )
  4. LAMP ( Linux Apache MySQL PHP )
  5. LEMP ( Linux Nginx MySQL PHP )
  6. Django ( Python Django MySQL )
  7. Ruby On Rails ( Ruby SQLite Rails )
  8. JAMSTACK (Javascript and Microserivces)

Where,

  1. NodeJS is a runtime for JavaScript
  2. ExpressJS is a web application framework on top of NodeJS
  3. MongoDB is a NoSQL database

NoSQL databases do not follow all the rules of a relational database —specifically, it does use a traditional row/column/table database design and does not use structured query language (SQL) to query data.

  1. Angular is a JS framework
  2. React is a JS library
  3. Vue is a JS framework
  4. Linux is an Operating System
  5. Apache is an Open Source Software based server
  6. PHP is another language like JS
  7. Nginx ( say Engine X ) is another way to maintain a server
  8. Python is a language
  9. Django is a “batteries-packed” web framework.
  10. MySQL is a Relational database
  11. Ruby is a very mature dynamic language, much like Python and JS
  12. Ruby on Rails ( or just Rails ) is a framework also very popular for web dev

General

Getting Started

There aren’t many pre requisites for starting web dev. A general beginner’s approach is to understand what frontend development firstly is, and then move towards a backend stage. There are A LOT of technologies out there, and it is not advised that you sit down to learn everything - commmon myth that learning more and more will make you more experienced. Usually, HTML is recommended, then CSS, then JS, and then either VueJS, AngularJS, or ReactJS for some front end fun parts. For starters, some good hands on knowledge with NodeJS and ExpressJS is recommend as well - just the basics of how to get started.

After that, try out deploying one of your creations somewhere on a web hosting website, such as Heroku, MS Azure, GCP, or AWS! If you’re a student, please do check out the Github Education Pack which has free credits for many popular services for university students just trying to put their work out there.

People To Follow

A few well know experts related to web dev. You can follow them on twitter

  1. Addy Osmani
  2. Kent C. Dodds
  3. Dan Abramov
  4. Brad Traversy
  5. Wes Bos

FAQ

Learning Materials

If you reading documentation, each technology has a corresponding documentation that you can google for. Other than that, do check out,

  1. For all your JS needs, JavaScript Info!
  2. For newbies wanting a more comprehensive and detailed guide, MDN Web Docs! <3

For further references or a bigger picture, or future reading,

  1. Web Dev 2020 Roadmap - Traversy Media
  2. Web Skills - A visual overview of useful skills to learn as a web developer

Courses

Books To Look Into

Youtube Channels

  1. Coding Tech
  2. Colt Steel
  3. Traversy Media
  4. FreeCodeCamp!
  5. Web Dev Simplified
  6. Learn Code Academy
  7. Fireship
  8. The Net Ninja
  9. Level Up Tuts
  10. Dev Ed

Podcasts

  • Front End Happy Hour A podcast featuring a panel of Software Engineers from Netflix, Twitch, & Atlassian talking over drinks about all things Front End development.

MISC

References