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 phones 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 favorite 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 outside 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 audiences 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?
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).
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 a 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 that provide 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
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 front-end web developers is to collaborate with back-end developers and to create a functional and visually attractive website that will bring in a lot of readers or customers and hence fulfill 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 packages as a whole which include both front-end and back-end development.
HTML – The Web’s main language
HTML stands for 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 backward 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 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 the 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 typically stored in an external file. They can control a wide variety of pages, from a single page to entire websites.
CSS styles are composed of two components: the selector and the declaration.
– The selector, for example, p for paragraph, tells 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 making the design responsive.
It can do a variety of things for the website, such as creating interactive features, and 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.
By now, you might think that why is there so much information in this blog, and do I need to know all of this? 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 is more to learn than the basics.
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:
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.
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
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.
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‘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 a Windows application.
LAMP is for Linux Systems.
MAMP is for Mac OS X application.
.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 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)
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 various formats, including 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
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.
– 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 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 developers/ 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.
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 programs 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 write 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 provide Database Management services that help companies manage their data more efficiently through database applications made by developers.
Web Development is a diverse topic that 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 modern tools involved in web development or explore 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 know about the next big thing in web development.
The smartest way to start is by looking at the local web development companies like Dcastalia 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. It is important to know the way of choosing the optimum service from the right web development company in Bangladesh as well. Dcastalia has more than a decade of experience to provide technological services to prominent businesses in Bangladesh including Airtel Bangladesh, Rangs Properties, Matador, Elite Paint, Shanta Holdings, and many more.