The web app architecture: Frontend

As I have mentioned in my [preview blog](/blogs/my-programming-journey/), I started my programming journey as a web developer. In this 3 (or more) part series of **the web app architecture**, I will try to explain to a beginner perspective about the working of a fully fledged web application. * * * ### Frontend Let's talk about a webpage. Right now, assuming my web application is still up and running, you are reading this blog on a webpage. If you open up inspect element, which can be done by clicking the right mouse button to open up the context menu and selecting "inspect element" or similar, you can most probably see a bunch of text similar to ``. This is HTML and this code is responsible for being the **actual** webpage that you are seeing. It is the **visual** aspect of a webpage. The more **logic**, **security** and **data storage** part of the webpage is a topic for another time. The part that is responsible for the graphical aspect or the UI (User interface) is called the **frontend**. There are three primary parts of the frontend. These are HTML, CSS and Javascript. * * * #### HTML HTML or Hyper Text Markup Language is the standard markup language for documents designed to be displayed in web browsers. It defines the structure and layout of a webpage. HTML code consists of elements, where elements are the building blocks of a webpage. For reference to the anatomy of the human body, the HTML code is the bones of a webpage. It consists of **no** design and logic. index.html ```html ``` * * * #### CSS CSS or Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. It is used to add fonts, color, styles, etc to a webpage. Without CSS the web page would be really boring and dull with no design. CSS in and of itself is not that useful, it is only useful once it is used with HTML or a similar markup language. For reference to the anatomy of the human body, CSS is the design, height, facial structure and features of a webpage. It does not define the layout naturally (although it can be used to do it) nor does it contain any logic, it only defines the style of elements. index.css ```css body { color: red; background-color: blue; font-size: 16px; margin: 8px; padding: 4px; } ``` #### Bootstrap Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components _(wikipedia)_. In essence, it is a library with pre built components and styled classes which can be utilized to easily style elements in HTML. It is really easy to learn and fast to use, making it ideal for small scale projects. As a matter of fact, this very website is styled using Bootstrap 4! * * * #### Javascript JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled and multi-paradigm. It has dynamic typing, prototype-based object-orientation and first-class functions _(Wikipedia)_. Although javascript is more prominently used in a multitude of software applications, in the early days, its primary use case was for adding interactivity to plain webpages. Javascript can be added as a separate file or embedded into the HTML code. It allows for more dynamic features of a webpage like forms, collapsible, dropdowns, etc. For reference to the anatomy of the human body, javascript is the core organs that bring more "life" to the webpage. * * * Even though modern web development has evolved to much more complexity, the core fundamentals remain the same, with HTML, CSS and Javascript laying the foundation of a webpage. Together, they are used to build very strong, dynamic, interactive, stylish webpages which give users a pleasant experience.