Re-Learning the Fundamentals of Web Development in 2021

Post By

Tasfia Quader

Category

Web Development

Date

03 May 2021

We use the web every day for shopping, social media, watching videos, playing games, and many other necessities. Everything that we do now is mostly on the web and our daily usage reports on our phone are trying to tell us that we spend almost 18 hours a day online (my daily usage hour).

Well, what can I do? Even the book I read is downloaded from the web.

So, what is the web? Is it the strings that spiders make on the corner of our ceilings that I am referring to? No, we all know that answer, it is the digital web that grabs all our attention nowadays.

The web consists of our favourite websites such as Netflix and Spotify. These are made up of many advanced and classic technologies that include HTML, CSS, PHP, URL, DNS etc.

Like the human body, the web also contains an external and internal section. What we see on displays is the Front-End part of it and what is happening inside and out of our vision is the back-end part of the web.

With the growth of the usefulness of websites, the interest in learning web development and careers in this field is also on the rise.

Overview of Web Development in Bangladesh

Since 2010, Bangladesh's ICT sector has expanded at a rate of 40% per year (Source: UNCTAD). The emergence of a large number of young entrepreneurs and their passion and the government's strong focus on ‘Digital Bangladesh' are the key driving forces in Bangladesh's ICT industry.

In order to participate in the evolution of Digital Bangladesh, many companies started creating their online presence to reach out to more audience as Bangladeshis are getting more and more dependent on technology.

Therefore, there has been a rise in the number of web development companies in the country to meet the requirements of the growing popularity of startups and businesses wanting to go online.

Enthusiasts are learning web development and working as a freelancer, getting employed in web development companies or even starting their very own company providing web development services.

In regards to that, this blog aims to educate whoever is interested in learning the fundamentals of web development and for those who already have an idea. This is to refresh their knowledge with some modern terminologies and technologies that are now popular in the web development sector.

What is the web and where does it stand in Web Development?

Source: Pexel

The web is the foundation of Web Development.

The World Wide Web, web, in short, is the method of transmitting data over the Internet that makes use of the HTTP protocol and HTML.

First things first: URL and HTTP/HTTPS

Source: MDN Web Docs

We can consider a URL to be similar to a regular postal mail address:

Scheme represents the postal service you want to use

Domain name is the city or town

Port is similar to the zip code

Path represents the building where the mail should be delivered;

Parameters represent additional information such as the apartment number in the building

Anchor represents the act

The scheme is the first part of the URL and identifies the protocol used. Protocols are set methods used to transfer data within a computer network.

In most cases, HTTP or HTTPS is used in which the latter is the secured version. HTTPS is typically used for e-commerce and other sites with secure transactions.

How the web functions:

The web can be described as a set of interactions between two kinds of systems: clients and servers

Clients are the instruments that make web content requests and extract them. Browsers, smartphone apps and screen readers are all common examples of clients.

In reality, one of the most difficult aspects of web design and development is keeping up with all of the new clients (the number of which is growing exponentially) and how they navigate and render the content. Hence came the necessity to design responsive websites to make them compatible with all device screens.;

Servers are programs that provide web content or services to clients.

It is important to understand the various types of servers and how they function to learn web development and web hosting.

Searching for a site through a browser- the process behind the scene

Every time you type “netflix.com” on your browser’s URL (Uniform Resource Locator) box, a request is made to a server (DNS).  

“netflix.com” is the domain name for Netflix (like your name) and it has a unique IP address (like your mobile phone number). 

Through the URL, a request is made to that server by your browser to show you the content that you want (in this case Netflix’s landing page). 

These are all happening Infront of you. 

Behind the scene, (while you see that annoying loading indicator), this request is usually directed to a domain name server, or DNS, which is simply like a phonebook consisting of all the contact numbers (IP addresses). The URL is then converted into an IP address by the DNS which the browser uses to locate the host's server (Netflix) and submit a request for the content (Netflix’s home page).

At this point, the outcome depends on the type of content you request, if it is a simple website page like How to sign up for Netflix” consisting of texts and text-boxes, then the HTML (for the texts), CSS (for the design) and JavaScript (for the text-boxes) are all sent back to the browser where they are extracted and presented to you. This is an example of a static site

The transmission process of Static vs Dynamic sites

Static sites are simple sites that need no further processing other than sending the content requested by the client.  

Dynamic sites require additional processing which is done by a web application such as PHP, Python or .NET before they send back the content to the browser. 

For example, when you sign in to Netflix, you input your data and then click on the “Sign in” button. After that, you see the home page with your name and customized movie list according to your watch history and likes. Here the Netflix server processes your details and displays your customized content. 

All of the above processes are executed within seconds.

That is why developers need to understand each stage of how the web works because if a stage is not carefully implemented, the site will either work slowly or not at all and may show the dreaded DNS error message which tells the audience that the site cannot be found at the location and they will need to try again. 

