Introduction to Web Development

A typical web application consists of three basic concepts:

• A client interface, also known as the front-end.
• A server, known as the back-end.
• A database

Front-End:

All that you see of a website is loaded from your client browser (ex: Google Chrome, Firefox, IE) this is called the “front-end” of an application. The browser renders a website using HTML, CSS, and JavaScript.

HTML - (Hypertext Markup Language) This is the standard structure for telling the web browser what elements will be on the web page, i.e images, paragraphs, and other web elements.

For example, if we would like the load an image of a kitten in HTML, we would express it like this:

<img alt="a photo of a kitten"  src="/kitten.jpg">

That would render this:

CSS - (Cascading Style Sheets) If we can think of HTML as the structure and bones of the webpage, we can think of CSS as its skin.

CSS is a markup language like HTML that tells the browser what the elements on a web page should look like, for example, if we might add a border to the kitten photo.

<img style="border: 5px solid red" src="kitten.jpg"

Feel free to edit this code in a new tab and change the color from red to blue. Can you change it to other colors?

JavaScript - A computer programming language that every internet browser in the world uses. While HTML/CSS dictates the content and appearance of a website, JavaScript provides the logic.

Server:

A server is simply a computer that is connected to the internet and serves web pages to the client browser. The server also acts as a messenger between the client browser and the database.

Database:

You can imagine a database as a collection of spreadsheets. Each individual spreadsheet is called a database table. A table holds data arranged by columns and rows.

Let's say we have a website where we sell t-shirts. Our database may contain a table or "spreadsheet" containing rows of product data.

id	name	price
1	Plain T-shirt	20
2	Graphic Tee	20

You can query a database with SQL (Structured Query Language) to request information from the database. You can pass this data to the server, and the server can then pass this along further to display on the front end.

Learning Resources: In my opinion, the best way to learn is by doing so I recommend creating a simple webpage. Perhaps, a static page featuring a biography of a pet, or of yourself.