Question

I’m relatively new to the web development scene, so please excuse any frustratingly obvious questions.

What I’ve found myself to struggle with is understanding how all the different technologies of web design fit together – how they all fit into the flow of development and their heirarchy.

I understand the basic html,css,javascript flow. HTML defines your structure and content, CSS comes in and then defines the presentation of said content, and finally javascript adds a layer of interaction and defines how the website behaves. Given that, it’s easy for me to see how jQuery etc fit into the picture.

As I move towards making more dynamic sites though, I find myself inundated with trying to learn/balance many web technologies and frameworks (django, mysql, sql, innodb, drupal, rails, php, wordpress etc, etc). I realize that some of what i just listed overlap and serve the same function, but that just goes to show my general confusion with the topic. For example, the django example: I understand django is a web framework that runs on python to help you develop web apps quickly, however, the relationship between the server, html, and python is cloudy to me.

Does anyone know of a good source that can outline how all these puzzle pieces fit together (or feel like offering their description of such matters)?

Thanks 🙂

Answer 1

I don’t know of any resources that explains this the way you’re looking for so I’ll just add my take. Maybe we can see where I’ve goofed.

I like to split the technologies into two camps, Client Side and Server Side.

Client Side is anything that runs on or in the web browser on a user’s computer, tablet, smartphone, etc. These technologies include:

• HTML (for structure)
• CSS (for designing the structure)
• JavaScript (for making the structure do stuff)

Server Side is anything that requires a connection to a web server and resources on said machine. This may be a web server running on your localhost as a development machine or a server connected to the Internet. These technologies include:

• Web server (Apache, nginx, …) This is what the user actually connects to via www.example.com in their browser
• Server Side Language (PHP, python, ruby, ASP.net, …) This is what provides access to a physical data storage, like a…
• Database (MySQL, SQLite, PostgreSql, MongoDB, …) This is where the data about your website or app is stored

So, in your example a user would connect to a web server, access a file holding a python script that connects to the site’s database and then produces the appropriate HTML, CSS and JavaScript to generate a webpage on the browser’s screen.

Obviously this is overly simplified and there’s a lot more that goes into it but this is it in a general nutshell.

I would also definitely read this post a lot.