Even for hosting the website you just developed, it is important that people can find your site through the DNS, especially when registering multiple domain names for one site. In this case, there are some web developing firms in Bangladesh who provides free hosting service for a limited time along with the development process to help growing businesses or start-ups as a heads up while they can focus on other aspects of their business.  

Front-End Web Development – The one that people see and interact with

Source: Pexels

Front-end Web development is also known as client-side scripting and involves developing the User Interface of websites and applications

Some elements of front-end development include: 

  • - Working closely with Web/ UI designers
  • - Establishing design mock-ups and visual standards
  • - Structuring contents semantically
  • - Making the website responsive and compatible with many devices
  • - Ensuring the website’s accessibility
  • - Controlling Typography, page layout, form design, interactivity, visual assets etc.  

The main focus of the front-end web developers is to collaborate with the back-end developers and to create a functional and visually attractive website that will bring in a lot of readers or customers and hence fulfil the purpose of the site. 

Front-End Web Development is often confused with web designing. Web designers create an actual design out of a plan or an idea, they have to ensure the best user experience and accessibility of the site. Whereas, the front-end web developers implement those designs with codes and adds functionality. 

Web designing was not so prevalent in Bangladesh until recently. During the last five years, as more and more online companies are opening up, so came the need to stay ahead in the competition with good design and user experience. 

Therefore, Web Development companies in Bangladesh provide individual services like Web Designing and Experience Design etc. and  Web Developing service package as a whole which includes both the front-end and back-end development. 

The most popular languages to develop front-end contents are HTML, CSS and JavaScript. 

HTML - The Web’s main language

HTML stands for a Hypertext Markup Language, and it is the standard markup language for web pages. 

Opening and closing tags are commonly used in HTML elements to surround and define content. Different elements, for example, may define a text as a heading, paragraph, or list object.

HTML5 maintains backwards compatibility with previous HTML versions while introducing new structural tags and API support, allowing elements to be modified, dragged and dropped, and facilitating communication from inside the HTML document without the need for external scripting. HTML5's adoption has been rapid, and it is now reasonable to consider it the latest HTML standard.

HTML Structure

HTML has a plethora of tags. They're also used to define document elements and provide structure. 

Learning HTML entails learning the language's syntax, which elements are permitted, and the fundamental structure of HTML documents. All of this is extremely simple to understand, and the tag collection is small enough to learn in a day or two.

If we compare HTML structure with that of a sandwich: 

- In order to have an HTML text, you must have opening and closing HTML tags <HTML></HTML>.

  A sandwich requires two slices of bread; without those, you have a salad rather than a sandwich. 

- The head of the HTML document <head></head> appears immediately after the opening HTML tag and includes all of the non-visual elements that contribute to the page's functionality. Here you'll find elements like meta tags, which might include keywords or page descriptions to help define the document's content, as well as links to external tools, such as the CSS file.

  The head is similar to the condiments, lettuce, or tomato, that you would place on a sandwich near the top.

- The body tag <body></body> comes after the head tag and contains all of the visual structural components. The body tag may include a variety of elements such as headings, paragraphs, lists, images and links. Simply put, if it is a visual feature, it must appear in the body tag in the order you want it to appear.

  The body tag is like the sandwich's meat. It contains roast beef, cheese, and whatever else you want in your  sandwich.

CSS – The Style of the web page

CSS, or Cascading Style Sheets, is a style sheet language used to govern how HTML documents are displayed. 

As the name suggests, they are a set of formatting rules that are typically stored in an external file. They can control a wide variety of pages, from a single page to entire websites. 

CSS Structure

CSS styles are composed of two components: the selector and the declaration.

- The selector, for example, p for paragraph, tell the browser which element or elements to style. The style will adjust the formatting for all paragraphs around the web-based on this selector.

- The formatting instructions are provided in the declaration, which is enclosed in curly braces.

Benefits of CSS

- One of the most significant advantages that CSS brings to web design is the ability to create highly scalable designs. You can modify one without affecting the other.

- Another advantage is the increased portability of your content. CSS can be written to adjust the layout and styles based on factors such as screen width and orientation and thus makes the design responsive

JavaScript – The magician of Client-Side Scripting

JavaScript is a scripting language that is commonly used in web design to add interactivity and application features to websites.

It can do a variety of things for the website, such as creating interactive features, dynamic menus, opening new browser windows, and updating data directly in the browser.

Having the advantage of being executed in the browser, or on the client-side means, the page content does not need to be refreshed for the changes to take effect.

The development of several JavaScript frameworks has been one of the more beneficial advances in adding scripting capabilities to websites. These frameworks are JavaScript libraries that include prewritten functions and artefacts which makes it far easier for programmers to create interactive apps, widgets, and incorporate advanced JavaScript features.

