Web development Tutorial

A website can be defined as a collection of several web pages that are all related to each other and can be accessed by visiting a homepage, using a browser like Internet Explorer, Mozilla, Google Chrome or Opera. In this tutorial, we will explain the concept of website development, from the simplest to the most advanced. It will help novice users to learn all about websites and how they are designed and maintained. At the same time, this tutorial has enough material to help even system administrators to broaden their knowledge about websites.

Who is a web developer?

A web developer is at heart an interactive artist. They’re someone driven by a deep desire to create things. A web developer’s canvas is a user’s web browser.

Much like how a curious child takes pleasure in making toys by joining LEGO blocks—and then experiences a similar joy in taking things apart to see how they’re made, a web developer’s job is to use the basic building blocks of the web (like HTML, CSS and JavaScript) to create something complex like a webpage. Don’t sweat it! We’ll get into all of those terms soon.

It is also the web developer’s job to diagnose problems in a website’s functionality, to understand how something works by reading the code behind it, and to make changes to fix any issues. That essentially makes web developers the physicians of the world wide web. When we talk about the world wide web, we’re mainly referring to websites and web applications. At this point, the curious aspiring developer in you might be wondering, “What’s the difference between the two?”

Well, we’re glad you asked! A website is usually a simple page or a group of pages (the popular web comic site, xkcd, for example). However, modern websites are much more than that. Take Google Docs, for example. It has a nice interface that, once opened, looks very much like a desktop software like Microsoft Office. Such complex websites are often termed web applications. A web developer today is expected to know how to create and work with web applications. Having said that, most people use the terms interchangeably, so don’t get too hung up on the terminology!

Types of web developers

There are different types of web developers who focus on different areas. These include:

Frontend developers:

Frontend developers implement web page designs using HTML and CSS. They make sure the website looks pretty on different devices, and that the forms and buttons work.

Backend developers:

Backend developers create the backbone of the web application. They write code logic that handles a user’s input (for example, what should happen when you click the signup button after filling in a form).

Full stack developers:

Full stack developers do bits of both backend and frontend. Depending on the problem at hand, they can switch capes to move stacks. You can learn more about the differences between frontend and backend development in this guide.

There are many other specific roles in web development, like system architects, AI, machine learning and security engineers. These roles require more specialized knowledge of one or more of the above types of development, so many professionals in these roles will start by gaining some general web development experience.

Why Do We Need Websites?

Websites primarily act as a bridge between one who wants to share information and those who want to consume it. If you are running a business, then it is almost imperative for you to have a website to broadcast your offerings and reach out to potential clients at a global stage.

The following points explain why it is important to have a website −

• A website is an online brochure where you can advertise your business offers.
• It gives you a platform to reach out to a far-and-wide global customer base.
• If you are a blogger, you have the possibility to influence your readers.
• You can show all your ideas and publish them on a website.
• If you have a business idea, then you don’t have to wait. You can straightaway open an online shop and sell your products or services online. An added advantage is that the online shop will be open 24/7 for your clients, throughout the year.
• You can communicate with your customers, giving them an opportunity to express themselves.
• You can provide valuable customer support by having a trouble-ticket system.
• If you have an official website with a domain, then you can have your personalized email. For example, info@tutorialspoint.com (it is much better than florjan.llapi@yahoo.com).

What are the skills required to become a web developer?

What does it take to become a web developer? Essentially, just three things: HTML, CSS and JavaScript—the three pillars of the web, which we’ll be learning about over the next few days. Together, these three pillars make every website work, defining the content to be displayed (HTML), telling a browser how to display that content (CSS), and making the content interactive (JavaScript), respectively.

A web developer is well versed in these three technologies. They can read other people’s code and make changes to it. They can find and debug bugs (shortcomings in existing code). A web developer might, at times, work on a new project (a new website) from scratch, or may have to work on an existing website and make it better. A typical day in the life of a web developer involves fixing bugs, developing new features (that is, enhancements) and webpages, and working with other developers to discuss ways to solve problems.

Don’t be overwhelmed by all of these details. You’ll soon see that they’re all very connected, and learning one of these automatically makes you good at a few others!

What’s the job outlook like for web developers?

