This is my first in a series of posts about becoming a .Net Web Developer. In this post, I go over the basics of web development, including some important concepts and definitions.
Here’s a common question: What is the difference between front-end and back-end web development? The answer to this really requires an overall understanding of what web development is. To understand that, you need to know about the Client-Server Model.
When you type something into the URL bar, your browser (the client) sends a HTTP request to a server. The server, in turn, sends a HTTP response back to your browser. This includes HTML and the CSS and Javascript files referenced by that HTML. The HTML, as you may know, creates the structure of a webpage. The CSS is what adds on the aesthetic appeal.
You would create a paragraph like this in HTML:
<p> Hello world! This is a HTML paragraph. </p>
You could turn that paragraph blue by applying CSS like this:
p {
color: blue;
}
Javascript adds interactivity to a webpage. See, for example, this simple JS Fiddle.
The work that goes into writing HTML, CSS, and Javascript is known as front-end web development.
When your browser requests information from the server, usually one of two possibilities will occur. First, it could just be static HTML, CSS, and Javascript files on that server. So when you typed in www.yourimaginaryweburl.com/mypage.html, the server would spit back HTML from a file that’s just sitting there named mypage.html.
This is not how most web applications work. Any time you have information that has to be retrieved from a database, it is going to require back-end web development.
Take Amazon for example. Amazon has to keep track of all sorts of information, such as the username and passwords of all its users and the details of all its products. When data is persistent, or lasts beyond your initial visit to the website, it needs to be stored somewhere.
These kind of websites have a web application on their server, rather than a bunch of static HTML files. Web applications are built using a back-end programming language, such as Ruby, Java, C#, or Python. The web application makes calls to a database in order to create and retrieve information. The web application will also dynamically generate HTML to send back to your browser.
In the next post in this series, I will go over APIs, HTTP verbs, and AJAX. This will hopefully further illuminate how web applications work.
Further resources:
Introductory HTTP – A free online book by Launch School, which goes more in depth into what HTTP is.
How DNS works – An adorable comic on how the internet works.