Front-End Libraries

After being familiar with HTML, CSS and JavaScript, it is important that web developers, dive a little bit deeper and look into some of the Front-End Libraries. 

Sidenote

By now, you might think that why is there so much information in this blog and do I need to know all of these. The answer is, yes.

Yes, because now that web development is so prevalent, many Web Development companies in Bangladesh require the developer to be updated in modern technologies such as frameworks and libraries. In all of the job requirements that you will read or have been reading, you must have noticed that there are more to learn than the basics. 

Frameworks, libraries and APIS are topics you explore after you understand HTML, CSS and JavaScript and are mandatory when you want to establish a career in web development. 

The reason, I am including these here, in short, is because now you know some keywords that you can research to learn more and you can always come back to this blog or even bookmark it for future reference. 

Coming back to Front-End Libraries: 

With Front-End Libraries like Bootstrap, you will easily learn how to style your site. With Sass, you will learn to expand and add logic to your CSS types and finally, with React and Redux, you will learn to build powerful single-page applications. 

A bit about those libraries in short: 

Bootstrap

Bootstrap is used to create responsive web pages and applications. It emphasizes a mobile-first web development approach and includes pre-built CSS styles and classes, as well as some JavaScript features.

jQuery:

jQuery is used by 73 per cent of the 10 million most popular websites as of May 2019. Source: Wikipedia

When JavaScript was first released in 2006, all major browsers treated it somewhat differently. However, jQuery made it easier to write client-side JavaScript while still ensuring that the code operated consistently across browsers.

SASS:

Sass, which stands for "Syntactically Awesome Stylesheets," is a CSS language extension. It adds functionality that simple CSS does not have, making it easier to simplify and manage the style sheets for your projects.

React: 

React is a popular JavaScript library that allows you to create reusable, component-driven user interfaces for web pages or applications.

React creates its markup language, JSX, by combining HTML and JavaScript features. React also makes it easy to handle data flow in the program.

Redux: 

Managing shared data becomes even more difficult as applications increase in size and scope. Redux is described as a "predictable state container for JavaScript applications," which aids in making your applications more predictable and easier to test.

API:

APIs, or Application Programming Interfaces, are programs that are written to include a set of instructions and specifications for using a particular service. They are typically written to make it easier for developers to use an application or to make services accessible to anyone who wants to use them.

For example, suppose you are making a website for cooking. For cooking, you will need a database of recipes but you do not have the time or resources to build up a whole set of recipes. You can use an API that pulls data from a source providing a free/paid recipe dataset. 

Back-End Web Development – The Powerhouse of the Website

Source: Unsplash

In this part, we'll shift our attention to knowing what happens on the server-side and the various techniques used to build dynamic websites.

The majority of websites employ some sort of server-side scripting to dynamically show data as necessary. If we consider the number of items available on Amazon and how many posts have been posted on Facebook, then displaying all of those on separate static pages would be incredibly inefficient, so those sites instead display static templates (created with HTML, CSS, and JavaScript) and then dynamically change the data displayed within those templates as required.

Learning about server-side web development is highly recommended in today's modern world.

A range of programming languages and frameworks, such as PHP, .NET and python have provided developers with a broader range of resources to choose from while building dynamic sites. 

PHP

PHP's compatibility with Apache servers and MySQL databases is what makes it so relevant in web development. Anyone can now develop a powerful web server capable of building and hosting scalable dynamic sites using open-source software.

In reality, PHP is used to build many complex web applications, such as WordPress. PHP code, like most server-side languages, is embedded within the HTML of a website. The file with .php extension will contain regular HTML but PHP integrated inside. The extension tells the browser that the PHP code needs to be processed first. 

Local Servers for PHP:

For a PHP file to run locally, it is important to have a server running on your computer. 

Local servers such as XAMPP, WAMP, LAMP, and MAMP are commonly used when creating PHP websites. This software is primarily used to test the website on a local level. Developers will find errors and bugs before uploading by testing locally. The primary distinction between XAMPP, WAMP, LAMP, and MAMP is the operating system on the computer.

XAMPP is for X-OS, Apache, MySQL, PHP, and Perl.

WAMP is the Windows application.

LAMP is for Linux System.

MAMP is for Mac OS X application.

.NET

.NET is not a server-side program itself. Microsoft's whole application framework is referred to as .NET.

.NET, like Java, enables developers to create large-scale applications for both the web and the desktop. As a result, .NET is normally more complex than PHP. Therefore, it is not the first choice for web developers who focuses on developing dynamic sites only. 

Sites created with the.NET framework must be hosted on a Windows server. As a result, hosting companies may be more constrained, and the price structure for such sites is usually a little higher.

Python

