![\"\"](\"https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/server-client-1024x944.png\")
\r\nVery often, the client will send a request to a server, and the server will send back the information to the client. It is then the client’s job to present it to the user. This brings us to the front-end.\r\n<\/p>\r\n\r\n
The Front-End trinity<\/h2>\r\n
\r\nSo what is the front-end? It is the client-facing code (hence “front”-end), is running on the client’s machine and is responsible for displaying content on the page. However, while the front-end IS running on the client’s machine, it is provided by the server. Nonetheless, the client can actually inspect it and modify it.\r\n
- \r\n
- Most modern browsers have an option called “developer console”, which can usually be accessed with the F12 key. It allows you to see and manipulate a lot of information on the page. It’s definitely worth looking into and experimenting with it!<\/li>\r\n
- The main objective of web-extensions is usually to inspect what is on a webpage and either modify it or keep track of things.<\/li>\r\n<\/ul>\r\n<\/p>\r\n
\r\nAs for the kind of code found on the front-end, it is usually a combination of three different categories:\r\n
- \r\n
- The Markup language, which is in charge of the content of the page itself. It contains the different elements, such as columns, tables, text, etc… The main language used here is usually HTML.<\/li>\r\n
- The Style Sheet language, which allows you to define the appearance of the page, such as font, color, spacing, ordering, layout, etc… The main language used here is usually CSS.<\/li>\r\n
- The Scripting language, which is a full-fledged programming language that allows you to program behavior, modify the page on the fly, react to user input, etc… It allows webpages to be dynamic. The main language used here is Javascript (Although PHP is still used by some big corporations).\r\n<\/ul>\r\n<\/p>\r\n
![\"\"](\"https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/front-end-trinity-1024x907.png\")
Front-end Trinity<\/figcaption><\/figure>\r\n\r\n \r\nNote about the Scripting Language: most people will actually use a Framework<\/a>, and there are many different Javascript Frameworks. The goal of a Framework is to simplify and mainstream the use of the scripting language, adding a lot of built-in functionality and libraries. Still, it’s possible to use Javascript without a framework, which is often called “Vanilla Javascript”.<\/em>\r\n<\/p>\r\n\r\n
The Back-end<\/h2>\r\n
\r\nSo far, we’ve been talking about the front-end, and it might leave you wondering…if there’s a front-end, does that mean there’s also a back-end? Yes, there is: it’s the code running on the server. This includes, for example, the database<\/a> (where all the data is stored) and API-endpoints<\/a> that users connect to. The back-end, serving a different purpose, tends to be fairly different from the front-end, and is usually hidden from the user.\r\n<\/p>\r\n\r\n
What’s Next?<\/h2>\r\n
\r\nThis is but a basic overview of the front-end to give you a bird’s eye view of what’s involved, a simple starting point, yet an important one for anyone interested in understanding webpages and how to program them. In the upcoming weeks, as I work on my Chinese Study App project<\/a>, I plan to release a few more guides discussing some of the elements highlighted here in more detail.\r\n<\/p>\r\n","protected":false},"excerpt":{"rendered":"
This was written August 25, 2024. Introduction Ah, the web. It’s become almost ubiquitous nowadays. But although it used to be accessed mostly through browsers and webpages, it’s now often accessed directly through 1st party apps instead. Regardless, I think browsers and webpages still have a lot of value, and so does understanding them. For … Continue reading Webpages – Front-end introduction<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[11,14],"tags":[],"class_list":["post-2300","post","type-post","status-publish","format-standard","hentry","category-programming","category-tutorial"],"_links":{"self":[{"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/posts\/2300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/comments?post=2300"}],"version-history":[{"count":10,"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/posts\/2300\/revisions"}],"predecessor-version":[{"id":2347,"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/posts\/2300\/revisions\/2347"}],"wp:attachment":[{"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/media?parent=2300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/categories?post=2300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/tags?post=2300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}