Getting Started With Web Development
Development
Before diving in to the
world of web development, we need to realize that it plays a small part in the
grand scheme of things. Before we set into web development, we should know what
development or otherwise known as software development is. As the name itself
suggests, it is a process in which programmers that are often referred to as
Developers, well, develop software. Sound easy enough? Well I wish it were that
simple. But trust me the process itself is super hard, not to mention
extremely lengthy as it consists of multiple steps such as planning, writing
hundreds if not thousands of lines of code, testing the software, rewriting
code and fixing errors and whatnot. But then again, perfection can’t be rushed.
Now, let’s address the main topic.
What is web development?
Web development is the process of creating (developing) a website for the internet or World Wide Web. Although, it is a part of software development which is already itself a vast field, web development is also vast considering that there are different types of web development which we will discuss in the next section.
Types:
- Front-End Web Development:
Being a Front-End web developer entails that they develop the visual or to put it simply the “Look” of the website. Whatever we see whilst viewing a website whether on a desktop/laptop or a mobile phone and the part of a website we see as a user, client or customer is developed as a feat of Front-End web development. Some of the technologies you will encounter working in this end are HTML, CSS, JavaScript, JQuery and more but let’s just focus on the basics now that are HTML and CSS.
- Back-End Web Development:
If Front-End web developer deals in the user and client side, then the Back-End web developer works on the server level. They ensure that the website is up and running and connected to the server. More like a behind the scenes activity if you will. Some of the focuses of this end are on databases (MySQL or MongoDB), API’s, server side logic and much more. However, you should have intermediate skills in working with HTML and CSS to consider Back-End development.
- Full-Stack Web Development:
A Full-Stack web developer handles both Front-End and Back-End web development. These developers have expert skill in different programming languages and are well versed in the art of coding. However, having control over both types doesn’t necessarily mean that they have mastery in both. They usually are more experienced in one end, but, developers being skilled in both ends are rare if not common.
Where to get started?
Before writing your first line of code, you
need to choose an appropriate text editor. The simplest text editor is
Notepad++. However, it is not one most would recommend. Personally, I find
Visual Studio Code (VScode) or Atom to be more appropriate.
After getting a text editor, you can start your web development journey. To start it off, the first language and tool that is necessary to learn is HTML and CSS respectively. Both of these are primarily used in Front-End development.
HTML:
HTML or Hyper Text Markup Language is a
markup language that is designed to display documents on the browser. In
technical terms, it is the code that defines the structure of a web page and
the content that is to be displayed in it. It is often combined with CSS to
make it more visually appealing.
A standard HTML structure is illustrated in
the image below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
To understand the HTML structure we must first understand the elements that go into it. The elements are surrounded by tags on both sides which are opening and closing tags. In some cases, the tags can be self-enclosed. An example is the body tag <body>Content</body>. The elements in the HTML structure are:
The entire code of the web page is enclosed between the opening and closing HTML tags.
The head tag contains information that is not visible on the web page itself, however, is crucial in how the content is viewed. For example, the viewport defines how the page will be viewed in different devices. With the width set to the devices width means that the page width would equal the width of the screen of the device whether it is a desktop/laptop or a mobile screen. The initial scale sets the initial zoom of the screen at 1.0. The title of the document is the name that would appear in the browser tab.
The content that will be displayed on the
webpage will be enclosed within the body tags. The content can be text,
tabular, images, video, lists etc.
Here is a sample HTML code snippet in which I
have written a short introduction of myself.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Introduction</title>
</head>
<body>
<p>Hi, My
name is Hassam Ali.</p>
<p>I am an
engineering graduate with a Bachelor’s Degree in Petroleum Engineering and I am
now pursuing Web
Development as a career choice.</p>
</body>
</html>
And here is the web page that is generated as a result of the code.
See, how simple that was? That was just the
beginning. With more time and more elements you can make a much better website
with more elements.
The next aspect is the styling of our HTML page which is possible by using CSS.
CSS:
CSS or Cascading Style Sheets is a style
sheet that essentially designs how the document is presented in the web
browser. It helps to describe the manner in which the HTML elements will be
displayed on the browser.
Styling can be done in a few ways, some of which are:
- Internal:
Internal styling can be done inside a style
tag contained within the Head tag on the HTML document as highlighted in blue
in the code illustrated below and the resulting web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Introduction</title>
<style>
body {
color: blue;
font: italic;
font-size: larger;
}
</style>
</head>
<body>
<p>Hi, My
name is Hassam Ali.</p>
<p>I am an
engineering graduate with a Bachelor's Degree in Petroleum Engineering and I am
now pursuing Web
Development as a career choice.</p>
</body>
</html>
- Inline:
In Inline styling, the style is applied only to the line in which the style attribute is used and can be seen in the code illustrated below as highlighted in red and the resulting web page.
<body>
<p>Hi, My
name is Hassam Ali.</p>
<p style="color:chocolate; font-size: x-large;">I am an engineering graduate with a Bachelor's
Degree in Petroleum
Engineering and I am now pursuing
Web
Development as a career choice.</p>
</body>
In External styling, we write a CSS style sheet just like an HTML document. However, we save it as a CSS file as compared to when we were saving it as a HTML file. We link that CSS file in our HTML document within the head tag as illustrated in the following code and the browser page.
<head>
<link rel="stylesheet" href="WEB DEV blog.css">
</head>
This is just a small part of HTML and CSS. There are countless more aspects to web-development.
JavaScript:
JavaScript
is what makes our website functional. That sounds kind of vague. To be precise,
if we introduce something into our HTML code that should allow the users to
interact with, then that would be possible using JavaScript. There are other
languages that can do the same; however, it is advised to start with
JavaScript.
But,
for starters HTML and CSS are important to learn so that the foundations of
development can be set.
- Hassam Ali
- Mar, 31 2022