In short, very good. Employment of web developers is projected to grow 13 percent from 2018 to 2028, much faster than the average for all occupations. Demand will be driven by the growing popularity of mobile devices and ecommerce (Bureau of Labor Statistics). It is a great time to be a web developer as startups are flourishing, which results in above average salaries for web developers in most parts of the world.

Also given the nature of the job, finding a remote job as a web developer is easier than many other domains. As a result, it opens up the entire world’s job market to everyone irrespective of where they’re physically located.

How to Setup a Website?

A website is composed of several elements and while setting up a website, you would have to take care of each of them.

• To set up a website and make it live, you should first purchase a hosting plan.
• Select a domain name for this website.
• Point the DNS records to the server or the hosting provider.
• Develop the content that you want to publish on the website.
• Check if you need to purchase a public certificate and install it.
• Publish the webpage on the Internet.

After understanding most of the important factors of Website Development, it is now time to set up a webpage. For setting up a webpage, we should adhere to all the steps given below.

Step 1 − Firstly, we purchased a domain name at GODADDY.

Step 2 − We chose the hosting provider based on the analysis of the hosting plans that we needed.

Step 3 − We configured the DNS records and the DNS servers of the registrar that in our case was GODADDY again.

Step 4 − Now that we are done with all the above-mentioned steps, it is time to upload the files of the webpage through CPanel → File Manager.

Step 5 − After opening it, upload the files in the folder named public_html as shown in the following screenshot.

Step 6 − If you have a dynamic website, then you must configure the database too. To do it, go to MySQL Databases.

Step 7 − Click on Create New Database and then write the database name that your website will have and then click on Create Database as shown in the screenshot given below.

Step 8 − In the Add New User section type the Username and the password and then click on Create User.

Step 9 − We must add the user that we created for this database to give rights or permissions to manage it.

 

Types of Validations

There are three types of validations, which are as follows −

• Domain validation SSL Certificate.
• Organization Validated SSL Certificates.
• Extended Validation SSL Certificates.

Let us now discuss each of them in detail.

Domain validation SSL certificate

It validates the domain that is registered by a system administrator and he has the administrator rights (authorization or permission) to approve the certificate request. This validation is generally done by an email request or by DNS record.

Organization Validated SSL Certificates

It validates the domain ownership and business information like the official name, City, Country. Validation is done also by email or DNS record entering. The certificate authority also needs some genuine documents to verify your Identity. The Organization Validated SSL Certificates display the company information in the certificate details as shown in the following screenshot.

Extended Validation SSL Certificates

It validates the domain ownership, organization information and the legal existence of the organization. It also validates that the organization is aware of the SSL certificate request and approves it. The validation requires documentation to certify the company identity plus a set of additional steps and checks. The Extended Validation SSL Certificates are generally identified with a green address bar in the browser containing the company name like the one shown in screenshot below.

 

Web Page Migration

Webpage Migration is a process of moving a webpage from one host to another. This process is done for various reasons, some of which are −

• You are not satisfied anymore with the support of the Hosting Company
• Prices are cheaper to another hosting
• Your actual hosting plan doesn’t fulfill your needs anymore
• Technology offered is not competitive anymore, etc.

As migration is a process, the following steps are needed to complete it in a minimal downtime of your webpage.

• We must fully backup our webpage as discussed in the previous chapters.
• Upload the backup file in the new hosting.
• Unzip files in the Public folder.
• Import the database file.
• Configure files with the credentials of the new database.
• Point your new domain name servers with your current registrar and wait for the new records to be propagated.

Web Development Security

Securing your web pages is as important as developing it, because any threat which can compromise the security can harm your business reputation, damage you financially (by stealing your online deposits), damage your clients that visit your website, etc.

As per security experts, they will suggest doing the website security check based on the OWASP TOP 10, which is a powerful awareness document for web application security. The OWASP Top 10 represents a broad consensus about what the most critical web application security flaws are.

SQL Injections

Injection flaws, such as SQL, OS and LDAP injection occur when untrusted data is sent to an interpreter as part of a command or a query. The attacker’s hostile data can trick the interpreter into executing unintended commands or accessing data without proper authorization.

Solution − To secure your webpage from iSQL, you must validate inputs and filtering symbols.

Broken Authentication and Session Management

