What is the difference between the part of a website that you see and use (like buttons and pictures) and the part that makes it work behind the scenes.
The Front End is called the client and the Back End is called the server. They have completely different roles, on the face of it. What links them is a WAN (Wide Area Network) that depends upon transmission protocols (TCP/IP and HTTP) and the use of network interfaces that allow an external computer to communicate with a host computer.
Sooner or later anybody working the Back End will want to understand more of the technical aspects of the above mentioned network transmission. Fortunately we do not need that expertise on the Front End. There we have only to master the tools and APIs that come with our user agent, the browser.
We’ve summed up the parts we don’t see, the network, the servers, the databases (forgot to mention these, earlier) so now we need to see how the front end is able to communicate and access the resources on the back end.
What the user sees is the web document rendered on the screen in a browser window. The document is composed in the declarative language, HTML, which is a subset of the XML language (a language used for transmitting data). They both rely on author supplied markup which wraps the data and gives it a name, or type.
If we look at a spreadsheet in Excel, Open Office, Google Docs, etc., the one thing they have that stands out is the headings atop each column of data. In XML these would be names given to the markup tags used to relate each item of data in the column.
Eg.
Say one of the headings is, ‘date’. Each item in the column would be marked up with that defining tag.
<date>11/03/2024</date>
We won’t need to go down that road any further, for the time, but add XML to your exploration list for a year or two down the road. The point here is to see the origin of the TAGNAME, OPENTAG and ENDTAG syntax and nomenclature. The combined form we see above is called, an XMLElement. HTML, as a subset of XML has its corresponding, HTMLElement. To conclude our walk in the XML world, we introduce the Document Type Declaration (doctype) which is the opening line of an HTML document.
<!DOCTYPE html> <-- XML
<html lang="en"> <-- HTML
...
</html>
The first line is not HTML, but XML. The browser recognizes it and interprets it to be the definition of the document root. <html></html>, the primary element of the HTML document, or GLOBAL PARENT.
Long story short, we are focused on composing valid and well formed documents that can be mounted on a host server and served out when a user agent requests it. We access a document (a resource) by sending a request over HTTP via a Uniform Resource Locator (or URL, for short).
https://www.codecademy.com
Your reading will help you to break down this URL into its component parts.
In your study of the front end you will learn how to compose an HTML document, how to style it into a webpage or application interface layout, and how to give it user interaction behaviors. In addition to that you will learn how to build out your document to interact with the server, as well, but that is for down the road. Don’t go there, just yet.
Consider this an introduction into the workings of the front end, more than the back end, since most of your learning for the interim will be focused on the documents and resources needed in the user experience (UX) of a webpage.
Happy coding!
4 Likes
Thanks for sharing such valuable information.
2 Likes
Explore the essentials of website components: Frontend handles design and user interaction, while Backend manages data and server-side logic. Together, they create seamless, functional websites for engaging user experiences.
2 Likes