Web Development Tutorial (2019)

This article is about “Web Development” for anybody who has zero knowledge about coding and wants to pursue their career in Web Development in 2019. This web development tutorial will help who already know about web development kind of things and are working as front-end developers. Before you start becoming a Web developer you should know about certain technologies involved in this process. Let me explain the things you should know to become a Web Developer.

web-development-tutorial

The things you should know to become a Web Developer

HTML and CSS

Frequently people ask me which web programming language should they start with and I say just start with HTML and CSS. However, knowing HTML and CSS does not make you a web developer but to be a perfect web developer you should first focus on increasing your HTML, CSS skills and then learn some basic JavaScript. What I believe is they are the backbones or let’s say the base of every web developer. I also did the same thing. HTML and CSS are the building blocks of any website or web applications you gonna develop in future. Even if you look at the most advanced web apps or scripts running on server powered by PHP or Node.js or any complex database produces the HTML and CSS no matter what is their backend programming. HTML markups with the CSS styling provide your frontend website a beautiful look.

This is another reason to learn HTML and CSS with some client-side JavaScript. You can’t just skip HTML and CSS but for the server side part, you have a choice PHP, Ruby on Rails or Java. So focus on HTML5, see how HTML4 works and learn about XHTML too. They are simple and easy to learn as they are not any logical languages; simply semantic tags. But you should be able to know how it’s markup and styles are working.

BASIC TOOLS

  1. Text Editors like Windows Notepad, Notepad++, Sublime Text, Atom.io or other IDE ( I use Notepad++ and Dreamweaver depending upon the situation)
  2. Image Editors like Photoshop, Illustrator, GIMP or others. (I prefer Photoshop and some light web tools also).
  3. FTP/SSH like FileZilla, Putty etc. (I’m using FileZilla with Putty Extension).
  4. Bowsers like Google Chrome, Mozilla Firefox and Apple Safari (I don’t even think about other browsers at all). For mobile use any browser.
  5. Cloud Storage like Dropbox or Google Drive or anything. (I use my own cloud.) This is not mandatory for all but knowing anything is a good thing.

BASIC JAVASCRIPT

After you finished learning HTML and CSS, move towards some basic JavaScripts. Learn about Data Types like String, Arrays, Objects, Numbers, etc. Also, learn about Functions, Operators, Conditions, Loops, etc. These things will help you to learn more high-level languages easily. Anybody who knows these things can easily learn Java, C or C#. You need to learn about basic programming principalities like Event Handling. Event handling means how a website interacts and what it performs when you click on certain link or button a web page. JavaScript Object Notation, popularly known as JSON is used while dealing with API and it’s one of the easiest things to learn in a few hours. And if you already are familiar with JS, you may start learning jQuery. In another word, start jQuery after you are familiar with functions, conditions, loops, etc.


BUILDING OR SETTING YOUR FIRST WEBSITE

I assume now you have learned HTML, CSS, basic JavaScript, There are a few things needed before you start your first website.

  1. Web Hosting – There are lots of web hosting provider out there. I recommend you to take any shared web host as they are cheap and it’s perfect for a starter or learning.
  2. Cpanel  – Learn about Control panel basics like setting up Email accounts and File Transfer Protocol (FTP), SSH, etc.
  3. Upload – Learn how to upload your website contents via FTP and also try to learn using SSH. I recommend using FileZilla.
  4. Domain name – Register a new domain name and then forward Nameservers (NS) of the host you bought in #1. Then the web page is accessed via the web browser when you type your domain name in the address bar.

This is a lot easier than learning any web programming language.

web-development

A person in web development checking for responsive design in his mobile device.

WEBSITE DESIGNING

You just completed deploying your first website and now it’s time to turn to give a good look to your website uploaded in #4 above. Practice more and more to make beautiful and professional looking websites. You don’t need to use lots of add-ons but simple and clean professional website is good enough for making some decent money. Make some User Interface for small companies, turn their image into beautiful websites. Remember, you had learned HTML and CSS Now, it’s time to show your skill here converting PSD to HTML and CSS contents. Try doing freelancing to earn some decent money. Well, it will be enough paying for your shared web hosting bills.

WEB DEVELOPMENT

Now let’s move to the actual topic we are gonna talk here. After you learned things mentioned above, move towards front-end HTML and CSS frameworks like Bootstrap and Foundation; Server-Slide languages like PHP and Ruby; JavaScript frameworks like React and Angular; Databases like MySQL, PostgreSQL, and NoSQL.


