Web development for non-developers
A short introduction on how websites works for non-technical entrepreneurs.
This is an article aimed at non-technical entrepreneurs. I think it is really important for entrepreneurs working in the web industry to have a decent understanding of how websites works. This article will provide some very basic insights into the underlying technologies of the web. I will briefly discuss front end, back end, how the internet works and what a framework is.
Disclaimer: Bear in mind that this article contains of some pedagogic lies and simplifies a lot of concepts.
Understanding the internet
How does it work? A website is typically stored on a server somewhere in the world. When you want to access a website, you type in something like «facebook.com» in your web browser. What happens now behind the scenes is that a request is sent to facebook’s servers. A server is simply a computer that is specially made for storing and computing a lot of information. Your laptop could in fact be a server, although facebook’s servers probably looks more like this:
Understanding front end code
HyperText Markup Language (HTML) files is the content of the website. They can include writing, links, pictures, and even sound and video. HTML is used to mark and describe each of these kinds of content so the web browser can show them correctly. HTML can also be used to add meta information to a webpage. Meta information is information about the web page. For example, the name of the person who made it. Meta information is not usually shown by web browsers.
Example of HTML code:
The Cascading Style Sheets, or CSS, is are files that style a website. It is a way to change the look of the HTML code.
Example of CSS code:
By adding a reference to the css file in the HTML code, we get the following result:
The two pictures below shows Facebook with and without CSS. Note that all the content of the site is present even without CSS, but it looks just awful.
This example gives instructions to hide the paragraph text («p») when the button is clicked:
Understanding back end code
As many people tend to say: «this is where the magic happens». While the front end code is sent to every computer requesting a website, the backend code is not. The backend code sits on the server side. The backend consists of a server, application and a database.
The Database is where all the data is stored. You can think of it just as a huge spreadsheet like this:
Databased is often handled by systems like MySQL or MongoDB. Read more about them here: http://www.scriptrock.com/articles/mysql-vs-mongodb
More on languages:
The communication between front end and back end is done via the HTTP protocol, typically a via a HTTP GET or HTTP POST. More on HTTP:
HTTP GET is called from the front end when you want to get some data. For instance a list of names.
HTTP POST is called from the front end when you want to save some data in the database. For instance an image you post on Facebook.
A web application framework (WAF) is a software framework that is designed to support the development of dynamic websites, web applications, web services and web resources. The framework aims to alleviate the overhead associated with common activities performed in web development. Or to put it this way: There is a lot of complex stuff you can do with a website that requires a lot of code. Frameworks are used everywhere to decrease the amount of code you have to write and make life easier for you.
Popular front end frameworks:
Twitter Bootstrap (CSS)
Popular back end frameworks:
Django — Uses Python
Laravel — Uses PHP
Ruby on Rails — Uses Ruby
And at last, an in depth comparison of frameworks:
So thats it! Thank you for reading. I hope some of it was helpful ☺