Python is a prevailing open-source programming language designed as a multipurpose development tool. Although Python is not exclusively based on the web, it does provide several web-related libraries that make it very easy to create powerful websites and applications. 

Even though Python's syntax is fairly basic and easy to understand. It is typically used to build larger dynamic sites and web-based applications rather than small dynamic sites. 

Django (Python framework)

Django is a prominent and feature-rich server-side web framework written in Python and it is standing second in the top most popular frameworks by March 2021. (Statisticsanddata.org)

It has the versatility to create nearly every form of a website, starting from content management systems to social networks. It is compatible with any client-side framework and can distribute content in a various format that includes HTML, JSON, XML, etc.

Django provides a safe way for managing user accounts and passwords by preventing common mistakes such as storing session information in cookies. Instead, it stores only a key in cookies and the actual data is stored in the database and stores a password hash as an alternative to direct passwords.

Other than that, Django also protects the site against other vulnerabilities such as SQL injection, cross-site scripting etc. 

Node Js

Node js is an open-source JavaScript Runtime Environment that runs on multiple platforms. It allows developers to create all kinds of web applications tools.

Compared to traditional PHP language, Node Js eliminates the waiting time in processing and is also memory efficient. 

According to the Node-by-numbers study 2020, the project is bigger than ever, with 98.9 million downloads.

Using Node Js gives all of the benefits of a full-stack JavaScript development such as:

- improved developer performance and overall productivity

- reuse and exchange of code

- a large range of free tools

- swiftness in performance

- simple information sharing among a team

Thoughts for the companies wanting to develop a dynamic website

For most companies, there are three key matters to consider when selecting an application platform:  

- Cost and hosting options 

- working with qualified web developer/ firm

- easiness in use of the website

New companies or even established ones who want to develop a dynamic and responsive website for businesses can find a talented web developer locally or a web development firm in Bangladesh to do the job for them.

It is important to find a firm that can build a relationship with the clients, in that case, they can even help make the decisions regarding server technology that's right for the client, their budget and the project itself. 

Most of all, it is important to learn as much as you can as a client about the various platforms so that when the time comes to make a choice, you're making an informed one.

Dcastalia is a web development company in Bangladesh that helps clients and provide consultation services to avoid pitfalls like dead-end technologies or poorly implemented systems.

They specialize in customizing a plan that suits the clients, and to unfold the right tech for the toughest business problems regardless of the market be it for web development, application design and development, business solution, or any maintenance related issues.

Managing Data

Source: Freepik

Databases are the most reliable way to store complex data or massive data sets, and they can make things much simpler for both web developers and clients. 

There are two kinds of databases: SQL and NoSQL.

- A relational database is SQL, while a non-relational database is NoSQL.

- SQL is represented in tables while NoSQL is expressed in key-value pairs or JSON format.

- MySQL and PostgreSQL are the most common SQL databases, while MongoDB is the most popular NoSQL database.

Using SQL databases: MySQL

The most common language for handling and extracting information from databases is SQL or structured query language. SQL is normally used in web applications to update, build, delete, or retrieve data from a database.

Data is organized into rows and columns, with columns representing the data and rows storing the actual data. Web applications can parse and use this data inside the framework using simple SQL queries. SQL has a basic logical syntax that most people can pick up quickly.

SQL queries can be refined to further filter data sets or even join similar tables together to create a larger data set, and common statements like select, insert, update, and delete make it very simple to retrieve or manipulate data.

To control data inside the framework, most web server applications use database management program like MySQL

Using NoSQL databases: MongoDB

MongoDB is a leading NoSQL database and an open-source document database that is written in the C++ programming language.

It uses lists and records instead of tables and rows, as in conventional relational databases. Documents are made up of key-value pairs, which are MongoDB's basic data unit. Collections are the equivalent of relational database tables in that they contain collections of documents and functions.

Most of the time, web developers or programmers writes the code that will perform most data manipulation within websites. Therefore, many developers only focus on database management and study it further to gain expertise in the field. 

Many web development companies in Bangladesh provides Database Management services that help companies manage their data more efficiently through database applications made by developers. 

Final Word

Web Development is a diverse topic which spreads out into many categories, the basics of which are covered in this blog. After getting familiarized or getting refreshed with the basics of how the web works, front-end and back-end web developing technology as well as how to manage data, the next steps can be to get deep into the other tools involved in web development or exploring the most efficient way to develop websites that attracts more traffic

For business owners who familiarized themselves with the knowledge of web development, now is the time to build up that good communication with the developing team or web development firm you want to hire to build up the robust website you dreamt for your business. 

The smartest way to start is by looking at the local web development companies like Dcastalia who provide a wide array of services for all the stages of web development such as from web designing to web maintenance or simply the entire package that allows the whole team of designers, developers and QA specialists to look after your needs. 

WORK WITH US

Got a project to discuss with us?

Explain your project