HTML/CSS FRAMEWORKS

  1. Twitter Bootstrap – I use this very often as it has predefined CSS components like buttons, list, forms/inputs; helper class, grid system, responsive layout, and JavaScript widgets.
  2. Zurb Foundation – I also use this one.
  3. Skeleton
  4. MUI
  5. Pure

SERVER-SLIDER PROGRAMMING LANGUAGE

  1. PHP – most of the biggest websites are using PHP with a MySQL database.
  2. Node.js – it’s a framework
  3. Ruby on Rails  – it’s a framework too.
  4. Python – not popular for web but easy to learn.

DATABASES

  1. MySQL (Relation database)
  2. PostgreSQL (Relation database)
  3. MongoDB (Non-relation database aka NoSQL)
  4. CouchDB (NoSQL)
  5. ColumnDB (NoSQL)

If you learning PHP choose MySQL and for Node.js go for MongoDB.

MORE THINGS TO LEARN

  1. GIT Version Control and Github
  2. SSH and Basic Command Line
  3. CSS Precompilers like Sass or Less
  4. APIs and REST servers
  5. HTTPS and SSL

SETTING A WEB APP

You need the following technologies before you start deploying a web application.

  1. Virtual Private Server (VPS) or Dedicated Server
  2. App Hosting servers like Heroku, Digital Ocean and Amazon Web Services (AWS)
  3. Server Deploy Tools
  4. Linux Command Line (as most of the servers run on Linux OS)
  5. Maintenance and Updates

If you learned all this these from the beginning to up to here then you are called as a Web Developer. This means now you can create simple to advanced web applications, build backend APIs/REST, work with servers, manage admin databases. Now you can start freelancing or start your own business.


PROGRAMMING FRAMEWORKS

Programming frameworks help to speed up our programming job. Some of the programming frameworks are:

  1. JavaScript Frameworks – React [Flux and Redux], Angular 2, Vue.js, Express (backend)
  2. PHP Frameworks – Laravel, Codeigniter, Symfony
  3. Ruby on Rails

Most of these frameworks have a certain design pattern called MVC which stands for MODEL-VIEW-CONTROLLER. MODEL is the part of an application that works with databases, VIEW works with User Interface (UI) and CONTROLLER handles the routing and database mapping, helpers, data binding, templating and UI.

CONTENT MANAGEMENT SYSTEM (CMS)

PHP content management systems or CMS is one of the most popular tools used in the web world. Some of the best CMS examples which can be used without knowing the programming languages to some extent are:

  1. WordPress
  2. Joomla
  3. Drupal

It is quite easier nowadays as there are thousands of Plugins and add-ons for these CMS. It saves your times and helps in faster development. Most of the plugins come from free to paid versions. The most popular CMS is WordPress which I also personally recommend you.

MOBILE APP DEVELOPMENT

There is a rise in mobile devices uses each year and you should go with the flow. And the best part is you don’t need to learn JAVA or Objective C for it because of the technologies like React Native, Ionic, Cordova, etc. They are just JavaScripts frameworks which allow you to build mobile apps. He’s just a short guide for becoming an Android Developer.


PROMOTE BUSINESS/MAKE MONEY/MAKE IT A CAREER

Technology is dynamic each year, new innovations happens. So you should update yourself and sharpen your skills. There are more competitors in the markets so keep your eye on other high-level languages like Java and C#. At least have some idea about the latest technologies that exist around the internet.

If you have any queries, ask me using the comment box below, I will try my best to help you learn about web development easier.

Rabins Sharma Lamichhane

Rabins Sharma Lamichhane is senior ICT professional who talks about #it, #cloud, #servers, #software, and #innovation. Rabins is also the first initiator of Digital Nepal. Facebook: rabinsxp Instagram: rabinsxp

You may also like...

20 Responses

  1. hemant says:

    great bro ramro xa

  2. Prabin KC says:

    sahi ho k bro ..babbal …Nepal ma internet failaunu parcha k

  3. Hemant says:

    Daju i got confused after connectig ssl mailay websmaster ma https bata site add garnu parxa ki nai dai

  4. Great Article bro..
    Really Helpful 🙂

  5. Meropaper says:

    Very help ful for beginer and pro also bro

  6. nice and great article you can visit my blog too
    (log in to view the link)
    and suggest me what to do thanks

  7. wiz says:

    Thanks for sharing this info

Leave a Reply

Your email address will not be published. Required fields are marked *