Whenever we learn about some topics or if you are teaching someone, I always felt analogies from day to day life makes a greater impact to a person’s understanding. This post is my take on analogy of technologies/terminologies/people involved in front end development.

I am going to compare building a website to building a house where :

HTML(HyperText Markup Language) would be the raw building materials namely bricks, steels, cement. These help you in building the skeleton or structure of your house. Similarly, you build the structure of your page using HTML elements like div, span, p, header, section etc.

CSS (Cascading Style Sheets) would be the blue print which defines the layout of your house. It defines the size of your rooms, wall colors, window sizes, position of doors/windows according to your needs. In the context of web development, you use CSS to define your page layout, styling - font to be user, color etc

JavaScript would be the electricity/power needed to make your house dynamic and make things function in your house. Example, if you press a light switch, it should turn on/off the light. You could live in a house without power supply just like you can have a website with javascript disabled or not at all. But lot of things may not function in your house/website. In modern web, JavaScript is a must have just like you need electricity to power up your homes.

UI or User Interface is the portion of the house which anyone can see and interact with. It gives the perspective of how your house is going to look like to the person who sees it. Similarly, in the context of web or any front end interface, it would mean the views/pages that the user can see and interact when he/she browses a website/app.

UX or User Experience would be how good a resident in the house would feel about staying in it. Do you have good ventilation, aeration ? How accessible are things ? Basically, it tells you the comfort level of the house. Similarly in the web development context, this is simply how good the user feels about your site. Its basically what are all the things you would do to make the user to have a great experience in visiting your website - pleasing color, intuitive designs, lesser mouse clicks etc..

Web Components in a house construction analogy would be a set of ready to use materials which you could just get it from a store/shop and use it while constructing your house. This could be as simple as your doors, windows, window frames etc to as big as a ready to use, already built rooms. Similary in a front end development analogy, web components are already built, independent set of reusable components which you could just import into your web page and use it. It doesn’t depend on any framework and its it totally interopable as it’s purely built of native browser APIs.

Front End Frameworks would comprise of the tools that would aid in the faster construction of a house and at the same time ensure efficient use of materials and resources. You could think of them as a set of standard guidelines to construct a house or could think them as regulatory or standards authority who set out the guidelines on how a building should be built. Similary, a framework in the context of front end development aids in reducing the boiler plate code required to get you started and also to help you in following certain guidelines while building a web page/site/app.

UI/UX Designer in the context of house construction could be thought of interior/exterior decorators whose primary responsibility is to facelift the look and feel of the house and make staying a pleasure for the resident. In the web development context, a UI/UX designed would typically design the layout of the web page, choose the fonts to be used, the coloring etc according to the end-user/business needs.

UI Developers would be the persons actually doing the house construction work - masons, painters. They would start from the foundations laying brick by brick and building the house group up following the architecture plan proposed by the interior designer. Similarly, a UI developer would build a webpage following the layout and specifications laid out by the UI designer. A UI developer should be strong in HTML,CSS.

UI Engineers would be the persons who would be involved in the engineering works inside the house. These could be your electricians, plumbers, carpenters. Similarly, UI Engineers would be developers who apart from having a basic knowledge in HTML, CSS should have an strong knowledge on JavaScript and also preferably knowledge on any modern front end framework.