Application functions related to authentication and session management are often not implemented correctly, which allows attackers to compromise passwords, keys, session tokens or even to exploit other implementation flaws to assume other users’ identities.

Solution − To secure your site from this flaw, you must make cookies and sessions with expiration time.

Cross-Site Scripting (XSS)

XSS flaws occur whenever an application takes untrusted data and sends it to a web browser without proper validation or escaping. XSS allows attackers to execute scripts in the victim’s browser, which can then hijack user sessions, deface websites or redirect the user to malicious sites.

Solution − Protection from this is on the same lines as it is for iSQL.

Insecure Direct Object Reference

A direct object reference occurs when a developer exposes a reference to an internal implementation object, such as a file, directory or a database key. Without an access control check or other protection, attackers can manipulate these references to access unauthorized data.

Solution − You should implement specific protection mechanisms such as passwords to safeguard such files.

Security Misconfiguration

Good security requires having a secure configuration defined and deployed for the application, frameworks, application server, web server, database server and the platform. Secure settings should be defined, implemented and maintained, as the defaults are often insecure.

Solution − Software should be kept up to date.

Sensitive Data Exposure

Many web applications do not properly protect sensitive data, such as credit cards, tax IDs and authentication credentials. Attackers may steal or modify such weakly protected data to conduct credit card fraud, identity theft or other crimes.

Solution − Sensitive data deserves extra protection such as encryption at rest or in transit, as well as special precautions when exchanged with the browser.

Missing Function Level Access Control

Most web applications verify function level access rights before making that functionality visible in the UI. However, applications need to perform the same access control checks on the server when each function is accessed. If requests are not verified, attackers will be able to forge requests to access functionality without proper authorization.

Solution − You should check the levels of authentication.

Cross-Site Request Forgery (CSRF)

A CSRF attack forces a logged-on victim’s browser to send a forged HTTP request, including the victim’s session cookie and any other automatically included authentication information, to a vulnerable web application. This allows the attacker to force the victim’s browser to generate requests which the vulnerable application thinks are legitimate requests from the victim.

Solution − The most commonly used prevention is to attach some unpredictable challenge based tokens to each request that comes from a website and associate them with the user’s session.

Using Components with Known Vulnerabilities

Components, such as libraries, frameworks and other software modules almost always run with full privileges. If a vulnerable component is exploited, such an attack can facilitate serious data loss or server takeover. Applications using components with known vulnerabilities may undermine application defenses and enable a range of possible attacks and impacts.

Solution − Check if that component version has vulnerabilities and try to avoid or change with another version.

Invalidated Redirects and Forwards

Web applications frequently redirect and forward users to other pages and websites. These applications use untrusted data to determine the destination pages. Without proper validation, attackers can redirect victims to phishing or malware sites or use forwards to access unauthorized pages.

Solution − Always validate a URL.

Secure Used Protocols

This is the case where you have a VPS plan and you manage everything on your own. When the services are installed they use default ports. This makes the job easier to a hacker because he knows where to look at.

Some of the main service ports which are used in hosting of websites are given below −

• SSH – port 22
• FTP – port 21
• MySQL – port 3306
• DNS – port 53
• SMTP – port 25

The port changing of those services varies depending on the Operating System and its different versions. In addition to this, you have to install a firewall. If it is a Linux OS, we will recommend IPtables and block all the other unneeded ports. In case your OS is Windows, you can use its incorporated firewall.

To block brute force logins in your services, you can use Fail2ban, which is a Linux based software and block all the IP addresses which makes many failed login attempts.

Websites are a bunch of files stored on computers called servers. The Servers are computers that are used to host websites and store the website files. These servers are connected to the giant network called the World Wide Web.

Browsers are programs that you run on your computer. They load the website files via your internet connection. Now, there are 3 main components that make up every website:

Full Stack Web Developer Masters Program

• HTML – HyperText Markup Language(HTML) is the foundation of all websites. It’s the main file type that is loaded in your browser when you look at a website. This scripting language is used to structure the different parts of our content and define what their meaning or purpose is.
• CSS – Cascading Style Sheets(CSS) is used for styling the HTML elements. It provides 1000s of styling functions which are used to style the HTML elements defined by us. It is the language that we use to style and layout our web content.
• JavaScript – This programming language allows you to interact with elements on the website and to manipulate them. While CSS adds style to HTML, JavaScript adds interactivity and makes a website more dynamic.

