Hello everybody,
Today I will write about web development from zero i.e. what is web development. I will share some resources to get started with web development. And we will also learn about code version control system i.e. git in the upcoming posts.
Web Development
Well according to Wikipedia,
“Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications (or just ‘web apps’) electronic businesses, and social network services. Among web professionals, ‘web development’ usually refers to the main non-design aspects of building web sites: writing markup and coding.”
That was actually a theory, Web Development means developing something like a web site or a web application (I will talk about web sites and web application later). In the most general words something you can visit in a browser. Like every day we visit Google it is a web application. And yes in web development we develop products like this. So the biggest examples are google.com, facebook.com, linkedin.com, twitter.com or anything you visit in a browser.
How these are developed
A web application is made up of two components
- Front End
- Back End
Front End
It is the part of the web application with which we interact. It is something which we see when we visit a URL. It is made with the help of HTML and CSS.
HTML
HyperText Markup Language is used for designing or coding a web page. So basically we create a skeleton with HTML with the tags. A tag means something which defines an entity for example:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<div>
<h1>Hello there</h1>
<p>This is my first HTML Page</p>
</div>
</body>
</html>Anything written inside < > is a tag. It has meaning. You may have got an idea that everything is divided as a module on a web page.
Like <html>...</html> defines an HTML document, and the interesting thing is that it is a language that the browser understands. Like you may do one thing to verify the same.
h1 tag is for heading you may consider it as the title or main heading. And p tag stands for paragraph.
Visit any website that says Facebook now how to know the source. Just add view-source: in front of the URL in the browser. It will work in all browsers. So now the URL becomes view-source:https://www.facebook.com and you will see something like this.
Note: It will look something like this not exactly the same as I have my Facebook account logged-in in my browser.
So you may apply the trick to know the source of any web site. And this is what the browser receives from the internet and turns out to be what you see in the browser.
CSS
In the above image, you may have seen something like class= in the HTML tags. So basically those are to style the web page and here comes CSS in to play.
CSS stands for Cascading Style Sheets. It is used to give styles for HTML elements. Classes and id are made for the same in CSS which we will discuss later. So basically the colors, width, heights, borders, paddings all are set by CSS. Let's shape our HTML page which we made earlier. But before that how to include those CSS files on our page. There are two ways to do so. Firstly you may add CSS files by adding similar codes in your HTML file:
<link rel="stylesheet" href="LOCATION_OF_CSS_FILE">
Or you may use <style>...</style> tag for defining CSS within the same HTML file. Let's use the second method for now.
A question may have arisen how the browser will know that we want to style any element. Yes with classes and ids. So basically we define class and id to identify any element. And when we want to apply any class to an element we write class = "NAME_OF_CSS_CLASS" in the HTML tag. So our div element will become:
<div class="container"> ... </div>
And if we defined any id it becomes:
<div id="container"> ... </div>
Now how to define CSS for a div element. Let's imagine that we want the background of div as light blue, with paddings of 10px in each side and with a solid border of width 5px. So the resultant CSS would be:
#container {
background-color: lightblue;
padding: 10px;
border-style: solid;
border-width: 5px;
}Yes, you guessed it right . for class and # for an ID.
Now we have a few more details like when we want to give styles to a tag itself then you don't need to include any class or id. But remember whenever you will use that tag those styles will automatically be applied.
Like let's style our h1 and p tags.
h1 {
color: black;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
text-align: center;
}Resources
There are plenty of websites available on the internet to learn about HTML, CSS and web development. Here are some which I think are suitable for getting started.
I have created a pen in CodePen.io. You may see the code and its output there. This is my new blog dedicated only to programming stuff. Please like, share and subscribe to the upcoming amazing stuff.
That's, for now, we will learn more about the back end in the next post.
Originally published at www.kdpisda.tech on February 27, 2018. I am planning to write posts on the medium from now on. Follow me for learning something awesome.
Comments