Introduction to Web Development

---

INTRODUCTION

A day rarely passes when we do not interact with a website of some sort, either on our desktops, laptops, or mobile devices, we access these websites for various purposes, either to get information, carry out a task, make purchases, and so on. And these websites are developed through a building process known as Web Development. In this article, we are going to take a deep dive into the introductory world of Web Development, as we explore various concepts as to how websites are created.

WEB DEVELOPMENT (DEFINITION)

Web Development is simply the building process where the end goal is the creation of a web application or website. It involves working with different technologies such as stylesheets and various back-end programming languages.

• Website: A website is a combination of various web pages, with each of these web pages displaying contents that are in line with the purpose of the website. A website is only accessible by users after it has been hosted on a server. Websites are filled with various contents, which are created using web technologies such as HTML, CSS, and JavaScript. These websites are developed for various purposes, these could be for entertainment, educational, information purposes, or even for business, as we are now able to carry out various financial transactions through websites. Examples of websites include Jumia, Konga, Alibaba, Quora, etc.

• Web Browsers: A web browser is a software application, whose sole purpose is for accessing and viewing websites. One could describe a browser as being a box and it is up to the user to open that box and search for contents of their choice(websites). Examples of web browsers include Chrome, Safari, Microsoft Edge, Mozilla Firefox, and so on.

FRONT-END AND BACK-END DEVELOPMENT

• Front-End Development: This deals with the side of the website with which the user has access and can interact. These are the contents, such as images, videos, layouts, and designs that are present on the web pages, which are created with front-end development tools such as CSS, HTML, and JavaScript. Some may argue that the front-end aspect of web development is not as technical (difficult) as the back-end, but without a doubt, it holds as much importance. As a front-end developer, it is a priority to create a layout that is user-friendly, responsive in all kinds of devices regardless of shape or size, and in all provides a seamless user experience.

• Back-End Development: The back-end development of a website bears complete contrast to the front-end. This is the work that goes on behind the scenes to ensure the proper running of a website. Back-end developers handle the database management, the processing of the user inputs, and the servers that keep the websites running. There are various web technologies and programming languages that are used to maintain and run the back end of websites, these include, PHP, Python, Node.js, etc.

BUILDING BLOCKS OF WEBSITES

The building block of a website in this context is the front-end web technologies, used to create the layout with which the users interact. A good website is like a properly built house, now this house comes with a strong foundation and it is finished up with a visually appealing design. So how is this related to a website? A website with a strong back-end development serves as the foundation which we can not see, while front-end development serves as the visually appealing design which we can all see, and this is made possible through the use of front-end building blocks such as HTML, CSS, and JavaScript.

• HTML: Hypertext Markup Language is what primarily makes up the structure of a web page. No website is created without implementing HTML. HTML can be used to create various elements in a website such as the heading, paragraphs, lists, links, and the insertion of images or videos, and these elements are created by using what we call HTML tags. Now a tag consists of an opening “<>” and closing tag </>,

Examples of the tags include

•   <h1>Heading Tag</h1>
    <p>Paragraph Tag</p>
    <li>Lists Tag</li>
    <img>Image Insertion Tag</img>
  

HTML also makes it possible to navigate from one web page to another, and this is done through the use of hyperlinks e.g.,

<a “href”>google.com</a>

• CSS: The Cascading Style Sheet is what essentially gives life to the HTML on the web page. Cascading Style Sheet (CSS) is a style sheet language used to style an HTML document. The beautiful visual aspect of a website is normally controlled by CSS.

  CSS contains multiple elements that are called upon by the developer to style an HTML document. These elements are the Selectors, Properties, and Media queries.

• JAVASCRIPT: The third building block we will be looking at is JavaScript, JavaScript is high-level programming that compliments both HTML and CSS in the web development process, it is primarily used to create the interactive features users come across in a web page. There are a variety of roles in which JavaScript performs in the web development process, and these include:

  a.Users Interactivity: This is the functionality of JavaScript that allows the developer to create interactive and dynamic features in a web page, such as a responsive button click.

  [if !supportLists]

  b. Animations: With JavaScript, developers can create various effects, such as animations or transitions.

  There are more advanced roles that JavaScript performs, such as:

  c. AJAX (Asynchronous JavaScript and XML): With this, data can be sent and received asynchronously without the page reloading, this significantly improves the loading time of the web page.

  d. Full-Stack Development

  e. Form Validation

  f. Front-End Frameworks and Libraries

RESPONSIVE WEB DESIGNS AND ITS SIGNIFICANCE

Due to the rapid advancement of technology, we are no longer restricted to viewing websites via the screen of a desktop, it is now possible to access various web contents on any device of any size or shape possible. And this is a result of combining all three building blocks of a website (HTML, CSS, and JavaScript), with CSS playing a major role.

SIGNIFICANCE

• Accessibility: Users can access content on multiple devices without fear of having a reduced user experience.

• Rise in mobile usage: Gone are the days where to access a website one has to own a laptop or PC, now users can access such content on their phones and tablets.

• Reduced cost and increased organization: As a developer, with the use of CSS one can use a single codebase to create content for multiple devices, rather than writing separate versions. Also, it improves the organization as editing and updating can be done with ease.

WEB DEVELOPMENT FRAMEWORKS

Web development frameworks are essentially tools that make the entire development process easier by providing components and features that narrow down the task which in turn leads to a faster development time. The frameworks are divided into Front-End Frameworks and Back-End Frameworks

FRONT-END FRAMEWORKS:

The front-end frameworks include

• React • Angular • Vue.js • Ember.js • jQuery etc.

BACK-END FRAMEWORKS: The back-end frameworks include

• Node.js • Django • Ruby on Rails • Laravel • Flask etc.

WEB HOSTING

After the completion of the web development process, to enable access to the website that has been created it would have to undergo a process called "Web Hosting". And this can simply be described as providing storage space and 24/7 internet supply for website files. Some companies provide these services and they are known as hosting providers, these companies own powerful servers that can carry heavy traffic and provide web content seamlessly to the visitors of the website. They are various types of web hosting:

• CLOUD HOSTING:

Regarded as the most popular web hosting format, as the files can be easily accessed based on demand

• SHARED HOSTING:

This is the most cost-effective type of web hosting, mostly used by websites that experience low traffic, it involves hosting multiple websites on the same server.

• VIRTUAL PRIVATE SERVER:

Here physical servers are divided into virtual servers that act independently of each other. It is a more scalable option compared to shared hosting

• DEDICATED HOSTING:

The most expensive type of web hosting, here a whole server is dedicated to a single website, although it may be costly, it does offer a high-level performance.

• WordPress HOSTING:

This is a hosting type that is designed specifically for WordPress websites.

CONCLUSION

Web Development is a skill that continues to grow in popularity every day. In this article, we were able to highlight important points that every beginner should expect to come across and master if indeed they intend to take on the path of Web Development.