TL;DR: Web frameworks package reusable solutions for routing, requests, templates, data access, security, and other common application work. They are optional. Server-side web applications can use many programming languages.

Let's say you want to develop a very basic website on your own. In that case, you don't really need to use a "web framework". All you need is to write a few lines of HTML. For example, if you copy the few lines of HTML below, paste them in a.html file on your computer, and double-click it, your browser will open the file as if it's any other website.

<!DOCTYPE html> <html> <body> <h1>This is a web page.</h1> </body> </html>

So that's great. But you'll notice the site is probably looking a little bland. Well, that's where CSS comes in. CSS allows us to add some style to our website (bright colors, fancy fonts, etc.)

You can create a complete static website with HTML and CSS. HTML is a markup language that describes structure, while CSS is a style sheet language that controls presentation. For browser-side programming and interaction, all major browsers run JavaScript natively. Server-side logic is separate and can be written in many languages.

Basically, HTML/CSS is used to tell your web browser what your website looks like, but you won't be able to perform any complex operations. For example, let's say I wanted to display an alert when a visitor to my website clicked on a button. To achieve this, I'll have to use JavaScript. The code block below demonstrates how this is done. All you have to do is add script tags to your HTML file, and put the JavaScript logic inside. Copy the below text into a.html file on your computer and you'll see what I mean.

<!DOCTYPE html> <html> <body> <h1>This is a web page.</h1> <button id="button">Click me!</button> <script> var button = document.getElementById('button') button.addEventListener('click', function() { alert('Hello world!'); }); </script> </body> </html>

Alright, so this is great. You can use HTML to outline the structure of your website, CSS to make it look good, and JavaScript to make it smart. What, then, do we need these web frameworks for??? Basically, web frameworks provide a framework for web developers to work off of. You can imagine that a lot of the basic functions are the same for most websites, so instead of having everyone re-write the source code for these functions in JavaScript every time, web frameworks provide a simple function you can call once and be done with it. It's like the difference between building a house from scratch and designing a house after someone else has already stood up all of the walls.

A server-side web application can use Python, Ruby, Java, JavaScript, or many other languages. A framework is not what makes those languages possible. It provides conventions and reusable components that make common web tasks easier. In Python, Flask and Django are popular examples with different levels of built-in structure.

Continue with the next post to build a small web app using Flask, then compare that framework-assisted workflow with a simple static page.