Front End Skills

It is important to make sure that web applications download fast and are responsive to user interaction, regardless of a users bandwidth, screen size, network, or device capabilities.

The intermediate Front End Skills include:

• Responsive Design – We use different gadgets like computers, phones, and tablets to look at web pages. The web pages adjust themselves to the device you’re using without any extra effort from your end. This is due to the responsive design. One major role of a front end developer is to understand the responsive design principles and how to implement them on the coding side. It is an intrinsic part of CSS frameworks like the Bootstrap. These skills are all interconnected and so as you learn one you’ll often be making progress in the others at the same time.
• Build Tools – The modern web browsers come equipped with developer tools for testing and debugging. These tools allow you to test the web pages in the browser itself and finds out how the page is interpreting the code. Browser developer tools usually consist of an inspector and a JavaScript console. The inspector allows you to see what the runtime HTML on your page looks like, what CSS is associated with each element on the page. The JS console allows you to view any errors that occur as the browser tries to execute your JS code.
• Version Control/Git – Version control is the process of tracking and controlling changes to your source code so that you don’t have to start from the beginning if anything goes wrong. It is a tool that is used to track the changes made previously so that you can go back to a previous version of your work and find out what went wrong without tearing the whole thing down.

Front End Frameworks

CSS and JavaScript frameworks are collections of CSS or JS files that perform different tasks by providing common functionality. Instead of starting with an empty text document, you start with a code file that has lots of JavaScript present already in it.

Frameworks have their strengths and weaknesses which makes it important to choose the best framework for the type of website you’re building. For example, some JS frameworks are great for building complex user interfaces, while others excel at displaying all of your site’s content.

Some of the popular frameworks are:

• jQuery
• Angular
• React
• Vue

This was about the front end skills that are required to build a website. Now, let’s move on with this web development tutorial and know about the different back end skills. 

Back End Skills

The back-end layer forms a dynamic connection between the front-end and the database. To get this layer working it’s important to know at least one of the programming languages such as Python, Java, PHP, Ruby, etc and knowledge of server-side frameworks such as NodeJS is mandatory.

• Python is an open-source, object-oriented programming language that was released in 1991 and ever since it has become one of the favorite languages of most software and web developers.
• Java is an open-source, high-level programming language which was released by Sun Microsystems in 1996. It follows the Write Once Run Anywhere (WORA) approach that makes it compatible to run on any platform.
• PHP is an open-source, server-side scripting language used to develop the back-end logic of an application. It is a powerful tool for making dynamic and interactive websites.
• NodeJS is an open-source, JavaScript framework used specifically for creating the back end or the server-side of an application. Through NodeJS, JavaScript can now finally run on the server-side of the web.

Data and Database

The data layer is a massive warehouse of information. It contains a database repository which captures and stores information from the front-end, through the back-end. A prerequisite is to have knowledge of how data is stored, edited, retrieved, etc. An understanding of Databases such as MySQL, MongoDB is a must.

• MySQL is an open-source, Relational Database Management System that provides multi-user access and supports multi storage engines.
• MongoDB is known for its ease of use and its quickness in handling a large amount of data. It is an open-source, object-oriented, NoSQL database which is highly scalable and is efficient in handling unstructured data.

Server and Deployment Skills

Servers are basically computers that store website files and other resources like databases.

Server Setup

To make a website accessible publicly on the internet, it needs to be installed on a server. Once you have your domain name and server space, it’s time to set up the site on the server. The first thing is to direct the domain name to the server’s unique IP address. Then you need to set up website files and finally the database and other configurations.

Deployment Tools

To get files from your own computer up to your server, you need a protocol. This is basically a method of transporting files or other data to and from a server.

The deployment tool stores your FTP/SFTP settings, and when a change is pushed in Git to the master branch, the tool will transfer the files for you. So, there is no need to remember which files you changed, reducing the number of mistakes you make.

So these are some of the important guidelines and skills that you need for web development. With this, we have come to the end of our web development tutorial. I hope you understood the different aspects of website development and the different skills you need to learn.