Modern web-sites are complex creatures, that consist of a few "layers", along with classic Back- and Front- ends.
A part of website. This is a portion of code, images and video, or other data files, loaded into your web-browser, when you open a web page or that will be loaded upon a certain interaction afterwards, based on your actions.
A corresponding part of the site, which works with data by reading and writing information, that is normally publicly unavailable, or available read-only. For example: files, databases, sending and receiving e-mails. It executes private algorithms, that analyse or perform operations on the data.
The complexity lies in multitude of levels, that each of frontend and backend contain.
Front-end consists of:
- Scripts. They tell the page how to behave upon your interactions. The scripts, that are loaded during the first page's load can execute without the need of server-side, so without you reloading a page. However, it is possible to program a multitude of scenarios, so a frontend script can "talk" to backend even in cases, when the page stays still. This is an Ajax request. Interesting thing about scripts - you can always analyse what is inside of them, via Developer Tools in every browser.
- Styles. Contained in files called stylesheets, sometimes in the page directly. An essential part of appearance for the frontend. Modern stylesheets can perform some animation, text scrolling, elements hiding and other visual effects, so appealing in websites today.
- Images or videos, PDFs. Could be other files, that are displayed in the page.
- Cookies. Small text files, stored in the browser to remember certain pieces of data related to the specific browsing session. Their role is just to store this data for a certain domain and with the next request to the same domain - send it back in the request headers. This is how the page can identify someone it marked some time ago and behave respectively.
- Persistent storage. The data is being stored user-side in the browser.
- Scripting language, that executes code, which interacts with databases, files and generates pages of the site on the fly. This is important, as mostly web-sites consist of a few templates, but of hundreds or thousands of pages. A developer of the website or CMS has to generate pages out of data in the database and templates using algorithms that way, that the result appears to be a normal frontend page. That is a place, where frontend and backend meet.
- Database, that holds and updates the data as a result of website's function.
- Cache, that pre-caches the result of scripting language's execution and makes delivery of the same page to another user much faster. It is possible to cache on different levels, not just a whole generated to-be-front-end page, but also on per-page block level, per database request, per byte-code prepared for execution in-memory, etc. This adds a lot of difficulty, especially if you have unneeded data cached and this breaks down the whole work of your website.
- Web server, nowadays often a proxy to scripting language's processor, but also can be configured to follow certain rules, like handling redirections, making URL rewrites, serving specific files under defined content-type headers, compressing text-based files, set for how long the files have to be cached. In short, every file, that is not a script will go directly through a web-server to the user into front-end.